03GENERAL

Main product

This page explains how “Main product” actually behaves, which data it depends on, and what its settings change.

WHAT IT DOES

Main product

This page explains how “Main product” actually behaves, which data it depends on, and what its settings change.

Used in templates

product.bulk.jsonproduct.jsonproduct.morning-routine.jsonproduct.night-routine.jsonproduct.subscriptions.jsonproduct.unsellable-product.json

IMPLICIT BEHAVIOR

What the theme does automatically

→
Changing variants updates the URL when the related option is enabled.
→
Purchase blocks always use the selected variant or the first available variant.
→
Volume offers do not apply a discount by themselves: the matching rule must exist in Shopify.
→
Blocks without relevant data are hidden to avoid empty areas.
→
Some data can come from Shopify metafields; a missing value usually hides the related element.

CONFIGURATION

Understand the settings

Gallery

Adjust the product's media presentation and accessible navigation labels.

Desktop gallery layoutmedia_layout

The grid becomes a swipe-friendly single-media gallery on mobile.

Default: carousel · Options: Carousel, Editorial grid

Media widthmedia_width

Default: 58 · Range: 20–75%

Show thumbnailsshow_thumbnails

Default: enabled

Add the Buy the look thumbnailshow_buy_the_look

The thumbnail remains hidden when no Shop the look section is present on the page.

Default: enabled

Buy the look labelbuy_the_look_label

Default: Buy the look

Iconicon_bundle_product

Default: question · Options: Look, Question, Measurements, Care, Materials, Gift, Sparkle

Accessible wordingbuy_the_look_accessibility_label

Default: Discover all products in this look

Target lookbookbuy_the_look_target

Choose which lookbook the button beside the product thumbnails opens. Automatic uses the first available lookbook on the page.

Default: auto · Options: Automatic — first available lookbook, Shoppable lookbook, Bundle lookbook

Adjusting imagesmedia_fit

Default: cover · Options: Fill, View full image

Category specifications

Automatically displays the Shopify category attributes added to the product below the media gallery.

Show specifications tableshow_category_specifications

Default: enabled

Show Shopify categoryshow_category_specifications_category

Default: enabled

Eyebrowcategory_specifications_eyebrow

Default: Product details

Titlecategory_specifications_heading

Default: Specifications

Category labelcategory_specifications_category_label

Default: Category

Maximum number of attributescategory_specifications_limit

Default: 18 · Range: 1–30

Layout and scrolling

Product information positioncontent_position

Default: right · Options: Content right / media left, Content left / media right

Desktop scroll behaviorscroll_behavior

The sticky media option keeps the image in place while the purchase content continues to scroll.

Default: sticky_media · Options: Natural scrolling, Keep media visible

Content reveal animationscroll_animation

Default: fade_up · Options: None, Fade upward, Slide from the side, Soft zoom

Refresh Variant URLupdate_url

Updates the page address when the client changes variations.

Default: enabled

Gallery labelmedia_gallery_label

Label see mediaview_media_label

Previous media labelprevious_media_label

Next media labelnext_media_label

Purchase

Configure purchase actions and messages displayed during add to cart.

Add to cartadd_label

Adding in progressadding_label

Product addedadded_label

Add errorerror_label

Product out of stocksold_out_label

Variant unavailableunavailable_label

Sticky purchase barsticky_mode

Default: both · Options: Disabled, Mobile only, Desktop only, Mobile and desktop

Sticky button labelsticky_label

Section appearance

Use a dedicated paletteopaline_use_color_scheme

Default: disabled

Paletteopaline_color_scheme

Default: scheme-1

Title

Alignment on desktopopaline_heading_alignment

Default: inherit · Options: Keep the design, Left, Center, Right

Spacing

Space after sectionopaline_section_spacing

Creates space between this section and the next. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–160px

Left and right insetopaline_content_inset

Moves content away from the edges. Mobile spacing adjusts automatically.

Default: 0 · Range: 0–120px

COMPOSITION