Theme template Varm presents a modern and minimalist website style. It is suitable for merchants who sell home decoration, kitchenware, watches, jewelry, trendy shoes, sporting goods, etc., and those who would like to emphasize product images with quality details and display a lot of product information.
On the product detail page, customers can zoom the product image by hovering the mouse pointer over it so as to see more details of the item.
*Note: You cannot change the store layout if your store is using an official plan and only the “Social Commerce” plan.
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 SHOP Builder.
In SHOP Builder, go to [Store Setting] > [Color] to customize the color for each block on the page. The default color for each block will be the color you set in the beginning.
You can use color code to customize the color for the entire store's button, important information, and underline. Please use a 6-digit HEX color code (avoid using light colors for better readability). Color code reference: https://htmlcolorcodes.com/. Please refer to Store Settings | SHOP Builder for more instructions on color settings.
*Note: If you are not using the footer of SHOP Builder, you can customize the footer background color at [SHOP Builder] > [Store Setting] > [Color] > [Footer].
2. Layout guide of product detail page
A. The website will display one product image at a time. Customers can view the other images by clicking the arrow on the left side.
B. Product images can be hovered in order to zoom. Moreover, customers can view a full-size image by clicking the zoom button in the lower right corner of the image.
Click the image to zoom in. Scroll left and right to view all product images.
C. The website will display the Product Description, Shipping & Payment and Customer Reviews by pagination. In this way, customers can not only find the information quickly but also concentrate on the information.
3. Recommended banner size
Try this image compressor tool! It will help your website faster!
https://tinypng.com/
A. Advanced page
You can use a full-screen banner for the home page, 1920 x 800px is recommended.
If you prefer a narrower display of the banner, 1920x640px is recommended. The screen will be only occupied three-quarters and the products will be shown at the bottom.
*Note:
- For advanced pages created with SHOP 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 SHOP 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
B. Product listing page
On this page, merchants can upload a full-width banner to enhance the richness of the whole collection. A banner's height within 400px is recommended so that customers can see the first row of products when they land.
The above is the special introduction of Varm, try it out now!
Comments