User Guide of Theme Kingsman

Artboard_Copy_6.png

Kingsman is a theme which can present an elegant website style and it is suitable for merchants who want to emphasize product image with quality details. It is suitable for apparel, furniture, jewelry, 3C products, etc.

Advanced-Plan.jpg

 

A. It is available to customize 2 typefaces and 3 branding colors

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

1. Custom theme color #1 background color and text color

_____2019-06-19___1.29.07.png

Background Color: Apply to header menu, footer, menu panel of mobile, background color of all buttons.  (Dark colour is recommended for better readability)

Text Color: Apply to all text displays above custom theme color #1 background color, e.g. text of menu, buttons.

Header menu and checkout button: their background color is set to green, and text color is set to white.

home_en.png

Footer

_____2019-05-22___7.12.17.png

The last section of footer will apply to fill with custom theme color #1 background color.

 Please update to new shop footer,
then you can customize the information at the footer of your website.
location:
Admin panel > Navigation & Pages > Menu Navigation > Edit Shop Footer

Reminder: The background color will not display at edit mode, please click preview button or save to storefront to see it. Remember to set text color to match background color.

_____2019-06-19___1.46.40.png

 

2. Custom theme color #2

Apply to price and icons, buttons above white-background.

_____2019-06-19___1.55.03.pnge.g. Price and quantity buttons of products

PDP_en.png

 

3. Color matching suggestion

If you want to create a elegant style website, apply low saturation color like Giorgio Morandi series color to theme color #1 background color & #2, then apply white to text color is recommended.

_____2019-05-22___7.35.41.png

Or use black to create a impressive website style.

_____2019-05-22___7.44.29.png

 

4. Typefaces suggestion

_____2019-06-19___2.20.23.png

Open Sans is suitable for modern and trendy styles. Noto Serif is suitable for classic style websites. After applied the font, the entire website will be replaced with the selected font.

 

B. Create a featured slogan on advanced page

Let customers focus on your brand spirit.

slogan.png

You can make it at:

location: Admin panel > Navigation & Pages >
Pages > Edit page > Add a "Text with Title" element in page builder


_____2019-06-19___2.27.56.png

 

Please fill in the description field, and let only the "Text with Title" element in 1 section, then the theme color #1 background color will display on storefront. Remember set the description text color match the background color!

 

_____2019-06-19___2.39.20.png

 

In addition, you can adjust letter spacing with css code:

step 1. Click the description to open editor, and click </> to view HTML

_____2019-06-19___2.45.04.png

step 2. Paste this code: <span style="letter-spacing:3px;"> behind the first "<p>", then you can change the number "3" to adjust letter spacing

_____2019-01-07___4.37.22.png

 

C. Layout guild of product detail page 

Advantage of Kingsman :

  • Product photo can be hover in order to zoom
  • Product description and delivery/payment methods will be minimize and shown in right hand side, in order to make customer focus on the product photo
  • Allow customer to read the description while scrolling to see all product photos

demo.gif

So, please put all product images together in product photo (main), and shorten the length of description. It will help the product detail page beautiful.

_____2019-06-19___3.06.57.png

 

D. Recommended banner size

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

Advanced page:  You can use full screen banner for home page top banner, size is 1920x840px.

_____2019-06-06___11.48.00.png

Or use 1920x640px, it will occupy three-quarters of the screen and show a little bit bottom item.

_____2019-06-06___11.46.31.png

At Product list page, let the height < 640px is recommended.

_____2019-06-06___11.49.15.png

 

E. Other details

  • Featured Instagram layout style

_____2019-05-23___4.01.31.png

  • Blog posts

The first article will focus on the customer's attention with a full-page display. The next one will be side by side. You can read multiple articles at a time when you scroll, saving customers time and exposing more! The cover of the article will use the first image in the article. It is recommended that the image ratio be used with a 16:9.

Blog_list_page_en.png

 

 

Have more questions? Submit a request

Comments