Product media gallery
Showcase your product images, videos, and 3D media with maximum impact
The Product Media Gallery is one of the most important blocks within the Product Main section. For most Shopify stores, product images and media play a critical role in a customer’s decision to purchase. High-quality visuals help build trust, showcase details, and clearly communicate the value of your product.
Because of this importance, the Media Gallery block comes with a wide range of settings that allow you to fine-tune its appearance and behavior. You can adjust the layout, interaction, and viewing experience to match your brand and your store’s needs, ensuring your products are presented in the most effective way possible.
Available settings
The Product Media Gallery block includes a variety of settings that let you fine-tune how your product media is displayed and how customers interact with it.
Image ratio – Controls how images are displayed. Options include:
Adapt – Displays images using their original proportions.
Square
Portrait
Image width – Adjust this setting if your product images are not displaying as expected or if you want to fine-tune the gallery’s overall width.
Speed – Sets the transition time between slides in milliseconds. Higher values result in slower, smoother transitions.
Dynamic speed – When users jump between slides that are far apart (for example, when selecting a variant), this option applies a slower transition to make the change feel smoother.
Show variant image at first – When disabled, the gallery will always show the default product image, regardless of the selected variant.
Show custom badge – Displays a custom badge at the top-center of the gallery. Custom badges are commonly used on product cards and can also be shown here for consistency.
Controls/pagination
Show controls – Shows or hides the previous and next navigation buttons. We recommend keeping this enabled.
Show pagination – Displays a slide counter at the bottom-center of the gallery.
Controls color scheme – Selects the color scheme used for the controls and pagination. Adjust this if the controls are not clearly visible.
Controls style – Choose how the gallery controls are displayed. Available options:
Minimal
Circle
Side
Thumbnails
Show thumbnails – Disable this option if you prefer to display only the main gallery.
Thumbnails per view – Controls how many thumbnails are visible at once. Additional thumbnails appear as the gallery slides.
Show thumbnails on mobile – Disable this option if you want thumbnails to appear only on desktop devices.
Crop the main image – Vertically crops the main image to match the height of the thumbnails on smaller desktop screens.
Modal gallery
Enable modal gallery – Enables a fullscreen gallery that opens when customers click on images in the media gallery, allowing for a more immersive viewing experience.
Last updated