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.
- Customize theme colors, font colors
- Customize fonts
- Create a featured slogan on advanced page
- Layout guide for product detail page
- Recommended banner sizes for each page
- Other details
1. 3 Customizable theme colors with fonts
A. Custom theme color #1 background color and text color
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.
B. Custom theme color #2
Apply to price, icons, and buttons above the white background.
For example, the price and quantity of products button.
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.
Or use black to create a sophisticated style.
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.
There are many color pairing websites, feel free to try them out.
D. 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
An eye-catchy slogan will allow your customers to grasp your brand spirit.
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.
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.)
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 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.
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 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.
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
-
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.
Comments