Product Page

Product Information Settings

Control how product content, media, and layout behave on the product page. These settings help you balance visual presentation with usability and performance.

Sticky Content

Keeps purchase actions visible while scrolling.

How to use

1. Enable “Sticky content on desktop”

   
   
2. Choose a position from Sticky Bar Position

1. Scroll the product page to see the sticky bar appear

Sticky Bar Position

Controls where the sticky bar appears.

How to use

1. Open Sticky Bar Position
2. Select:

• None (Disabled) → No sticky bar
• Stick to Bottom → Fixed at the bottom after scrolling

Color Scheme

Controls the appearance of the sticky bar.

How to use

1. Select a Color scheme

1. Preview the changes on the product page

Media

Control how product images and videos are displayed.

Desktop Media Width

Adjusts the size of product images on desktop.

How to use

1. Select Small → More space for product details
2. Select Medium → Balanced layout between media and content
3. Select Large → Larger product images, more visual focus

Constrain Media to Screen Height

Prevents images from exceeding the screen height.

How to use

1. Enable the toggle
2. Images will fit within the visible screen

Media Fit

Controls how images scale inside their container.

How to use

1. Select:
   • Original → No cropping
   • Fill → Fills the space (may crop images)

Desktop Layout

Controls how thumbnails and main images are displayed.

How to use

1. Choose a layout:
   • Thumbnail carousel → Static thumbnails
   • Thumbnail slider → Scrollable thumbnails with arrows

Enable Scrolling

Allows media to scroll independently on desktop.

How to use

1. Enable the toggle
2. Scroll inside the image area separately

Thumbnail Position

Changes where thumbnails appear.

How to use

1. Select:
   • Left → Vertical thumbnails
   • Bottom → Horizontal thumbnails

Desktop Media Position

Controls layout alignment.

How to use

1. Select:
   • Left → Images on the left side
   • Right → Images on the right side

Image Zoom

Controls how zoom interaction works.

How to use

1. Select Open lightbox → Click the image to view it in full screen
2. Select Click and hover → Hover to zoom on desktop, tap to zoom on mobile
3. Select No zoom → Disables zoom interaction

Hide Other Variants' Media

Shows only images for the selected variant.

How to use

1. Enable the toggle
2. Select a variant → only related images are displayed

Enable Video Looping

Makes videos play continuously.

How to use

1. Enable the toggle
2. Videos will loop automatically

Section Padding

Controls spacing above and below the section.

How to use

1. Adjust Top padding
2. Adjust Bottom padding
3. Preview spacing changes