Designing your Ecwid storefront on a custom website
This article is for merchants who have added their Ecwid online store to a custom website.
If you’re selling on Ecwid Instant Site, you design your storefront in your Instant Site Editor →
If you’re selling on WordPress, you design your storefront in your WordPress Dashboard →
If you’re selling on Wix, you design your storefront in your Wix Website Editor →
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, etc.
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.
Changing storefront design in your 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 websites where you've added your storefront.
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.
- 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.