Product block settings

Product settings

Settings	Description
Product	Select the product that will be displayed in the left container after clicking the corresponding hotspot.
Image ratio	Image Ratio controls how your images look based on their shape. Here are the options: Adapt to image: Keeps the original shape of the image, no cropping. Portrait: Makes the image taller. Square: Makes the image a perfect square. Custom: Allows setting image height in the next option.
Custom image height	Set a custom image ratio and adjust its height using a convenient slider.
Show type	You can show or hide the product type (e.g., headphones) added on the product detail page using this button.
Show color variants	Enable this option to show color swatches. This option works with Color Variant Name option. In the Color Variant Name field (Theme settings — Product cards tab), ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section. Directly on the product card, you can preview different product variant colors and even add a selected variant to your cart. Simply click on the desired color swatch, then hover over the product card and click “Add to Cart”.
Enable the buy button	Enables or disables buy buttons in product cards. None – button hidden. Standard – button visible.

Settings	Description
Bullet color	Choose the desired color for the hotspots. Simply select a color from the palette.
Horizontal position	Set up the position of hotspot on the image. By adjusting the horizontal position, you can move the hotspot left or right on the image, aligning it to the desired location horizontally.
Vertical position	Similarly, by modifying the vertical position, you can move the hotspot up or down on the image, positioning it at the desired location vertically.
Horizontal position mobile	Set up the position of the hotspot on the image for mobile devices. By adjusting the horizontal position, you can move the hotspot left or right on the image, aligning it to the desired location on mobile view.
Vertical position mobile	Set up the position of the hotspot on the image for mobile devices. By adjusting the vertical position, you can move the hotspot up or down on the image, aligning it to the desired location in mobile view.