Designing your Ecwid storefront
Your storefront is the heart of your online business—it's where customers explore and shop for your products. Storefront includes several essential elements: a product list displaying product cards, individual product pages, organized store categories, navigation tools to help customers browse with ease, shopping cart, etc.
Every element of your storefront is fully customizable. From fonts and colors to layouts and design, you can fine-tune every detail to match your brand's vision, giving your store a unique and tailored feel.
Changing Ecwid storefront design in Ecwid admin
On the Design page of your Ecwid admin, you’ll find built-in native settings that allow you to change how your storefront looks, including:
- How the product list looks: The size of the product cards, whether prices are shown or hidden, and more.
- How the product page looks: The layout of key elements like descriptions, images, the Buy button, navigation, and others. 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.
- How the category page looks: Choose where to display category names or hide them completely.
- How to adjust navigation: Hide or show elements like “Previous” and “Next” arrows to switch between products, breadcrumbs, product filters, and the store bottom navigation menu, including the “Sign in” link. To learn more about store navigation options, read our guide about Effective navigation in your Ecwid store →
The Design page in Ecwid admin
To adjust Ecwid storefront design:
- From your Ecwid admin, go to Design.
- Customize your storefront to your liking. The preview is shown on the right.
The changes are saved automatically and will apply to all your storefronts, whether you've added the storefront to your existing website or you’ve used Ecwid's native site builder — Instant Site.
Tweaking design of a Store section on Instant site
Ecwid storefront can be added on any website, including Instant Site, a free site builder from Ecwid. Since it's a native solution, you can customize certain aspects of your store pages, such as the storefront background color, fonts, button labels, colors, and other elements, directly from the Site Editor to match your chosen template theme.
Other key storefront settings, such as changes to the product page, product grid layout, storefront navigation, and more, are managed in the Ecwid admin. These settings will also apply to the storefront added as a Store section on Instant site.
Learn more about how to configure the store sections on Instant Site →
Tweaking Ecwid storefront design added on different sites (Wix, Wordpress, etc.)
You can seamlessly add your Ecwid store to any custom website or site builder, such as Wix, Wordpress, Squarespace, you name it.
The best part is that when you add an Ecwid storefront to a custom website, your store’s fonts and colors automatically adapt to match your website’s style, making it look like a natural part of your website. If you'd prefer to create a custom design and adjust the store fonts and colors manually, you can disable theme adaptation in Design → Storefront Navigation & Colors.
If you’re selling on WordPress or Wix, you can manage the storefront design directly through your site builder.
For WordPress users, follow these instructions →
For Wix users, follow these instructions →
With other sitebuilders, including how the Ecwid storefront looks when embedded into a website on any other platform, most of the design settings are managed through the Ecwid admin.
Customizing storefront checkout
Your Cart and checkout page is where customers enter their shipping and payment details to complete their order. It's a single page where your customers review items in their cart, enter their shipping and payment details, and leave order comments before placing orders.
On the Settings → Cart & Checkout page, you can further customize your store’s checkout experience and catalog settings. You can set the default product sort order, choose where and how the “Compare to” price is displayed, enable favorites so that customers can like items to save them for later, and more.
There are many ways to customize your page. For a more in-depth information, check out this article: Editing checkout form options in Ecwid →
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:
- To label products with deals, use Product ribbons and product subtitles →
- To create animated image, upload the .gif file as your prime product image, and it will appear on the storefront:
- Use banners on storefront to grab customers’ attention for hot deals, seasonal sales, social media promotions, or anything else.
- Make the products appear higher on your Instant site template, simply rearrange the sections.
- Explore the Ecwid App Market to find apps that can help you customize your store just the way you want.
Enhance your product pages by adding videos alongside images in the product gallery to showcase your product's details more effectively.