User Guide

Shop the look

by Admin on Apr 11, 2024

The Shop the look section creates hotspots of products on an image, and each hotspot represents the product.

General

Shop the look Heading Enter the heading of the section.
Heading size Adjust the size of the heading (range from 50-200%).
Make section full width Tick the checkbox to set the section’s width to be the same as full width of users’ devices.
Disable it to set the section’s width to be the same as the page width set in the theme setting.
Show section divider Tick the checkbox to show a divider that divides this section with the section above.
Image Click the Select image button to select an image to display in the Shop the look on desktop devices. 
Mobile image Click the Select image button to select an image to display in the Shop the look on mobile devices. 
Desktop image alignment Adjust the alignment of the image in the section (Left, Right).
Left - on desktop devices the image is on the left section.
Right - on desktop devices the image is on the right section.
Product cards Image ratio Adjust the ratio of the featured image.
Section padding Top padding Adjust the padding on top of the banner (range from 0 to 100 px).
Bottom padding Adjust the padding at the bottom of the banner (range from 0 to 100 px).

 

Product

Configure each product that corresponds to a hotspot.

Product Choose a product to show over the hotspot.
Hotspot color  Choose the color of the hotspot.
Hotspot desktop horizontal position Scroll the range slider (range from 0% to 100%) to adjust the horizontal position of the hotspot on desktop devices.

 

0 as close to the left border. 100 as close to the right border.
Hotspot desktop vertical position Scroll the range slider (range from 0% to 100%) to adjust the vertical position of the hotspot on desktop devices.

 

0 as close to the top border. 100 as close to the bottom border.
Hotspot mobile horizontal position Scroll the range slider (range from 0% to 100%) to adjust the horizontal position of the hotspot on mobile devices.

 

0 as close to the left border. 100 as close to the right border.
Hotspot mobile vertical position Scroll the range slider (range from 0% to 100%) to adjust the vertical position of the hotspot on mobile devices.

 

0 as close to the top border. 100 as close to the bottom border.