Theme Template Kingsman User Guide

1. EC (EN).png

Artboard

Kingsman is an elegantly stylized theme template suitable for merchants who want to emphasize product images with quality details. It is also suitable for apparel, furniture, jewelry, 3C products, and so on.

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

 

In this article, you will be introduced to the following:

 

1. Customize the website color

i. Setup

In the SHOPLINE Admin, go to [Online Store Design] > [Pages], and click + Advanced Page to create a new store page, or click on the Edit button next to the existing pages that support New Page Builder.

Screen_Shot_2022-12-13_at_12.04.22_PM.png

 

In the New Page Builder, go to [Store Setting] > [Color] to customize the color for each block. The default color for each block is the color you set in the beginning.

Screen_Shot_2022-12-13_at_3.29.12_PM.png

Please refer to Store Settings | Page Builder (New) for more instructions on color settings.

 

ii. Color-matching advice

You can match three different colors for this theme template. If you want to create a soft look for your store, you can apply low-saturation colors like the Morandi series at [Primary button] > [Background], and then match them with white text.

螢幕快照

 

Or use black to create a more sophisticated look.

螢幕快照

 

To create a simplistic aesthetic color combination of "Header," "Primary button," and "Secondary button," you can match the color of the "Secondary button" with the background color of the "Header" and "Primary button."

If you want a dynamic color pair, you can opt for similar colors with different shades. For example, you can set the "Secondary button" color by adjusting the brightness and saturation of the background color of the "Header" and "Primary button," without having to use completely different colors.

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

_____2019-05-22___7.52.40.png


If you wish to customize the style (background color & text color) of the "Menu Navigation" independently without affecting the styles of other store buttons, you can contact our Online Merchant Success Team for advice on design and modification.

 

iii. Font suggestions

螢幕快照

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

 

2. Create a featured slogan on the advanced page

i. New Page Builder

The slogan feature is currently unsupported in the new page builder.

 

ii. Old Page Builder

A catchy slogan will allow your customers to grasp your brand spirit.

slogan.png

 

In the "Advanced Page," you can add a "Text with Title" element. For more information, please refer to the 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 as 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 the 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 the letter spacing._____2019-01-07___4.37.22.png

 

3. Layout guidelines of product detail page 

Three new features of the product details page are as follows.

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

螢幕快照

 

4. Recommended banner size

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


Advanced page:
You can use a full-screen banner for the homepage top banner. The applicable size is 1920x840px.

螢幕快照


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

螢幕快照


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. 

螢幕快照

 

*Note:

  • For advanced pages created with the new page builder, please switch on the toggle for "Adapt Height to the Media Size" when adding the Slider widget to avoid image cropping.
    Screen_Shot_2023-02-24_at_5.10.33_PM.png

  • For advanced pages created with the new page builder, please refer to:
    • Recommended image proportions for the desktop version
      • Rectangular (2:1 ratio) - Recommended single image dimension: 2000 x 1000px.
      • Rectangular (3:4 ratio) - Recommended single image dimension: 1500 x 2000px
      • Square (1:1 ratio) - Recommended single image dimension: 2000 x 2000px.
    • Recommended image proportions for the mobile version
      • Rectangular (2:1 ratio) - Recommended single image dimension: 1080 x 540px.
      • Rectangular (3:4 ratio) - Recommended single image dimension: 810 x 1080px
      • Square (1:1 ratio) - Recommended single image dimension: 1080 x 1080px.

 

5. Other details

i. Featured Instagram layout style

螢幕快照

 

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

 

 

 

 

 

Have more questions? Submit a request

Comments