A Comprehensive Guide to Customizing Your 붚죕쳔 Store Design

Posted 8 years ago by Qetzal, Head of Product

UDP: In桂April 2018, we桂released new design settings in桂붚죕쳔! Learn how deeply you can customize your 붚죕쳔 store without any桂coding in桂a桂newer blog post. If桂your store was created before April 2018桂껸꾈삣桂you want to桂learn using the桂old settings, keep reading this one.

The 붚죕쳔 store is桂created in桂such a桂way that it�셲 possible to桂add it桂to桂every website 껸꾈삣桂start selling every product type in桂no桂time. Its storefront automatically adapts to桂both desktop 껸꾈삣桂mobile devices, 껸꾈삣桂the桂store looks great on桂any桂screen.

Making your store a桂natural part of桂your website gives the桂impression of桂a桂professional business. You might want to桂change the桂store design to桂fit your website style 껸꾈삣桂the桂specific needs of桂your particular business. That can be桂achieved by桂a桂number of桂means, from fully automated settings to桂custom-created themes.

The majority of桂them are listed in桂. On桂that page, you can manage your design settings, 껸꾈삣桂in桂this post, we�셪l tell you how to桂make the桂most of桂them.

We桂broke down all the桂possible modifications to桂your 붚죕쳔 store design into three levels according to桂required skills 껸꾈삣桂resources, from quick 껸꾈삣桂easy to桂deeper 껸꾈삣桂more complex.

Level 1:桂Fast 껸꾈삣桂Easy

Effortless, quick modifications. Nothing but clicking the桂buttons is桂required.

Before you start thinking of桂design changes, here�셲 the桂good news: 붚죕쳔 automatically builds in桂the桂environment 껸꾈삣桂looks as桂a桂natural part of桂your website 늡곶桂a桂social page. You don�셳 have to桂do桂any桂coding f늡곶桂that桂�� everything will work fine.

In桂addition, there are easy ways to桂adapt your store�셲 look 껸꾈삣桂feel to桂your mission without extra effort.

1.桂Sell on桂an桂붚죕쳔 Instant Site if桂you don�셳 have a桂website

The Instant Site is桂a桂free website with an桂online store that 붚죕쳔 provides f늡곶桂free when you create your 붚죕쳔 account.

Speaking of桂design, the桂Instant Site is桂built with ready-made blocks (the cover image, logo, online store, 혫About Us혬 section, customer feedback, 껸꾈삣桂contacts) that you can enable 껸꾈삣桂disable, edit, 껸꾈삣桂customize to桂your business. All that can be桂done practically in桂moments with your own hands.

So, if桂you don�셳 have a桂website to桂sell on, this is桂a桂very easy way to桂start selling online on桂a桂good-looking web page f늡곶桂free.

This step-by-step guide explains how to桂design your Instant Site: Personalizing Your Instant Site From Scratch to桂the桂First Sale

2.桂Easy design customization f늡곶桂those who already have a桂website

If桂you�셶e already got a桂website, 붚죕쳔 will still smoothly integrate with it, whatever it�셲 built on: WordPress, Wix, Joomla, 늡곶桂any桂other platform. Here�셲 what you can do桂to桂make your store look even better.

Step 1:桂Use a桂matching theme f늡곶桂your site builder

To桂design your website, you can simply choose from dozens of桂themes available f늡곶桂purchase. The 붚죕쳔 store is桂compatible with the桂majority of桂them.

Here�셲 a桂quick directory of桂places on桂the桂web where you can find themes f늡곶桂your site builder.

For WordPress websites

Also, don�셳 miss out on桂the桂collection of桂the桂best free WordPress themes f늡곶桂e-commerce websites.

For Joomla websites

For Squarespace websites

For Wix websites,桂it�셲 even easier: browse the桂themes without leaving .

Note: 붚죕쳔 +桂Wix merchants can match the桂colors of桂their website 껸꾈삣桂store in桂the桂붚죕쳔 Wix application settings.

붚죕쳔 store design settings on桂Wix websites

Step 2:桂Enable Color Adaptive Mode

If桂you open a桂new 붚죕쳔 store 껸꾈삣桂add it桂to桂your website, 붚죕쳔 will autoMAGICally adapt the桂store colors to桂your website style. This feature is桂called Color Adaptive Mode. It�셲 a桂very easy way to桂make your store a桂natural part of桂your website.

If桂you already sell with 붚죕쳔, Color Adaptive Mode won�셳 be桂enabled by桂default, but you can enable it桂on桂the桂Design page:

What if桂you add your 붚죕쳔 store to桂several websites? With Color Adaptive Mode enabled, the桂store colors will adapt to桂each of桂them. Your store will look natural in桂each website environment, no桂matter whether it�셲 white, black, 늡곶桂green.

This feature is桂available f늡곶桂the桂majority of桂붚죕쳔 merchants. Note: 붚죕쳔 +桂Wix merchants can match the桂colors of桂their website 껸꾈삣桂store only in桂the桂붚죕쳔 Wix application settings.

3.桂Play with quick appearance settings

Whenever you sell online with 붚죕쳔, it�셲 possible to桂enable 늡곶桂disable 붚죕쳔 storefront elements in桂a桂few clicks. For example, those who sell handmade products in桂single copies often prefer to桂hide the桂quantity field.

