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.
In this article:
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.
Under the Background options menu you can choose from Color, Gradient, Image or Video background types for your Starter Site first tile:
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:
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:
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:
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:
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:
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.
In Cover Layout you can choose what part of the first tile your cover should take. There are six options to choose from:
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.
The Call to Action Button takes customers right to the product listing. By default, it is enabled and says “Shop Now”:
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”.
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.
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.
After uploading your logo image, you can make it look round by enabling the Round Logo option:
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:
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:
- Select if your social media links should appear in the header or on the cover of Starter Site:
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):
- 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:
- You can enable Show shopping cart icon to show the clickable bag icon in the top right corner of the top menu:
Once clicked, it opens the Shopping Cart page of your store where customers can proceed to checkout or continue shopping.
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.
You can control Thumbnail size, Aspect ratio, Text alignment and Product card border with the help of the corresponding options:
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:
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:
Below you can enable the option Darken images' background to make them more prominent on the store background.
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:
If you want to change the order of blocks in the sidebar, you can drag and drop the elements in the list.
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:
Altogether, the preset appearance options give you much freedom in building a unique professionally-looking webpage that showcases your products in a remarkable way.
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.
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.