In the theme editor: CustomizeHome pageAdd sectionShop the look

Shop the look

A large photo with dots on the products in it. Tapping a dot shows the product, and it can go straight to the cart.

Place each dot by its position across and down the photo. Check on a phone that the dots still sit on the right items.

Settings

Lifestyle image: ImageA photo that shows the products. Place the dots in the blocks.
Phone image: ImageOptional. If empty, phones show the main image. Each dot has its own position for phones.
Image shape on desktop: Choice: Portrait (4:5), Square, Landscape (4:3), Wide (16:9), OriginalDefault: Portrait (4:5)Original: no cropping, so the dots stay exactly on the products.
Image shape on phones: Choice: Portrait (4:5), Square, OriginalDefault: Portrait (4:5)
Image side on desktop: Choice: Automatic: opposite the section above, First, LastDefault: Automatic: opposite the section aboveNext to the product list, on a computer. On phones the image is always below the heading. Automatic: when the section above also has an image beside text, the image goes on the other side, so consecutive sections alternate; otherwise it sits at the start (right, in Hebrew).

Quick add + button: On or offDefault: OnOn the card that opens from a dot. Opens quick view, or the product page when quick view is off.
Product list next to the image: On or offDefault: OnDesktop only. Clicking a row opens its dot. Off: the heading sits above the image.
List label: TextLeave empty to show the default label.
Hint below the image: On or offDefault: OnPhones only: "Tap a dot to see the product".
Dot color: Choice: Light, DarkDefault: LightLight for a dark photo, dark for a light photo.
Pulsing ring around the dots: On or offDefault: OnOnly while the section is on screen. Not shown to visitors who prefer reduced motion.

Each dot is a block: choose a product and place it in percent, separately for desktop and phones. A dot without a product is not shown in the store.

Settings every section sharesWindow, Scrolling, Spacing, Colors, Text styling

The window, scrolling, spacing and color settings work the same way in every section. Read how they work.

Attach: Choice: Separate window, Attached to the window above, Attached to the window below, Attached above and belowDefault: Separate window
Image corners: Choice: Rounded, SquareDefault: Rounded

Next section covers it on scroll: On or offDefault: OffScrolling down, this section stays in place under the header and the next section rises over it. Scrolling back reverses it. Off in the editor, for visitors who asked for reduced motion and on very short screens.

Custom spacing for this section: On or offDefault: OffOff: the section spacing from theme settings, under Layout. On: the values here, above and below this section. On phones most sections use 65% of them.
Space above: Slider, 0 to 120 pxDefault: 40 px
Space below: Slider, 0 to 120 pxDefault: 40 px
Content width: Choice: Narrow, Standard, Wide, Full widthDefault: Standard

Color scheme: Color schemeSame as the page scheme: the section sits on the page background. Another scheme gives the section its own background, as a card inside the frame. Custom colors below override the scheme.
Use custom colors for this section: On or offDefault: OffOverrides the color scheme. Empty fields follow the scheme.
Background: ColorDefault: #F1F1EF
Text: ColorEmpty: automatic. Light on a dark background, dark on a light one.
Background style: Choice: Flat color, Lit stageDefault: Flat colorLit stage: a soft light from above that fades toward the bottom, made from the section color, light or dark. On a dark color, text and buttons turn light on their own.
Light color: ColorThe soft light from the top center. Empty: white.

Custom text styling for this section: On or offDefault: OffOtherwise the section uses the theme styling. Shopify fonts do not include Hebrew, so you choose between styles that work in Hebrew.
Heading style: Choice: Theme default, Light, Bold, SerifDefault: Theme default
Heading size: Slider, 70 to 160 %Default: 100 %
Heading color: ColorEmpty: automatic, uses the section color (light on a dark background).
Text style: Choice: Theme default, Light, Bold, SerifDefault: Theme default
Text size: Slider, 70 to 160 %Default: 100 %
Text color: ColorEmpty: automatic, uses the section color (light on a dark background).

Blocks are the pieces inside the section. Add, remove and drag them in the editor to change the order.

Dot

From the left: Slider, 0 to 100 %Default: 50 %Percent of the image width, always from the left.
From the top: Slider, 0 to 100 %Default: 50 %Percent of the image height.

From the left: Slider, 0 to 100 %Default: 50 %Percent of the image width, always from the left.
From the top: Slider, 0 to 100 %Default: 50 %Percent of the image height.

Something here doesn’t match what you see in your editor? Tell us and we will fix the guide.