Product gallery settings

Helpful links

1. https://help.shopify.com/en/manual/online-store/themes

2. https://help.shopify.com/en/manual/online-store/themes/theme-structure

3. https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings

4. https://help.shopify.com/en/manual/online-store/themes/customizing-themes

5. https://help.shopify.com/en/manual/online-store/themes/features-list

6. https://help.shopify.com/en/manual/online-store/themes/unlicensed-themes

Reference videos

1. Online store — The official Shopify guide

Overview

Product gallery settings provide centralized control over the appearance and user experience of product media galleries throughout your store. These settings determine how images and videos are presented, offering a consistent foundation for all galleries. By establishing default specifications for layout, aspect ratio, and interactivity, you ensure a unified design, while still allowing flexibility in specific contexts.

⚠️ Important: The product gallery settings impact media presentation and navigation across your entire storefront. Fine-tuning these choices can shape both brand perception and customer engagement.

Product gallery settings

This group of settings shapes the structure, style, and interactivity of product galleries on all devices. Each option is designed to enhance flexibility and user-friendliness, supporting an inviting and accessible browsing experience.

Introduction

With product gallery settings, you can specify image ratios, gallery layout, column sizing, and the interactive features of each gallery. These settings are especially useful for creating product displays that are visually appealing and functionally optimized for both desktop and mobile users.

Image aspect ratio (desktop gallery)

The image aspect ratio (desktop gallery) determines the proportional shape of product images on desktop devices. Selecting a ratio ensures visual consistency across your galleries and can highlight key product details.

1. Default

   1. Keeps the original proportions of each image.

2. Landscape

   1. Crops to a horizontal rectangle, ideal for wide-format visuals.

3. Portrait

   1. Displays a vertical crop for a taller look.

4. Square

   1. Uses an exact 1:1 ratio for uniformity.

5. Widescreen

   1. Creates a cinematic, wide look.

6. Ultrawide

   1. Applies a panoramic, extra-wide aspect.

Default: square

Image aspect ratio (mobile gallery)

The image aspect ratio (mobile gallery) lets you adjust image proportions specifically for mobile devices. This helps optimize gallery displays and ensures your visuals are effective on smaller screens.

1. Default

   1. Maintains the image’s original ratio.

2. Landscape

   1. Provides a horizontal emphasis.

3. Portrait

   1. Focuses on a tall orientation well suited to small screens.

4. Square

   1. Offers a centered 1:1 crop for clarity.

5. Widescreen

   1. Adopts a cinema-style, wide crop.

6. Ultrawide

   1. Delivers an extra-broad, panoramic view.

Default: square

💡 Tip: You might consider customizing aspect ratios for each platform — desktop or mobile — to make sure images stay visually balanced and key product features remain visible in every context.

Column width

Column width controls how much space the product gallery takes up relative to product details on desktop views. Adjusting this option lets you direct focus either toward the imagery or supporting information.

1. Equal columns

   1. Splits the layout evenly between gallery and details.

2. Large column on left

   1. Makes the gallery more prominent on the left side.

3. Large column on right

   1. Prioritizes product information by enlarging the right-side column.

Default: large column on left

Info: Changing column widths allows you to favor product visuals or information, adapting the experience to match your merchandising strategy.

Gallery position

Gallery position specifies whether the gallery is placed to the left or right of product information on desktop. This can improve the user flow and better align with your visual hierarchy.

1. Left

   1. Gallery appears to the left of product details.

2. Right

   1. Gallery appears to the right of product details.

Info: Choosing the right gallery position can help your layout feel balanced and intuitive, especially for different content types or languages.

Gallery style (desktop)

Gallery style (desktop) defines how images and videos are arranged and interacted with on desktop screens. Each style option offers a unique approach to displaying multiple media assets.

1. One column first

   1. Main image is featured at the top, with others following vertically.

2. One column

   1. Every image is placed in a single, vertical line.

3. Two columns

   1. Images are presented side-by-side in paired columns.

4. Slideshow

   1. Users can browse images in a swipeable or clickable slider.

5. None

   1. Gallery is hidden, enabling a minimalist or custom design.

Gallery style (mobile)

Gallery style (mobile) establishes how gallery media is presented on mobile devices. You might consider adjusting this independently from desktop to suit the unique needs of smaller screens.

1. One column first

   1. The featured image is displayed first, followed by others in a single line.

2. One column

   1. Images are organized in a continuous vertical scroll.

3. Two columns

   1. Media appears in a grid of two parallel columns.

4. Slideshow

   1. Gallery operates as a swipeable carousel.

5. None

   1. Hides the gallery on mobile to streamline the layout.

Default: slider

💡 Tip: Adjusting style and layout by device can greatly improve how customers interact with your galleries, making the most of the space available.

Gallery variant image style

Gallery variant image style manages how images linked to specific product variants are shown within your primary product gallery. This is key for products with multiple options, such as colors or sizes.

1. Default

   1. All images and variant-specific images are displayed.

2. None

   1. Variant images are not displayed separately.

3. Variant only

   1. Only images attached to the active variant are shown.

Default: default

Info: Managing variant images ensures a clean and relevant gallery for every user selection and product variant.

Gallery zoom style

Gallery zoom style sets the zoom-in or enlarge interaction for product gallery images. This helps shoppers examine product details more closely.

1. Theme setting

   1. Uses the global theme zoom configuration.

2. None

   1. Turns off zoom functionality.

3. Open in lightbox

   1. Expands selected images in an overlay for easier viewing.

Default: use theme setting

Show video player controls

Show video player controls determines whether playback controls are visible for gallery videos. Controls such as play, pause, and seek are available when enabled, helping users engage more interactively with video content.

Default: enabled

📝 Note: Enabling video controls can enhance accessibility, allowing everyone to easily interact with gallery videos.

Usage notes

1. Responsiveness

   1. Use the provided settings to adapt gallery layouts and image proportioning independently for desktops and mobile devices, creating an optimized experience on both platforms.

2. Performance

   1. Simpler gallery layouts and properly sized images can improve speed, especially on older devices or slow networks.

3. Accessibility

   1. Features like video controls and clear navigation support customers who use assistive technologies.

4. Consistency

   1. Establishing strong defaults for all galleries helps maintain a unified look; individual exceptions should be made only when needed.

⚠️ Important:Product gallery settings give you global command over media display standards. By configuring these thoughtfully, you create a foundation that supports both brand identity and user satisfaction across the store.