Kingsman is a theme which can present an elegant website style and it is suitable for merchants who want to emphasize product image with quality details. It is suitable for apparel, furniture, jewelry, 3C products, etc.
- Customize branding colors
- Color matching suggestion
- Customize 2 typefaces
- Create a featured slogan on advanced page
- Layout guild of product detail page
- Recommended banner size
- Other details
A. It is available to customize 2 typefaces and 3 branding colors
location: Admin panel > Shop Design > Design > Storefront Template >
Theme setting of Kingsman
1. Custom theme color #1 background color and text color
Background Color: Apply to header menu, footer, menu panel of mobile, background color of all buttons. (Dark colour is recommended for better readability)
Text Color: Apply to all text displays above custom theme color #1 background color, e.g. text of menu, buttons.
Header menu and checkout button: their background color is set to green, and text color is set to white.
2. Custom theme color #2
Apply to price and icons, buttons above white-background.
e.g. Price and quantity buttons of products
3. Color matching suggestion
If you want to create a elegant style website, apply low saturation color like Giorgio Morandi series color to theme color #1 background color & #2, then apply white to text color is recommended.
Or use black to create a impressive website style.
4. Typefaces suggestion
Open Sans is suitable for modern and trendy styles. Noto Serif is suitable for classic style websites. After applied the font, the entire website will be replaced with the selected font.
B. Create a featured slogan on advanced page
Let customers focus on your brand spirit.
You can make it at:
location: Admin panel > Navigation & Pages >
Pages > Edit page > Add a "Text with Title" element in page builder
Please fill in the description field, then the theme color #1 background color will display on storefront. Remember set the description text color match the background color!
(If the theme color #1 is too dark, it is recommended not to place it in the same line with the product element.)
In addition, you can adjust letter spacing with css code:
step 1. Click the description to open editor, and click </> to view HTML
step 2. Paste this code: <span style="letter-spacing:3px;"> behind the first "<p>", then you can change the number "3" to adjust letter spacing
C. Layout guild of product detail page
Advantage of Kingsman :
- Product photo can be hover in order to zoom
- Product description and delivery/payment methods will be minimize and shown in right hand side, in order to make customer focus on the product photo
- Allow customer to read the description while scrolling to see all product photos
So, please put all product images together in product photo (main), and shorten the length of description. It will help the product detail page beautiful.
D. Recommended banner size
Try this compressed image tool! It will help your website faster!
https://tinypng.com/
Advanced page: You can use full screen banner for home page top banner, size is 1920x840px.
Or use 1920x640px, it will occupy three-quarters of the screen and show a little bit bottom item.
At Product list page, let the height < 640px is recommended.
E. Other details
- Featured Instagram layout style
- Blog posts
The first article will focus on the customer's attention with a full-page display. The next one will be side by side. You can read multiple articles at a time when you scroll, saving customers time and exposing more! The cover of the article will use the first image in the article. It is recommended that the image ratio be used with a 16:9.
Comments