Product media

Placement and available controls for the Product media block.

Scale Theme · v1.9.3 · 2 min read

Where to find it

This block is used inside its supported parent. Open the parent section to edit it.

Editor controls

Conditional controls appear after choosing the relevant source, style or option. Saved values may differ from new defaults.

Color source: Theme colors use Color DNA, Color scheme uses a shared Shopify preset, and Custom affects only this block.Options: Theme colors · Color scheme · Custom
Color schemeConditional: Choose an available Shopify color scheme.
Feature card backgroundConditional: Choose a local color when the relevant custom source is enabled.
Feature card gradientConditional: Optional. Leave empty to use the feature card background.
Feature card textConditional: Choose a local color when the relevant custom source is enabled.
Feature iconConditional: Choose a local color when the relevant custom source is enabled.
Feature card borderConditional: Choose a local color when the relevant custom source is enabled.
Type: Carousel is always used on mobileOptions: Grid · Carousel · Feature rail
ColumnsConditional: Choose the presentation or source that fits this component.Options: 1 · 2
GapConditional: Adjust within the range offered by the theme editor.
Full width first imageConditional: Enable or disable this option and preview the result.
IconsConditional: Choose the presentation or source that fits this component.Options: Arrows · Chevrons · Large arrows · Large chevrons
Desktop paginationConditional: Choose the presentation or source that fits this component.Options: Dots · Counter · Thumbnails
Mobile pagination: Choose the presentation or source that fits this component.Options: Dots · Counter · Hint · Thumbnails
Desktop positionConditional: Choose the presentation or source that fits this component.Options: Left · Bottom · Right
Desktop widthConditional: Adjust within the range offered by the theme editor.
Corner radiusConditional: Adjust within the range offered by the theme editor.
Feature card shapeConditional: Choose the presentation or source that fits this component.Options: Stretch with media · Square tiles
Feature subtitle sizeConditional: Adjust within the range offered by the theme editor.
Feature 1 emojiConditional: Optional. Replaces the Material Symbol when no image is selected.
Feature 1 subtitleConditional: Edit the text shown by this component.
Feature 2 emojiConditional: Optional. Replaces the Material Symbol when no image is selected.
Feature 2 subtitleConditional: Edit the text shown by this component.
Feature 3 emojiConditional: Optional. Replaces the Material Symbol when no image is selected.
Feature 3 subtitleConditional: Edit the text shown by this component.
Rail positionConditional: Choose the presentation or source that fits this component.Options: Left · Right
Mobile rail positionConditional: Choose the presentation or source that fits this component.Options: Above media · Below media · Image left · Rail right of image · Hide
Rail widthConditional: Adjust within the range offered by the theme editor.
GapConditional: Adjust within the range offered by the theme editor.
Card radiusConditional: Adjust within the range offered by the theme editor.
Card paddingConditional: Adjust within the range offered by the theme editor.
Icon sizeConditional: Adjust within the range offered by the theme editor.
Label sizeConditional: Adjust within the range offered by the theme editor.
Label weightConditional: Choose the presentation or source that fits this component.Options: Normal · Medium · Semi Bold · Bold
Card backgroundConditional: Choose a local color when the relevant custom source is enabled.
Card textConditional: Choose a local color when the relevant custom source is enabled.
Icon colorConditional: Choose a local color when the relevant custom source is enabled.
Card borderConditional: Choose a local color when the relevant custom source is enabled.
Card border widthConditional: Adjust within the range offered by the theme editor.
Media backgroundConditional: Choose a local color when the relevant custom source is enabled.
LabelConditional: Edit the text shown by this component.
Feature 1 SVG icon: Optional SVG. Takes priority over the Material icon and legacy symbol field.
Google icon nameConditional: Example: bedtime, shield, bolt. Image below overrides the icon.
Custom imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Theme image filenameConditional: SVG or PNG from Assets. The image picker takes priority.
LabelConditional: Edit the text shown by this component.
Feature 2 SVG icon: Optional SVG. Takes priority over the Material icon and legacy symbol field.
Google icon nameConditional: Example: security, sync, health_and_safety.
Custom imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Theme image filenameConditional: SVG or PNG from Assets. The image picker takes priority.
LabelConditional: Edit the text shown by this component.
Feature 3 SVG icon: Optional SVG. Takes priority over the Material icon and legacy symbol field.
Google icon nameConditional: Example: bolt, electric_bolt, local_fire_department.
Custom imageConditional: Choose an image from your shop. Preview its crop on desktop and mobile.
Theme image filenameConditional: SVG or PNG from Assets. The image picker takes priority.
Aspect ratio: Choose the presentation or source that fits this component.Options: Auto · Portrait · Square · Landscape
Constrain to screen height: Enable or disable this option and preview the result.
Media fitConditional: Choose the presentation or source that fits this component.Options: Cover · Contain
Corner radius: Adjust within the range offered by the theme editor.
Extend media to screen edgeConditional: Enable or disable this option and preview the result.
Enable zoom: Enable or disable this option and preview the result.
Video looping: Enable or disable this option and preview the result.
Hide unselected variant media: Enable or disable this option and preview the result.
Top: Adjust within the range offered by the theme editor.
Bottom: Adjust within the range offered by the theme editor.
Left: Adjust within the range offered by the theme editor.
Right: Adjust within the range offered by the theme editor.