Configuring Instant Site design

You can use a responsive one-page 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 themes and appearance options in Ecwid control panel → WebsiteEdit. Proficient users with coding skills can dive into CSS modifications to create a unique look of the store.

Order of sections

Instant Site consists of one page with 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 Ecwid control panel → Website, click Edit and then click Arrange sections:

Screen_Capture_on_2019-10-11_at_21-51-23.gif

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

You can choose one of 30 themes for your store cover image. To do that, go to Ecwid control panel → Website → click Edit → Themes. Choose the theme that fits your business best:

Choose_a_design_theme_for_instant_site.png

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 for your store that will display on your storefront pages and will be used for a favicon. The 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. Go to Ecwid Control Panel → 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.

    Upload_store_logo.png
You can also upload a logo for invoices. It will appear in your order notifications, as well.
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 Instant Site cover

Top menu 

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

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

Phone in Top Menu of Instant Site cover

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

Social Media in Top Menu of Instant 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 Instant Site):

Location in Instant 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 Instant Site: store, About Us, Location, Contact Us:

Show navigation in Instant 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 Instant 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. Here is how to get to the design settings:

You can access the store design options in Ecwid control panel → WebsiteEditStore.

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

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!

Sorry about that! We are here to assist you by email or chat.

Contact support