Configuring Starter Site design

Last updated

You can use a responsive one-page Starter Site template to quickly start selling your products online. Your site will look professional on all devices, desktop, tablet, and mobile. You can easily change the look of Starter Site to your liking. If you are a non-tech savvy person, you can choose from the preset appearance options, or use a ready-made third-party theme. Proficient users with coding skills can dive into CSS modifications to create a unique look of the store.

If you’ve added Ecwid to your own website, you can change its look by following the guide Changing store design.

In this article:

Appearance options for your Starter Site cover

If you haven't found some of the Starter Site design settings in your Ecwid control panel, please don't worry. We are gradually enabling them for all Ecwid stores and soon they will be available to you, too.

You can use a whole lot of preset design options to change the cover background of your Starter Site and edit elements that appear on it. You can find them in Ecwid control panel → Starter Site, click on Edit Content, the Headline & Cover section.

Headline and Cover overview

Background

Under the Background options menu you can choose from Color, Gradient, Image or Video background types for your Starter Site first tile:

Background type for Starter Site cover

The Color option is good for a minimalistic look or for a combination with a cover image (see cover layouts described below). You can set any color as a cover background:

Background color for Starter Site cover

For a fanciful look try out the Gradient type as your cover background. You can choose a gradient from the gallery or make a mix of any two colors with a preferred angle:

Background gradient for Starter Site cover

For a Cover image, you can upload a picture of you or your store team, an image featuring your goods or any other picture that will attract your potential customers and give them a positive impression about your business. The recommended file size for the Cover image is 1000 x 667 pixels or larger, in JPG, PNG or GIF format:

Background Image for Starter Site cover

If you don’t have any good pictures for the Cover image, you can find some great photos on stock websites, like Shutterstock, Depositphotos, Pixabay, and others.

Apply an overlay to your background image to make the text on it easy to read (as well as set a certain mood). It can be a one-color overlay or a gradient with a custom angle:

Overlay for Cover Image in Starter Site

You can easily add a Youtube/Vimeo video as a cover background to showcase your best products or to animate your Starter Site for an event - just put the link for your video in the text field, save the changes and the video will start playing in your cover background:

Video as a cover background in Ecwid

You may want to add an overlay to your background video so the text on it is easy to read. You can use a suggested one or pick any color or gradient for an overlay.

Cover layout

In Cover Layout you can choose what part of the first tile your cover should take. There are six options to choose from:

Cover Layout in Ecwid Starter Site

If you do not need a cover in your site, pick the Top Menu option to turn it into a narrow header.

You can also position and align the headline and description to find the best place for them on your cover.

Call-to-Action Button

The Call to Action Button takes customers right to the product listing. By default, it is enabled and says “Shop Now”:

Call to Action Button in Starter Site cover

You can change the wording in the Button label field and use any other name of your choice. For example, if you sell tickets online, you can name it “Book Now”. For digital products like e-books, images or any other downloadable materials the button can say “Download Now”.

Typography

If you want to set another color and size for the call-to-action button and use a different font for its label, you can make these changes under the Typography menu that comes next. The font color automatically adapts to the chosen button color to make the label easy to read.

Besides that, under Typography you can change how the headline and the Starter Site description appear - select the desired font from a drop-down with over 60 suggested fonts, increase or decrease their font size and pick any font color.

Typography in Starter Site editor

To find matching colors for cover elements, you can use sites like Canva and Color Hunt for a color palette inspiration or upload your cover image to a service like Image Color Picker to find the exact codes for its colors.

Store logo

Under the Store Logo menu, you can upload a logo that is displayed to customers on the store pages. Your original logo image can be rather big, Ecwid automatically resizes it to fit into the block of 480 x 140 px. But it should be no less than 140 x 140 px (or at least 280 x 280 px to render well on Retina). The supported image formats are JPEG, PNG, GIF.

You can also upload a logo for invoices. It will appear in your order notifications, as well.

After uploading your logo image, you can make it look round by enabling the Round Logo option:

Logo for Ecwid store

If you don’t have a logo yet, read our blog post to learn how to create an awesome logo for your brand.

Scroll Arrow

Under the Scroll Arrow menu you can hide the arrow that brings site visitors to the store section or add a text for it encouraging people to visit your store:

Scroll Arrow in Starter Site cover

Top menu

