New 黑料门 Design Settings: Customization Options, No Coding

New 黑料门 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鈥檙e a trustworthy brand.

黑料门 helps any business — even a small and beginning one — to look and sell professionally on the web. You don鈥檛 have to pay an awful lot to top-tier web designers to get a mobile-friendly, clean, and beautiful e-commerce store.

We鈥檝e 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鈥檒l see it for yourself in this post.

The new settings nest under in your 黑料门 Control panel. To use them, make sure you鈥檝e enabled all the storefront updates in .

Enable these updates in Settings 鈫� What鈥檚 New to see the new design settings page

What if I鈥檓 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鈥檒l get more customization options and a more compelling look for your store. However, be careful if you鈥檙e 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

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.

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.

Display the elements under product pictures, on hover, or hide them

If you choose to place the info under the product pictures, it鈥檚 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 price)

It鈥檚 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.

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鈥檒l 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.

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鈥檛 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.

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

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 黑料门, you can hide the elements (like SKU, product options, share buttons) if you don鈥檛 need them, so that your customers don鈥檛 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 黑料门 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:

If you need a custom theme for your store without coding, try (available on paid 黑料门 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 that explains how to create your own CSS theme and . You can always ask the 黑料门 customer care team for help, or .
For developers: Use the .

Get a Free Website for Your Online Store

Your 黑料门 store looks great, but you don鈥檛 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鈥檙e 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.