Adjusting Ecwid storefront design

You can control your store look and feel via the Design section in your Ecwid admin. Choose whatever size images, product card layout, category name position, and many more you want. Once you update the settings, this would be immediately reflected on the store within your website.

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

Designing product card

A product card contains an image and content to give your customers a brief overview of a product.

Image

To customize the size of an image, go to Design → Image size. Bigger images are best for showing details. Choose the large size for images to showcase jewelry, home decor, and so on.

Landscape orientation can be customized in Design → Image aspect ratio. You can choose the orientation that is best for your products. For example, portrait orientation is great for showing apparel.

To show two product images in the product card, go to Design → Product Card details and layout → Additional product image and select Show on mouse hover.

Content

You can display product details on the card, show details on mouse hover (note that it won’t work for mobile customers since there is no mouse device on phones), or hide them. Decide on what to display in Design → Product Card details and layout:

Adjusting_storefront_design__1_.png

If you sell on an Instant Site, all settings you make in the Design section will be applied both on your store page (https://YOUR-STORE.company.site/products) and on the Featured products block on the main page. For the Featured products block, you can go with in-depth customization in your Instant Site editor.

Setting up product page layout

You can decide how you want product pages to look by choosing the layout for them. In the Design → Sidebar, you can determine whether or not to show subtitles, SKU, social media buttons, and other information.

The way of displaying information on a page can be adjusted in Design → Product Page layout.

You can also choose the layout for image thumbnails in Design → Image Gallery thumbnails. If you uploaded 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.

Highlighting product on storefront

You can add product ribbons to any item in your catalog to make it stand out on a storefront. Ribbons are colored horizontal labels displayed on product listing’s thumbnails and product details pages.

Learn about how to add ribbons to products →

Adjusting_storefront_design__2_.png

You can also upload a gif as a product image instead of a regular static photo. That way, the gif animation will catch the eye of your store visitors.

To add an animated image, upload the .gif file as your prime product image, and it will appear on the storefront:

gif_animation.gif

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

Learn how to add a banner or welcome texts to your store →

Adding featured products

You can highlight particular products by showing them on your storefront in the Featured Products section. That way, you increase the chances of selling products you featured.

Follow instructions to add featured products to the store homepage →

You can also rename the section and give a custom heading to the Featured Products section →

Displaying categories

You can group products into categories to make it easier for customers to navigate in your store. You can collapse categories to show only their names or expand root categories to display products that categories contain. To choose how to display categories, go to Design → Category view.

Learn more about expanding categories →

The way of displaying the category name can be adjusted in the Design → Category name position. You can also hide the category thumbnail image by choosing Hide category images.

If you sell on Instant Site, all settings you make in the Design section will be applied both on your store page (https://YOUR-STORE.company.site/products) and on the main page. You can completely change the category appearance on the main page in the Instant Site editor. Previous settings for categories made in the Design section will be overwritten but only on the main page.

Adjusting navigation

On your store’s page, there are navigation options that create a better customer experience — “Sign in” link, product filters, sorting option, breadcrumbs, and so on. It’s up to you to show or hide them. We recommend showing them to make it easier for buyers to purchase in your store.

The storefront navigation can be adjusted in Design → Storefront navigation & colors.

To learn more about navigation, read our guide about how navigation can improve your store →

Other ways for depth-in design customization

For a more detailed setup of your store’s design, you can use additional tools:

  • Ecwid App Market — where you can find apps that can be used to customize your Ecwid store the way you want.
  • CSS codes — an easy way to adjust the look and feel of your store by using Cascading Style Sheets (CSS). You can do it yourself even if you have no coding skills.
    Ecwid CSS Cookbook →
    How to add CSS codes to your store →
  • Custom development — solution for creating the exact feature you have in mind. You can contact the Ecwid development team to help you create design options that Ecwid does not have out of the box. Or you can hire a third-party development team for it.

Related articles:

Ecwid customization options
Best practices for listing products on your store
Configuring design and content for New-gen Instant Site

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
92 out of 245 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