Theme Kingsman User Guide

1.SHOPLINE_Support_e-Commerce.png

Artboard_Copy_6.png

Kingsman is an elegantly stylized theme suitable for merchants who want to emphasize product image with quality details. It is suitable for apparel, furniture, jewelry, 3C products and more. 

 

 

 

1. 3 Customizable theme colors with fonts

A. 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 the mobile interface, background color of all buttons.  (Dark colors are recommended for better readability)

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

The image below: The header menu and checkout button background colors are set to green, and text color is set to white.

home_en.png

 

B. Custom theme color #2

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

_____2019-06-19___1.55.03.pngFor example, the price and quantity of products button. 

PDP_en.png

 

C. Color matching suggestion

If you want to create an elegant style website, we recommend you apply a low saturation color like the Morandi series to theme colors #1 and #2 background color, then apply white to the text color.

_____2019-05-22___7.35.41.png

Or use black to create a sophisticated style. 

_____2019-05-22___7.44.29.png

If you want to articulate a more simplistic aesthetic with theme color #1 + theme color #2 + font color combination, you can use the same background color for theme color #1 and theme color #2. 

If you want a color pair with a twist, opt for a similar color: 

Adjust the color saturation and brightness of theme color #1 to use as theme color #2 so to avoid using a completely different color. 

If you want to leave a strong impression on your customer, use contrasting colors like black and yellow. 

_____2019-05-22___7.52.40.png

There are many color pairing websites, feel free to try them out. 

 

D. Font suggestions

_____2019-06-19___2.20.23.png

Open Sans is suitable for the modern and trendy aesthetic. Noto Serif is suitable for a classic look. After applying the font, the entire website will be replaced with the selected font.

 

2. Create a featured slogan on the advanced page

An eye-catchy slogan will allow your customers to grasp your brand spirit. 

slogan.png

How to create?

Through the "Advanced Page Editor", you can add a "Text with Title" element. For more information, please reference the article Advanced page. 


_____2019-06-19___2.27.56.png

 

For this template, the theme color #1 background color will display at the storefront when you fill in the description field. Make sure to set the description text color to match the background color. (If theme color #1 is too dark, it is recommended not to place it in the same line with the product element.)

 

ks_edit_here.png

The background color will be set according to theme color #1, so it is recommended you pick a font color that pairs well with it. 

In addition, you can adjust letter-spacing with CSS code:

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

Screen_Shot_2022-01-10_at_11.53.22_AM.png

 

2. Paste this code: <span style="letter-spacing:3px;"> behind the first "<p>" , click OK to save the changes.

3. You can change the number "3" to adjust letter spacing

_____2019-01-07___4.37.22.png

 

3. Layout guideline of product detail page 

3 new features of the product details page:

  • Hover to zoom in product photo. When your mouse hovers over the main product image, the original size of the image will appear in a pop-up window.
  • Use the mouse to scroll through all the product images. 
  • Product description and delivery/payment methods will be minimized and shown on the right-hand side, in order to make customers focus on the product images. 

demo.gif

Therefore, it is suggested that you upload all images in the main photo image section, and shorten the length of the description to enhance the overall look. It is also recommended that uploaded images stay within 1000 x 1000 px to speed up loading time. 

_____2019-06-19___3.06.57.png

 

4. Recommended banner size

Try this compressed image tool to help your website load faster:
https://tinypng.com/

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

_____2019-06-06___11.48.00.png

If you do not want to take up the entire banner space, use 1920x640px. It will occupy three-quarters of the screen.

_____2019-06-06___11.46.31.png

On the product list page, it is recommended that the height does not exceed 640px, so when customers first enter the landing page, they see a bit of the first row of product items. 

_____2019-06-06___11.49.15.png

 

5. Other details

  • Featured Instagram layout style

_____2019-05-23___4.01.31.png

  • Blog posts

The first article on display will focus on grabbing the customer's attention with a full-page display. The following ones will display side by side. Customers will be able to read multiple articles at a time when scrolling, saving time, and increasing exposure. The cover of the article will be displayed based on the first image in the article. 

Blog_list_page_en.png

 

 

 

 

 

Have more questions? Submit a request

Comments