Theme Template Doris Bien User Guide

1. EC (EN).png


SHOPLINE proudly presents theme template Doris Bien, which can present a sleek design style and it is suitable for selling cosmetics, desserts, jewelry, select shop, wedding dress, etc. Especially for merchants who want to emphasize high-quality product images and stylish blog pages.

Doris Bien offers black and white background color choices in order to build up different styles for various types of business, as white is especially suitable for girls' cosmetics, desserts, jewelry, cultural and creative design, living, and wedding dress; black is for male sporting goods, trendy clothing, watches, etc. 

*Note: You cannot change the store layout if your store is using an official plan and only the “Social Commerce” plan. 


1. Customize the color of the store

In SHOPLINE Admin, go to [Online Store Design] > [Design], then click on the Doris Bien theme template.


A. Custom theme background color 

According to your branding style, we offer light and dark versions which present the entire site theme.


Dark Version
Below is a demo.


Light Version
Below is a demo.



B. Custom the color theme and text

Customization of colors, allow to change colors of all the buttons, highlighted info and underlines with 6-digit HEX color code. It is recommended to use a darker color in the light version and lighter color in the dark version.

HEX color code reference:




2. Let the customer focus on the outstanding design of product introduction in the product detail page

To present a high-quality image display on product detail page, product categories will not be shown. With a neat and simple design in the section of  Product Description, Additional Details, Shipping & Payments, to enhance the readability. Here are four brief introductions:

  • Add to cart section
  • Product Description
  • Additional Details
  • Shipping & Payments 


A. Add to cart section

Line decoration makes the interface elegant and simple.

B. Product Description section

With a large width of site, it is suggested description text can align in the center.


C. Additional Details section

You can place full-width images in additional details to increase information completeness.


D. Shipping & Payments section

Delivery and Payment options are divided into two columns which give a better view to read.



3. Banner size suggestion

Try this compressed image tool! It will help your website faster!

A. Advanced page

You can use a full-screen banner for home page, 1920 x 850px is recommended. 

If you want your product to be displayed on the first screen, by using 1920x640px, the screen will be only occupied three-quarters and the products will be shown at the bottom.


B. Product listing page

At this page, a full-width banner creates the impact of the whole collection. The banner height within 640px is recommended so that customers can see the first row of products when they land.

Below is an example of featuring a full-width banner, which is suitable for boutique type products.



4. Experience a better and more lively blog layout.

Doris Bien presents a brand new layout of the blog page. With the auto stacking feature and infinite scrolling, the responsive layout is adjusted by the height of the first image in your article. It is designed to display an impressive stunning appearance with the Doris Bien blog page.

The above is a special introduction to Doris Bien, try it out now!






Have more questions? Submit a request