Local > Product page settings

Media

The media settings control how product images and videos are displayed on the product page. These options allow merchants to customize the gallery layout, aspect ratios, borders, zoom functionality, and video playback, ensuring a visually engaging and seamless shopping experience.

Media settings

Gallery style - Defines how product images and videos are displayed. Options include:

  • Slider - Images and videos are displayed in a carousel format, allowing customers to scroll through them one at a time. This is the default for mobile devices.
  • Scroll one column - Displays images in a single column.
  • Scroll two columns - Stacks images vertically in two columns.
Slider
Slider style
Scroll - one column
Scroll - two columns
Scroll - two columns

Images aspect ratio - Determines how images are displayed.

Videos and other media aspect ratio - Allows videos and other media types to either follow the aspect ratio of images or be displayed in their original format.

Fit images inside container - When enabled, ensures that images are scaled to fit within the designated container, preventing overflow or cropping.

Show border around gallery - Adds a border around the media gallery for a more structured look.

Inherit card design properties - Applies the store’s global design styles (such as border radius, spacing, or shadows) to the gallery for consistency with other design elements.


Gallery customization

Gallery inner spacing - Adjusts the spacing between media items in the gallery, helping create a clean or compact look.

Gallery slider pagination - Determines how customers navigate through slider-style galleries. Options include:

  • Dots - Displays small pagination dots below the gallery for navigation.
  • Thumbnails - Shows small thumbnail previews of images below the main media.
Gallery nav - dots
Gallery nav - thumbnails

Enable image zoom - When enabled, allows customers to hover or click to zoom in on images for a closer look at product details.


Video settings

Enable video looping - If enabled, videos will continuously replay after finishing instead of stopping.

Enable video autoplay - Allows videos to play automatically without user interaction. Videos will be muted and have no controls to ensure a smooth browsing experience.

Crop videos when following images aspect ratio - When enabled, videos will be cropped to match the selected image aspect ratio, ensuring a consistent layout.


Functionality

This setting controls whether the first available product variant is automatically selected when a customer visits the product page.

  • Enabled: The first available variant is pre-selected, allowing customers to add the product to their cart immediately.
  • Disabled: Customers must manually select a variant before they can proceed with a purchase, ensuring they make an intentional choice.

This setting helps tailor the purchasing experience based on user preference and product complexity.

Sticky add to cart

Enhance the shopping experience by keeping the “Add to Cart” button visible as customers scroll down a product page. This feature ensures an easier and faster purchasing process, especially for mobile users.

Sticky add to cart - wide, with custom background color

Enable sticky add to cart - When enabled, a persistent “Add to Cart” button remains visible at the bottom of the screen as customers scroll, preventing the need to scroll back up to make a purchase.

Enable add to cart for multiple variants - Allows customers to add the first available or selected variant directly to the cart. If disabled, the button will display “Choose options” instead, prompting users to select a variant before purchasing.

Sticky add to cart - floating, with blur background

Style - Defines the appearance of the sticky button:

  • Wide - A full-width block for a more prominent display.
  • Floating - A smaller, floating bar positioned over the page content.

Background color - Customizes the background color of the sticky bar, allowing merchants to match it with their store’s branding.

Text color - Adjusts the text color of the block for better contrast and readability.

Blur background - When enabled, the background behind the block is slightly blurred, creating a subtle separation effect for better visibility.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.