Kingsman is an elegantly stylized theme template suitable for merchants who want to emphasize product images with quality details. It is suitable for apparel, furniture, jewelry, 3C products, and more.
*Note: You cannot change the store layout if your store is using an official plan and only the “Social Commerce” plan.
This article will cover the following:
- Customize the store's color
- Customize fonts
- Create a featured slogan on advanced page
- Layout guidelines for product detail page
- Recommended banner sizes for each page
- Other details
1. Customize the store's 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.
On the advanced page, 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.
B. Color matching suggestion
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 like black and yellow.
There are many color-pairing websites, feel free to try them out.
C. Font suggestions
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
A. New Page Builder
It is currently unsupported to use different background colors in a text block.
B. 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 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:
1. Click the description to open editor, and click </> to view HTML
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.
3. Layout guidelines 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.
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.
5. Other details
Featured Instagram layout style
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.