User Guide of Theme Kingsman



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.




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


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.



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



3. Color matching suggestion

If you want to create an 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.


Or use black to create an impressive website style.



4. Typefaces suggestion


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.


You can make it at:

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



Please fill in the description field, then the theme color #1 background color will display on storefront. Remember to set the description text color to match the background color!

(If the theme color #1 is too dark, it is recommended not to place it in the same line with the product element.)




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

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


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



C. Layout guild of product detail page 

Advantage of Kingsman :

  • Product photo can be Havor to zoom
  • Product description and delivery/payment methods will be minimize and shown in the 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


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



D. Recommended banner size

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

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


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


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



E. Other details

  • Featured Instagram layout style


  • 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 16:9. 




Have more questions? Submit a request