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.

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:

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 Design → Storefront 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:

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.

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.

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.

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:

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 →

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 bottom navigation 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 Design → Navigation.

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:
  

  

• 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