Everything you need to sell online

Set up an online store in minutes to sell on a website, social media, or marketplaces.

New Ecwid Design Settings: Dozens of Customization Options, No Coding

New Ecwid Design Settings: Dozens of Customization Options, No Coding

12 min read

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.

What's new section in Ecwid control panel

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. However, 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.

How to sell online
Tips from e-commerce experts for small business owners and aspiring entrepreneurs.
Please enter a valid email address

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

By default, product images are medium-sized, which is suitable for most stores.

Some products have important details that you might want to visualize (for example, 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 (say, 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.

Product pictures design in Ecwid

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, shoes, sofas, or nutrition bars.

For round objects (or, when in doubt), use square images, they always look great.

 Vertical, horizontal, and square product pictures

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, titles, prices, SKUs, “Buy” buttons. Decide how to display each of them — under the product image or on mouse hover.

Design of product pictures in Ecwid

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, right, center, or justify it  you are free to create the look that you like the most.

Different layouts of the elements (product name and priceDifferent layouts of the elements

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

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, icons, or brand logos for your category pictures, Ecwid has design options to make them look stunning.

Design of product category pictures

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.

Product page optimization

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.

Product page optimization 2

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. Say, if you sell tiny aquarium fish.

Product page optimization 3

The “Add to bag” button in focus

Minimize scrolling and distraction.three-column layout works if you want your product page to display maximum information without extra moves.

Product page optimization 4

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, the better.

Photo gallery layout options

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

Product page optimization 5

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, name, 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:

  1. 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).
  2. 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, or order the custom development of your own CSS theme.
  3. For developers: Use the 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, logo, online store, “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? Well, 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 step-by-step guide.


 

Table of contents

Sell online

With Ecwid Ecommerce, you can easily sell anywhere, to anyone — across the internet and around the world.

Ecommerce that has your back

So simple to use – even my most technophobic clients can manage. Easy to install, quick to set up. Light years ahead of other shop plugins.
I’m so impressed I’ve recommended it to my website clients and am now using it for my own store along with four others for which I webmaster. Beautiful coding, excellent top-notch support, great documentation, fantastic how-to videos. Thank you so much Ecwid, you rock!
I’ve used Ecwid and I love the platform itself. Everything is so simplified it’s insane. I love how you have different options to choose shipping carriers, to be able to put in so many different variants. It’s a pretty open e-commerce gateway.
Easy to use, affordable (and a free option if starting off). Looks professional, many templates to select from. The App is my favorite feature as I can manage my store right from my phone. Highly recommended 👌👍
I like that Ecwid was easy to start and to use. Even for a person like me, without any technical background. Very well written help articles. And the support team is the best for my opinion.
For everything it has to offer, ECWID is incredibly easy to set up. Highly recommend! I did a lot of research and tried about 3 other competitors. Just try ECWID and you'll be online in no time.

Your ecommerce dreams start here

By clicking “Accept All Cookies”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Your Privacy

When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer. More information

More information

Strictly Necessary Cookies (Always active)
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
Functional Cookies
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third-party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
Performance Cookies
These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.