Shop the look
Shop the look shows outfits or scenes as a row of looks. Each look has an image or video and a list of products, so shoppers can buy the items in the look.
How to add it
- In the Theme Editor, open the template where you want the section.
- Select Add section, then choose Shop the look.
The package uses this section on the Product template and its two gallery variants.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Media ratio | • Adapt to image | Sets the shape of each outfit image or video: Adapt to image, Square, Portrait or Landscape. |
| Enable video autoplay | Videos are muted automatically to allow autoplay. |
Heading content
View all button link sets where the View all button goes.
| Setting | Options | Description |
|---|---|---|
| View all button link | Link used by the View all button when Heading alignment is Center. With left or right alignment the button follows the page's collection instead of this link. Only used when Show View all button is on. | |
| Subheading | Short line of text shown above the heading. | |
| Heading | Main title shown above the outfits. It is also the title of the drawer that opens from the Shop this look button, and a default title is used when this is empty. | |
| Description | Optional text shown under the heading. | |
| Heading size | • Large | Sets the size of the heading to Small, Medium or Large. |
| Heading alignment | • Left | Aligns the subheading, heading and description to the left, center or right. |
| Show View all button | Shows a View all button. With left or right heading alignment it sits beside the heading, and with center alignment it sits below the outfits. | |
| View all button label | Text on the View all button. Only used when Show View all button is on. |
Layout
| Setting | Options | Description |
|---|---|---|
| Maximum products | Limits how many products from an outfit are listed in its Shop this look drawer. | |
| Columns on desktop | Sets how many outfit cards sit side by side on desktop. Tablets show one fewer column when this is above 3. | |
| Column gap | • No gap | Sets the space between outfit cards: No gap, Small, Medium or Large. |
| Columns on mobile | Sets how many outfit cards show per row on mobile. A decimal value such as 1.2 lets part of the next card peek in, and the row then scrolls sideways. |
Carousel
Arrow position sets where the arrows sit: Default or Section header.
| Setting | Options | Description |
|---|---|---|
| Show arrows | Shows previous and next arrows on the outfit carousel. | |
| Arrow position | • Default | Places the arrows beside the outfit row (Default) or in the section header next to the heading. Only used when Show arrows is on. |
| Show pagination | Shows pagination dots under the outfit carousel. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how wide the section content is. Page width keeps it inside the standard content area, Wide stretches it further, and Full width runs edge to edge. |
| Top padding | Adds space above the section, in pixels. | |
| Bottom padding | Adds space below the section, in pixels. | |
| Show top border | Adds a border line along the top of the section. |
Blocks
Look (outfit)
One look. Choose Image or Video as the media type, then add the products shown with the look.
| Setting | Options | Description |
|---|---|---|
| Media type | • Image | Chooses whether this outfit card shows an image or a video. |
| Image | 1920px x 840px recommended | |
| Video | Video shown on this outfit card, played muted and on a loop. Only used when Media type is Video. | |
| Products | Products listed in the Shop this look drawer for this outfit. Shoppers can add each one to the cart or add them all at once. |
Notes
- Videos play muted when autoplay is on.
No comments yet