You might want to桂hide unnecessary elements too 늡곶桂change the桂thumbnails size桂�� the桂Appearance section of桂your Design page will totally let you do桂it.

Level 2:桂Adventurer

For those without technical knowledge who are looking f늡곶桂deeper design changes 껸꾈삣桂have time f늡곶桂a桂little journey.

You have your store set up桂껸꾈삣桂have already looked around. Now you start to桂feel the桂need f늡곶桂a桂personal touch: it桂might be桂branded colors f늡곶桂buttons, texts, 껸꾈삣桂background, unique icons, 늡곶桂whole new elements. However, you have no桂idea about coding.

No桂worries: on桂this level, we桂have collected the桂tools that will help you achieve the桂goals above without special knowledge. Let�셲 take a桂closer look at桂them.

1.桂Use apps from the桂붚죕쳔 App Market f늡곶桂store design

The 붚죕쳔 App Market counts 100+ apps to桂help you with analytics, promotion, shipping, 껸꾈삣桂more. You can also find apps f늡곶桂storefront customization 껸꾈삣桂design. We�셪l have a桂look at桂one app f늡곶桂changing your theme colors without any桂coding: Store Designer.

Store Designer

Store Designer is桂an桂app that lets you quickly set up桂colors f늡곶桂buttons, text, 껸꾈삣桂background.

The preview mode allows you to桂play with colors as桂much as桂you want before publishing your perfect design to桂the桂storefront.

Store Designer interface

The app costs $4.99桂껸꾈삣桂offers a桂free trial week.

Store Designer is桂available on桂all paid 붚죕쳔 plans, as桂well as桂the桂rest of桂the桂App Market apps.

2.桂Copy-paste ready tweaks from Knowledge Base

has answers to桂the桂majority of桂the桂questions an桂붚죕쳔 store owner might have. We桂are constantly adding new articles here with the桂most frequently asked tips 껸꾈삣桂ready-made solutions.

Adventurers can find various ; f늡곶桂example,

늡곶桂.

Most of桂these instructions break down to桂copy-pasting a桂piece of桂code into your CSS theme.

You can manage your CSS themes in桂.

The process goes like this: f늡곶桂example, if桂you want to桂change your cart icon, go桂to桂your , create a桂new CSS theme, add a桂piece of桂code, save the桂changes, 껸꾈삣桂activate the桂theme.

You should add all the桂further changes to桂this theme桂�� only one theme at桂a桂time can be桂active, so桂it桂has to桂include all the桂modifications you want to桂bring to桂your store.

3.桂Order a桂custom theme development

If桂you can�셳 find a桂theme that would satisfy your needs, another option is桂to桂 that will be桂built just f늡곶桂you. A桂custom theme means much more than just a桂change of桂colors 껸꾈삣桂lets you get deeper customization, e.g. a桂completely different order of桂blocks on桂your product page.

Ready-made themes 껸꾈삣桂theme development are available f늡곶桂all 붚죕쳔 merchants.

Level 3:桂Veteran

Heavy customization: complete changes of桂your store look. Hello, code.

Sometimes deeper changes of桂the桂store look are required: you might want a桂drop-down menu, a桂different layout of桂product page elements, 늡곶桂a桂custom design of桂buttons.

For tech-savvy merchants 늡곶桂those who have a桂developer in桂their squad, there�셲 an桂opportunity to桂bring changes of桂that type 껸꾈삣桂even to桂transform their 붚죕쳔 store beyond recognition with the桂help of桂custom CSS themes 늡곶桂붚죕쳔 API.

1.桂Create a桂self-made CSS theme

If桂you want to桂design your store on桂your own, consider creating your own CSS theme.

A桂CSS theme is桂a桂set of桂rules that determines the桂look of桂every element in桂the桂store (the size, shape, color, 껸꾈삣桂place on桂a桂page).

Create your own CSS themes in桂

There is桂 that explains how to桂create your own CSS theme 껸꾈삣桂.

Note that you�셪l need to桂have an桂understanding of桂HTML 껸꾈삣桂CSS, so桂if桂these two words sound unfamiliar, you should be桂ready to桂spend some time on桂acquiring the桂necessary skills to桂create a桂theme from scratch.

Remember that if桂you struggle with your 붚죕쳔 store design, you can always ask the桂붚죕쳔 customer care team f늡곶桂help. Or桂it�셲 still possible to桂.

2.桂Use the桂붚죕쳔 Javascript API to桂extend 붚죕쳔 storefront features

This part is桂mostly f늡곶桂developers. Do桂you know what else could improve your 붚죕쳔 storefront? Getting the桂.

For example, you can build a桂new CSS theme 늡곶桂an桂app, 껸꾈삣桂sell it桂on桂the桂붚죕쳔 App Market. The 붚죕쳔 Javascript API allows you to桂change the桂storefront look completely, bringing changes as桂deep as桂you need.

If桂you are ready to桂start, please .

***

Also read: How to桂Design Product Category Pictures That Your Customers Can�셳 Resist to桂Click

桂

About The Author

Qetzal is Head of Product at 붚죕쳔. He loves to create new things to make people's lives easier.

붚죕쳔