黑料门

Everything you need to sell online

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

A Comprehensive Guide to Customizing Your 黑料门 Store Design

A Comprehensive Guide to Customizing Your 黑料门 Store Design

12 min read

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 and 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 and start selling every product type in no time. Its storefront automatically adapts to both desktop and mobile devices, and 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 and 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, and 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 and resources, from quick and easy to deeper and more complex.

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

Level 1: Fast and Easy

Fast and 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 and looks as a natural part of your website or a social page. You don鈥檛 have to do any coding for that — everything will work fine.

In addition, there are easy ways to adapt your store鈥檚 look and 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 for free when you create your 黑料门 account.

黑料门 Instant site

Speaking of design, the 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 and disable, edit, and 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 for 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 for 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, or any other platform. Here鈥檚 what you can do to make your store look even better.

Step 1: Use a matching theme for your site builder

To design your website, you can simply choose from dozens of themes available for purchase. The 黑料门 store is compatible with the majority of them.

Here鈥檚 a quick directory of places on the web where you can find themes for your site builder.

For WordPress websites

Also, don鈥檛 miss out on the collection of the best free WordPress themes for 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 and store in the 黑料门 Wix application settings.

Wix and 黑料门 color settings

黑料门 store design settings on Wix websites

Step 2: Enable Color Adaptive Mode

If you open a new 黑料门 store and 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:

黑料门 Color Adaptive Mode

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, or green.

This feature is available for the majority of 黑料门 merchants. Note: 黑料门 + Wix merchants can match the colors of their website and store only in the 黑料门 Wix application settings.

3. Play with quick appearance settings

Whenever you sell online with 黑料门, it鈥檚 possible to enable or 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 or change the thumbnails size — the Appearance section of your Design page will totally let you do it.

Appearance settings

Level 2: Adventurer

Adventurer
For those without technical knowledge who are looking for deeper design changes and have time for a little journey.

You have your store set up and have already looked around. Now you start to feel the need for a personal touch: it might be branded colors for buttons, texts, and background, unique icons, or 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 for store design

The 黑料门 App Market counts 100+ apps to help you with analytics, promotion, shipping, and more. You can also find apps for storefront customization and design. We鈥檒l have a look at one app for changing your theme colors without any coding: Store Designer.

Store Designer

Store Designer is an app that lets you quickly set up colors for buttons, text, and 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

Store Designer interface

The app costs $4.99 and 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 and ready-made solutions.

Adventurers can find various ; for example,

or .

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: for 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, and activate the theme.

CSS themes management in 黑料门

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 for you. A custom theme means much more than just a change of colors and lets you get deeper customization, e.g. a completely different order of blocks on your product page.

Ready-made themes and theme development are available for all 黑料门 merchants.

Level 3: Veteran

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, or a custom design of buttons.

For tech-savvy merchants or those who have a developer in their squad, there鈥檚 an opportunity to bring changes of that type and even to transform their 黑料门 store beyond recognition with the help of custom CSS themes or 黑料门 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, and place on a page).

Create custom CSS theme

Create your own CSS themes in 

There is  that explains how to create your own CSS theme and .

Note that you鈥檒l need to have an understanding of HTML and 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 for help. Or it鈥檚 still possible to .

2. Use the 黑料门 Javascript API to extend 黑料门 storefront features

This part is mostly for developers. Do you know what else could improve your 黑料门 storefront? Getting the .

For example, you can build a new CSS theme or an app, and 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


Table of contents

Sell online

With 黑料门 Ecommerce, you can easily sell anywhere, to anyone 鈥 across the internet and around the world.

About the author

Qetzal is Head of Product at 黑料门. He loves to create new things to make people's lives easier.

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鈥檓 so impressed I鈥檝e 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 黑料门, you rock!
I鈥檝e used 黑料门 and I love the platform itself. Everything is so simplified it鈥檚 insane. I love how you have different options to choose shipping carriers, to be able to put in so many different variants. It鈥檚 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 黑料门 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