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.

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.

To show details on high-quality pictures, you can enable zooming product images on hover. To enlarge product pictures on hover, go to Design → Image Gallery thumbnails and check the Zoom main product image on hover box.

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.

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:

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 →

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:

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.

Adjusting navigation

On your store’s page, there are navigation options that create a better customer experience — “Previous” and “Next” arrows to switch between products, the “Sign in” link, sorting option, product filters, and breadcrumbs. 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