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

Table of contents

Adjusting Ecwid storefront design

You can seamlessly add your Ecwid store to any website or use it with the free Instant Site you get with every Ecwid account. The default storefront design fits any existing site.

To tweak the storefront's look and feel, you can use the built-in design options in the Design section of your Ecwid admin. Choose whatever size images, product card layout, category name position, and many more you want. Once you update the settings, they are immediately reflected on the store within your website.

If you sell on WordPress or Wix, you set up storefront design on the side of your site builder.
For WordPress users, follow these instructions
For Wix users, follow these instructions

What makes a storefront?

The storefront is the actual store where customers browse for products. When you add Ecwid ecommerce to your existing website, it’s the storefront that gets embedded. If you sell on Instant Site, the store is already added.

Here’s what makes your Ecwid storefront:

  • Product list with product cards on it
  • Product pages
  • Store categories
  • Navigation elements

Read on to learn how to tweak design for each of them on the Design page in your Ecwid admin, or watch a video on making style changes:

On the Settings → Cart & Checkout page, you can additionally customize your store’s checkout, set default product sort order, choose where and how “Compare to” price is displayed, enable favorites so that customers can like items in your store to keep them for future, and more.

Storefront design tips for different sites

Depending on the website where your Ecwid store is added, there is a number of additional tools you can use:

  • If you add an Ecwid storefront to a custom website, store colors automatically match your website style and look like a natural part of your website. In case you want to create a design theme yourself and adjust store colors manually, you can disable color adaptation in DesignStorefront navigation & colors.
  • If you sell on New-Gen Instant Site, the settings you make in the Design section are applied both to the storefront page (https://your-store.company.site/products) on your website and to the store sections on the front site page. You can additionally set up the appearance of the store and category blocks on the front site page in the Instant Site editor that is accessible from the Website page in your Ecwid admin. Learn how to configure the store sections on Instant Site
    Some settings are present both in the site editor and in the Design section. On the site’s main page, the ones you apply in the editor will be displayed.
  • If you sell on the original version of Instant Site, design settings are synced between the site editor and the Design section. You can set them wherever you like.

Designing product list and product cards

The product list is the grid on the category pages or on the front page of your Ecwid store. The list is made of individual product cards that contain an image and content to give your customers a brief overview of a product.

That’s how a product card on the product list looks:

Adjusting

You can adjust image size and aspect ratio, hide or display elements like price, SKU, or the “Buy Now” button, and more using Ecwid’s built-in design settings. For example, portrait image orientation is great for showing apparel, and large-size images are best for showcasing jewelry details, home decor elements, and so on.

The same image size and aspect ratio that you set for your product list are automatically applied to category images in your store.

To adjust product list and product card design:

  1. From your Ecwid admin, go to Design.
  2. In the Image size, Image aspect ratio, and Product Card details and layout sections, make the design changes you need.
  3. The changes are saved automatically.
Showing details on mouse hover won’t work for mobile customers since there is no mouse device on phones.

Setting up product page layout

The product page is a page of a particular product in your store with all its details. Customers can access product pages by clicking a product card in the list, or by direct link.

Adjusting

You can set the product page layout and determine whether or not to show subtitles, SKUs, social media buttons, and other information depending on your business needs.

You can also choose the layout for image thumbnails on product cards. For example, if you have a gallery of high-quality photos for your products, it’s better to show full-size images so customers can pay attention to all of them. Additionally, you can zoom in on the main product image on hover.

To adjust product page design:

  1. From your Ecwid admin, go to Design.
  2. In the Product Page layout, Image Gallery thumbnails, and Sidebar sections, make the design changes you need.
  3. The changes are saved automatically.
To add dropdown choices, custom text fields, file upload, and more to product pages, you can use options and input fields.

Setting up category name and image display

By default, all the products that you add to your Ecwid store appear in the default category that is featured on the main page of your store. If you create more root categories or subcategories to make it easier for customers to navigate your store, they are displayed as a list:

Adjusting

You can choose where to display category names or hide names or category images completely. As for the category image size and aspect ratio, they will be the same as that you set for your product list.

To set up category name and image display:

  1. From your Ecwid admin, go to Design.
  2. Scroll down to Category name position and choose your option.
  3. The changes are saved automatically.

In Design → Storefront navigation & colors → Category view, you can also expand root categories to display products they contain right on the store’s front page. For example, if you’re running a restaurant and want to showcase all the menu sections right away.

Learn more about expanding categories

You can rename the Featured Products section if you want to give it a custom heading to fit your tone of voice.

Adjusting navigation

Each Ecwid store has a number of navigation options that create a better customer experience — “Previous” and “Next” arrows to switch between products, breadcrumbs, sorting option, product filters, and the store footer menu, including the “Sign in” link.

It’s up to you to show or hide these elements. We recommend showing them to make it easier for buyers to purchase in your store. You can adjust the storefront navigation in Design → Storefront navigation & colors and in DesignNavigation.

To learn more about store navigation options, read our guide about Effective navigation in your Ecwid store

More ways to tweak your storefront design

Customizing your storefront is just a matter of your imagination and determination. For a more detailed setup of your store’s design, you can use additional tools:

  • Product ribbons and product subtitles — colored labels and short captions that make products stand out on a storefront.
  • Animated images — upload the .gif file as your prime product image, and it will appear on the storefront:

    gif

  • Banners on storefront — to get customers’ attention to your hot deals, seasonal sale, social media, or anything else, you can add a banner to your storefront. The banner can be added to the store front page or to any of the category pages.
  • Ecwid App Market — here you can find apps that can be used to customize your Ecwid site and store the way you want.
    Store Designer app can help you edit the colors for buttons, fonts, texts, and background without any coding required.
  • In-depth customization options like CSS codes, custom development, and Ecwid’s API.

Related articles:

Best practices for listing products on your store
Informing customers about promotions
Adding promo bars to Instant Site
Branding your Ecwid store

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
28 out of 91 found this helpful
10
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