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:
- Customize the website color
- Customize fonts
- Create a featured slogan on the advanced page
- Layout guidelines for product detail page
- Recommended banner sizes for each page
- Other details
1. Customize the website color
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.
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.
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.
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.
In the "Advanced Page," you can add a "Text with Title" element. For more information, please refer to the Advanced Page.
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.)
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:
- Click the description to open the editor, and click </> to view HTML.
- Paste this code: <span style="letter-spacing:3px;"> behind the first "<p>", click OK to save the changes.
- You can change the number "3" to adjust the letter spacing.
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.
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.
- 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.
- 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.
- Recommended image proportions for the desktop version
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.