03GENERAL

Shoppable lookbook

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

WHAT IT DOES

Shoppable lookbook

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

Used in templates

index.jsonproduct.bulk.jsonproduct.jsonproduct.subscriptions.jsonproduct.unsellable-product.json

IMPLICIT BEHAVIOR

What the theme does automatically

→
Add to cart uses Shopify’s cart. Price, inventory, and availability remain controlled by Shopify.

CONFIGURATION

Understand the settings

Header and accessibility

Name the section for assistive technologies and fill in its introductory texts.

Accessibility labelaccessibility_label

This text describes the assistive technologies section and is not displayed visually.

Eyebroweyebrow

Titleheading

Texttext

Main visual

Choose the lookbook image, its alt text and its behavior on mobile.

Lookbook imageimage

Image alt textimage_alt

Briefly describe the image. Leave this field empty only if the visual is decorative.

Image formatimage_ratio

Default: 16 / 10 · Options: Large premium, Landscape, Editorial, Portrait

Mobile product cardmobile_layout

Default: compact-mobile · Options: Compact, Large

Empty product titleempty_product_title

Product card

Choose the information, actions and commercial signals visible on the integrated product page.

Show priceshow_price

Default: enabled

Number of media loadedmedia_limit

Default: 4 · Range: 1–8

Show media navigationenable_media_slider

Default: enabled

Video in cardvideo_mode

Default: poster · Options: Cover image, Silent autoplay

Choose products before adding the lookenable_product_selection

Customers choose the variant on each product card, then add the complete look with the section button. Individual product add-to-cart buttons are replaced by Choose and Add to this value.

Default: enabled

Choose button labelselection_choose_label

Default: Choose

Variant confirmation labelselection_confirm_label

Default: Add to this value

Show quick purchaseshow_quick_add

Default: enabled

Show quantityshow_quantity_selector

Default: disabled

Text to display optionsquick_add_label

Add to cart textconfirm_add_label

Text while addingadding_label

Product text unavailablesold_out_label

Activate global guideenable_size_guide

Default: enabled

Iconsize_guide_icon

Default: question · Options: Question, Measurements, Care, Materials, Gift, Sparkle, Search, Account, Chat, Bag, Heart, View, More, Check, Star, Quiz, Look

Guide contentsize_guide_label

Show available reviewsshow_reviews

Default: enabled

Show material badgeshow_material_badge

Default: enabled

Show limited stockshow_low_stock

Default: enabled

Limited stock thresholdlow_stock_threshold

Default: 4 · Range: 1–10

Blur glass of hotspotsglass_blur

Default: 16 · Range: 0–40px

Actions and messages

Customize bulk add to cart and confirmation or error messages.

Show a lookbook discountenable_discount

Create the matching automatic discount in Shopify, or add the optional Discount code block. The percentage below controls the displayed saving and must match the actual Shopify discount.

Default: disabled

Discount percentagediscount_percent

Enter a value from 1 to 100, or connect a product metafield of type Integer or Decimal. This value controls the display; Shopify remains responsible for applying the actual discount.

Default: 20

Savings displaydiscount_display

Default: both · Options: Percentage and amount, Percentage only, Amount only, Do not show savings

Cart button textadd_all_label

Text after successful additionadded_label

Text in case of errorerror_label

Section palette

Applies a consistent palette to the background, text, and buttons in this section.

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

Available blocks

Shoppable itemhotspot

Limit: 12

Add this block only when it provides useful information to the journey.

Discount codepromotion

Limit: 1

Add this block only when it provides useful information to the journey.

CHECKS

Before publishing

✓
Content remains readable in every color scheme.
✓
Labels match the storefront language.
✓
Displayed promotions match Shopify rules.
✓
Interactions remain accessible by keyboard and touch.