Design speaks volumes for an e-commerce store. If people can easily navigate your online storefront, you have a much better chance of converting them. A consistent, modern design can tell customers that you’re a trustworthy brand.
Ecwid helps any business — even a small and beginning one — to look and sell professionally on the web. You don’t have to pay an awful lot to top-tier web designers to get a mobile-friendly, clean, and beautiful e-commerce store.
We’ve added dozens of new storefront design functionalities to Ecwid, so that you can give your e-commerce store the look and feel that reflects your brand the most.
Setting up every little detail in your online store design is dead easy. Change image styles, product page layouts, and storefront elements without coding. You’ll see it for yourself in this post.
The new settings nest under Settings → Design in your Ecwid Control panel. To use them, make sure you’ve enabled all the storefront updates in Settings → What’s New.
Enable these updates in Settings → What’s New to see the new design settings page
What if I’m using the older version of Ecwid storefront?
Switching to the new storefront may change the look of your store completely. With the new design settings, you’ll get more customization options and a more compelling look for your store. i alla fall, be careful if you’re using a self-made CSS theme or other custom-developed storefront features — they may not be compatible with the new storefront. If you need help, our support team is there for you.
Design Your Online Storefront
You control the entire look of your product catalog, from product pictures to SKUs and buttons.
1. Сhoose the best image size to showcase your products
Som standard, product images are medium-sized, which is suitable for most stores.
Some products have important details that you might want to visualize (till exempel, if you sell jewelry or paintings). Select the large image size to let your customers admire your beautiful products and photography.
If you sell one product type in a large assortment (säga, 200 leather belts in different colors), stick to smaller images. Your store will display a lot of products on the screen and your customers will be impressed by the choice.
Small, medium, and large image size for product pictures
2. Optimize image aspect ratio to your product dimensions
Do you sell palms? Or maybe long-legged models showcase your designer coats? Both will look great in vertical pictures.
The horizontal ratio suits wide products — say, skor, sofas, or nutrition bars.
For round objects (eller, when in doubt), use square images, they always look great.
Vertical, horizontal, and square images
If you want to emphasize product images and make them stand out from the store background, select “Darken image background”.
3. Choose what product info to show in the storefront
Similar to product photos, you can choose from many design options for other storefront elements: product names, titlar, priser, SKUs, “Buy” buttons. Decide how to display each of them — under the product image or on mouse hover.
Display the elements under product pictures, on hover, or hide them
If you choose to place the info under the product pictures, it’s possible to set the layout. Align your content to the left, höger, center, or justify it — you are free to create the look that you like the most.
Different layouts of the elements (product name and price)
It’s also possible to hide elements. Hide all of them to make your storefront resemble a lookbook. By clicking any of the product pictures, your customers will go to the product page.
Choose to display an additional product image if you want to show more details. Ecwid will show the first image from the product photo gallery on mouse hover.
Additional product image on mouse hover
These new settings make for a great number of design variations for your storefront look.
4. Design your store categories
You’ll find options to set up the look of your categories. Whether you have photos, ikoner, or brand logos for your category pictures, Ecwid has design options to make them look stunning.
Category names under pictures, on them, on hover, and hidden
Optimize Product Pages for Conversion
Now you can organize the information of your product pages in different ways, depending on what works best for your customers. Each design option is made according to the best e-commerce practices for increasing conversions.
1. Choose the product page layout
There are four new options for organizing content on your product pages.
Attract attention to your product pictures. Placing a high-quality product image on the left side of your product page will make it the first thing your customers will notice. Use the 2-column layout with the product description on the right if you sell visually appealing products and have short product descriptions.
The 2-column layout with the product description on the right
Add detailed product descriptions. For products like electronics or pharmaceutical goods, product descriptions can be pretty long. Then select the two-column layout with the product description below the image. Even if you add a long manual for using your product, the page will look harmonious.
The 2-column layout with the product description below the image
Emphasize product options and the “Checkout” button. If your customers don’t have to read long descriptions or scrutinize the gallery to buy your products, choose to show the product options with the checkout button on the left. Säga, if you sell tiny aquarium fish.
The “Add to bag” button in focus
Minimize scrolling and distraction. A three-column layout works if you want your product page to display maximum information without extra moves.
The compact 3-column layout
You can also select the layout of your photo gallery. Help your customers get the feel of your product with a compelling photo gallery. Choose the layout for thumbnails of images in your gallery (vertical or horizontal) or show your hypnotizing images in full size. The more alternated and detailed views you show, desto bättre.
Photo gallery layout options
3. Select the product info to display in the sidebar
A converting product page provides enough product information while keeping it simple. I Ecwid, you can hide the elements (like SKU, product options, share buttons) if you don’t need them, so that your customers don’t get distracted on their way to cart.
The best part is that you can drag each element and organize them in any order. Test lots of new ways to optimize your product pages for conversions.
Flexible sidebar settings
Change Your Storefront Navigation & Colors
There are a few more storefront settings, which are enabled by default to help your customers navigate your store. You can turn any of them off whenever you like.
If you switch from the older storefront version, these settings will migrate to the new storefront as you had them before.
Color Adaptive Mode. If you install an Ecwid online store on your website, the store colors will automatically match your website theme. Your store will look like a natural part of your website.
The footer menu and breadcrumbs help customers to browse your store faster and prevent them from getting lost.
The sign-in link enables customers to sign in to their profile to view their orders and use the wishlist.
“Sort by” options allow your customers to sort your products by price, namn, and other conditions.
Other Ways to Change Your Ecwid Store Design
The new design settings cover the most common use cases. If you would like to change your store in other ways:
- If you need a custom theme for your store without coding, try design apps from the Ecwid App Market (available on paid Ecwid plans, app prices apply).
- Create a custom CSS theme (a set of rules that determines the look of every element in the store, like the size, shape, or color). Creating a CSS theme requires certain tech knowledge. There is a guide to CSS themes in the Ecwid Knowledge Base that explains how to create your own CSS theme and instructions for changing specific elements. You can always ask the Ecwid customer care team for help, eller order the custom development of your own CSS theme.
- For developers: Använd Ecwid Javascript API to extend Ecwid storefront features. You can build a new CSS theme or an app, and sell it on the Ecwid App Market. The Ecwid Javascript API allows you to change the storefront look completely, bringing changes as deep as you need. If you are ready to start, please register on our page for developers.
Get a Free Website for Your Online Store
Your Ecwid store looks great, but you don’t have a website to sell on?
Instant Site is a free website builder that Ecwid provides when you create your Ecwid account. This is done to let you quickly start selling online on a neat web page and make profits right away to grow your business.
Speaking of design, Instant Site is built with ready-made blocks (the cover image, logotyp, webbutik, “About Us” section, customer feedback, and contacts) that you can enable, disable, and customize.
If you need to customize your Instant Site, who’re you gonna call? Väl, no one! You can edit the entire website without special knowledge, using your desktop computer or even via the Ecwid Mobile store management app for iOS.
Build your free Instant Site today using our steg-för-steg guide.
- Inspirerande Ecwid Instant Site Exempel
- Ecwid Instant Site med färdiga teman och 99+ Designalternativ
- Nya Ecwid-designinställningar: Dussintals anpassningsalternativ, Ingen kodning
- Hur man väljer en e-handelsmall för din webbplats
- En omfattande guide för att anpassa din Ecwid-butiksdesign
- Designa din gratis e-handelswebbplats från grunden
- How Ecwid’s Accessible Online Store Template Became a Hit