User Guide of Theme Doris Bien

All-Plan.jpg

blobid0.jpg

SHOPLINE proudly presents the new theme - 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 page.

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

 

 

A. Customize the color of the store according to branding 

1. Custom theme background color 

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

location: Admin panel > Shop Design > Design > Storefront Template > 
Theme setting of Doris Bien

_____2019-07-26___7.04.14.png
Dark Version
Below is a demo.
dark_home_copy.png

Light Version
Below is a demo.

light_home_w.png

 

2. Custom the color of theme and text

_____2019-08-01___4.54.06___2.15.03.png
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: https://htmlcolorcodes.com/

blobid4.png

 

 

B. 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 

 

1.Add to cart section

Line decoration makes the interface elegant and simple.
Hubble_Eye_Contact.png

2.Product Description section

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

 

3.Additional Details section

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

 

4.Shipping & Payments section

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

 

 

C. Banner size suggestion

Try this compressed image tool! It will help your website faster!
https://tinypng.com/

1.Advanced page

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

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.
Artboard.png

 

2.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.
Sales_No_Product.png

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

 

 

D. 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 Doris Bien blog page.


light_Blog_list_page_3.png
The above is a special introduction of Doris Bien, try it out now!

 

 

 

 

 

Have more questions? Submit a request

Comments