Under Top Menu you can customize the appearance of the top bar of your Starter Site:

  • Choose if you want to display your phone number in the header or on the cover:

Phone in Top Menu of Starter Site cover

  • Select if your social media links should appear in the header or on the cover of Starter Site:

Social Media in Top Menu of Starter Site cover

You can also choose not to show them in the first tile - in this case the social links will appear only in the footer of your site.

  • Display the “Get Directions” and “Open hours” links in the cover by enabling the toggles for Show location and Show store hours options (they both lead to the Location section of your Starter Site):

Location in Starter Site Top Menu

  • Show navigation in the header to give it a traditional look. The navigation includes the links to the following sections of your one-page Starter Site: store, About Us, Location, Contact Us:

Show navigation in Starter Site Top Menu

  • You can enable Show shopping cart icon to show the clickable bag icon in the top right corner of the top menu:

Show Shopping Cart Icon in Starter Site top menu

Once clicked, it opens the Shopping Cart page of your store where customers can proceed to checkout or continue shopping.

Preset design options for your store

You can change the appearance of your store and give it the look that best reflects your brand. You can access the store design options in Ecwid control panel → Starter Site, click on Edit Content, the Store Design section.

Store Design overview

Store Design options replicate the settings in your Ecwid Control Panel → Design. The changes you make here will affect all your storefronts.

You can control Thumbnail size, Aspect ratio, Text alignment and Product card border with the help of the corresponding options:

Store Design in Starter Site editor

Large images are a good choice for showcasing your products in every detail. Medium images are suitable for most products, while with small images you can fit more products per page. Several aspect ratio options provide a flexible way to best display horizontal, vertical or square images.

Product list and categories

Expand the Product List & Categories menu to customize the appearance of the pages where your products are listed. You can change the visibility of Product name, Price, SKU, "Buy Now" button and Additional product image:

Product List settings in Ecwid store

If you wish to get a more airy look, you can switch off the SKU number and Buy Now buttons or show them only on mouse hover.

In case you have category cards displayed on the store home page, you can adjust the Category names' position.

Under the Navigation block you can switch on/off the Breadcrumbs and "Sort by" options:

Navigation in Ecwid store

Below you can enable the option Darken images' background to make them more prominent on the store background.

Product page

Under the Product Page menu, you can find preset design options for customizing the look of pages with detailed information about your products. Here you can change the Page layout, Image gallery layout, and Sidebar elements:

Product Page settings in Ecwid store

If you want to change the order of blocks in the sidebar, you can drag and drop the elements in the list.

You can upload additional product images to demonstrate your item from the best angle. For gallery images, you can upload zoomed pictures showing the most essential details of the item, side and back views, pictures of matching products or additional accessories.

Miscellaneous

Under the Miscellaneous menu, you can adjust the visibility of the icons that appear below your product lists. You can disable the Footer menu, "Sign in" link and Breadcrumbs:

Navigation under product list in Ecwid store

Altogether, the preset appearance options give you much freedom in building a unique professionally-looking webpage that showcases your products in a remarkable way.

Ready-made themes and apps

You can integrate a ready third-party design theme or install an app from Ecwid App Market that will help you customize your storefront, change colors, fonts, buttons, add extra elements to the page and much more.

For instance, with the Tabber app, you can add tabs to the product descriptions that will help you visually organize the description text into logical parts. The Imajize app will let you upload the 360° views of your products displaying your goods from every angle. The Decorator app will help you restyle your store without any CSS knowledge.

Go to your Ecwid Control Panel → Design → View Apps to see the list of pre-made themes, affordable design tools and add-ons for enhancing the look and feel of your Starter Site.

Custom CSS themes (advanced)

If your storefront requires advanced customization and you are acquainted with CSS, you can build your own CSS theme from scratch or use ready CSS tweaks from Ecwid Help Center, e.g. Changing buttons in your Ecwid store. To learn more about custom CSS theme, read about Custom design.

Building custom design themes requires CSS knowledge and coding skills. If you are not comfortable with coding, but want a custom CSS theme for your store, our experts can create a custom design for you on a paid basis.

Related articles

Editing Starter Site content
Connecting your domain to Ecwid Starter Site
Customization options in Ecwid

Back to top
Has the article answered your question?

Awesome! Thanks for your feedback!

Please send us that question. We will be happy to help by email.

Send a message