The Products section allows you to customize the product grid layout, product card behavior, and product media display. These settings help you tailor the visual presentation and interaction of products, enhancing the shopping experience to align with your brand.

Product Card

• Product card click behavior: Choose the behavior of the product card on click on the desktop. Select between either showing a preview of the product card or redirecting to the product page. By default, it shows a preview popup.

  Note: This setting is specifically for desktop behavior. On mobile devices, it always redirects to the product page.

• Discount badge Position: Determines the position of the discount badge on product cards.

Preview

Redirect

Video

Preview (1).mp4

Product Media

• Fade In Background Color: Specifies the color displayed while images are loading. Once the images are fully loaded, they will fade in from this background color. This setting applies to all media across the site.
• Mix Image with the Background: Blends the image with the background color chosen in the previous setting. For example, if an image has a white background and the selected background color is gray, the image will mix with the gray background, giving it a blended appearance. This setting applies to all media across the site.
• Fit product media: Determines how product media should fit in the product card and product page images. Choose between "cover" and "contain". The default is contain.
• Desktop product image aspect ratio: Width to height ratio multiplied by 100. On mobile the aspect ratio is computed automatically, based on customer view port height.

Satoshi demo - Product media (1).mp4