ºÚÁÏÃÅ

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. ´¡Ìýconsistent, modern design can tell customers that you’re aÌýtrustworthy brand.

ºÚÁÏÃÅ 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ÌýºÚÁÏÃÅ, 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 inÌýyour ºÚÁÏÃÅ Control panel. ToÌýuse them, make sure you’ve enabled all theÌýstorefront updates inÌý.

What ifÌýI’m using theÌýolder version ofÌýºÚÁÏÃÅ 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.

Design Your Online Storefront

You control theÌýentire look ofÌýyour product catalog, from product pictures toÌýSKUs ²¹²Ô»åÌý²ú³Ü³Ù³Ù´Ç²Ô²õ.

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.

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.

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.

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.

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. ºÚÁÏÃÅ will show theÌýfirst image from theÌýproduct photo gallery 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, ºÚÁÏÃÅ has design options toÌýmake them look stunning.

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.

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.

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.

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

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.

3.ÌýSelect theÌýproduct info toÌýdisplay inÌýtheÌýsidebar

´¡Ìýconverting product page provides enough product information while keeping itÌýsimple. InÌýºÚÁÏÃÅ, 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.

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ÌýºÚÁÏÃÅ 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 ºÚÁÏÃÅ 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 (available onÌýpaid ºÚÁÏÃÅ 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Ìý that explains how toÌýcreate your own CSS theme andÌý. You can always ask theÌýºÚÁÏÃÅ customer care team forÌýhelp, orÌý.
3. For developers: Use theÌý.

Get aÌýFree Website forÌýYour Online Store

Your ºÚÁÏÃÅ store looks great, but you don’t have aÌýwebsite toÌýsell on?

Instant Site isÌýaÌýfree website builder that ºÚÁÏÃÅ provides when you create your ºÚÁÏÃÅ 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ÌýºÚÁÏÃÅ Mobile store management app forÌýiOS.

using our step-by-step guide.

• Inspiring ºÚÁÏÃÅ Instant Site Examples
• ºÚÁÏÃÅ Instant Site With Ready Themes andÌý99+ Design Options
• New ºÚÁÏÃÅ Design Settings: Dozens ofÌýCustomization Options, NoÌýCoding
• How toÌýChoose anÌýEcommerce Template forÌýYour Site
• ´¡ÌýComprehensive Guide toÌýCustomizing Your ºÚÁÏÃÅ Store Design
• Designing Your Free Ecommerce Website From Scratch
• How ºÚÁÏÃÅ’s Accessible Online Store Template Became aÌýHit