Knowledge base
Video tutorials
Try searching for:
Recently viewed articles:

Table of contents

Configuring Instant Site design (legacy version)

You can use a responsive Instant 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 Instant Site to your liking. If you are a non-tech savvy person, you can choose from the preset appearance options in your Ecwid admin → Website. Proficient users with coding skills can dive into CSS modifications to create a unique look of the store.

This article is for the old version of Instant Site that is no longer available for new Ecwid users. If you’re looking for guidelines on how to edit design of the main Instant Site version (now available by default for new users), check out the article on configuring Instant Site design →

Order of sections

Instant Site consists of the following sections:

  • Cover (the first tile)
  • Store
  • Company's mission (Why choose us)
  • About
  • Customer testimonials
  • Location
  • Contact information 

You can hide any section of the Instant Site and change their order in the desired way. For this, go to your Ecwid admin → Website, click Edit and then click Arrange sections:


For example, if you are just setting up your store, you can hide the Customer Testimonials section till you gather feedback from your customers. If your business is seasonal, you can easily hide the store portion within your Instant Site and then re-open it when you are back. In case you want to show your cover image lower, you can move it under another section of your Instant Site, etc.

If you do not need cover, you can turn it into a narrow top menu.

Themes for cover

The cover section introduces your store to your customers. You can choose one of 79 themes for your store cover image. To do that, from your Ecwid admin go to Website → Site Appearance → click Edit → Themes. Choose the theme that fits your business best:


You can also edit the chosen theme: upload your own cover image, change the typography, etc. You can do this in the appropriate sections of the Instant Site editor. 

Cover background

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

Background type for Instant Site cover

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

Background color for Instant 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 Instant Site cover

For 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 1400 x 1050 pixels or larger, in JPG, PNG or GIF format:

Background Image for Instant 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 Instant Site

You can easily add a Youtube/Vimeo video as a cover background to showcase your best products or to animate your Instant Site for an event - just put the link for your video in the text field, save the changes and the video will soundlessly play 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 Instant Site

If you choose a half-screen or a sidebar layout with a cover image in the background, the recommended size for the cover image is 1800х700px or 1200х1200px respectively.

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 Instant 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 in cover

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 Instant 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 Instant 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 an Image Color Picker to find the exact codes for its colors.

Store logo

You can upload a logo that will display on your storefront pages. This logo will also be used by default in your email notifications, invoices and as a favicon.

If you later change the store logo, you will also need to manually upload the new logo in email notifications and invoices settings. 

The store logo should be no less than 140 x 140 px (or at least 280 x 280 px to render well on Retina). You can upload a bigger image. In this case, Ecwid will automatically resize it to fit into the logo block of 480 x 140 px.

The supported image formats are JPEG, PNG, GIF.

To add a logo to your storefront: 

  1. From your Ecwid admin, go to Website and click Edit.
  2. On the opened page, click Headline & Cover image.
  3. Scroll down and click Store logo
  4. Click Upload logo.
  5. In the Logo position drop-down, choose where you want to show the logo. There is also an option to hide the logo and use it only for the favicon.
  6. If you want to make your logo round, enable the Round logo option.

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

If you want to use the favicon and hide the logo, you can do it with a CSS code:

  1. From your Ecwid admin, go to Design.
  2. Click Edit Theme if you have an active custom CSS theme or scroll down to the bottom of the page and click Create ThemeAdd new CSS Theme.
  3. Paste the following code to your CSS Theme:
div.cover__logo { display: none;}
  1. Save the changes.

Refresh the storefront page to see the changes.

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 Instant Site cover

Top menu 

Under Top Menu you can customize the appearance of the top bar of your Instant Site and choose what info you want to show in the header: phone number, business hours, location, social media links, etc.


To change the header and give it a more traditional look, enable the Show navigation option. The navigation includes links to the following sections of your one-page Instant Site: Store, About Us, Location, Contact Us:

Show navigation in Instant Site Top Menu

Preset design options for your store

You can change the appearance of your store and give it the look that best reflects your brand. Here is how to get to the design settings:

You can access the store design options in your Ecwid admin, go to WebsiteEditStore.

Store Design overview

Store Design options replicate the settings of the Design page in your Ecwid admin. 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 Instant 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.


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.

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. 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

Connecting your domain to Ecwid Instant Site
Customization options in Ecwid

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
27 out of 40 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline