The Shop the look section displays a lifestyle image with clickable product hotspots and matching product cards. Customers can explore the featured products directly from the image.
Demo Usage
You can see the section on these official Be Yours demo homepages:
| Demo | Page | Where to find it |
|---|---|---|
| Fashion | Homepage | Shop the Look, below Testimonials |
| Clothing | Homepage | Shop the Look, below Shop by Category |
| Peace | Homepage | Shop The Look, above Lookbook |
Steps:
1. Add the Shop the Look Section
- From Shopify admin, go to Online Store > Themes and click Customize.
- Open the page template where you want to display the section.
- Click Add section > Shop the look.
- Upload the main Image and add Product blocks.
- Click Save.
2. Configure the Section Layout
| Setting | Description |
|---|---|
| Image | Main lifestyle image containing the featured products. |
| Desktop layout | Choose Image first or Image second. |
| Desktop content position | Position the product-card area at the Top, Middle, or Bottom. |
| Desktop content alignment | Align product content Left, Center, or Right. |
| Mobile content alignment | Align product content on mobile. |
| Make section full width | Extend the section across the page width. |
| Show section divider | Add a divider above the section. |
Note: On mobile, the image appears first regardless of the desktop layout setting.
3. Add Products and Position Hotspots
Each Product block connects a product to a hotspot on the main image. You can add up to 6 Product blocks.
- In the Shop the look section, click Add block > Product.
- Choose a Product.
- Set the hotspot Color.
- Adjust Horizontal position to move the hotspot left or right.
- Adjust Vertical position to move the hotspot up or down.
- Repeat for the remaining products, then click Save.
| Hotspot setting | Description |
|---|---|
| Product | Product linked to the hotspot and product card. |
| Color | Hotspot color. |
| Horizontal position | Position across the image, from 5% to 95%. |
| Vertical position | Position down the image, from 5% to 95%. |
Place each hotspot over the corresponding product in the image.
4. Configure Product Cards
The section displays matching product cards alongside the image.
| Setting | Description |
|---|---|
| Image ratio | Adapt to image, Square, Portrait, Landscape, or Wide. |
| Image focal point | Choose which part of the product image remains in view. |
| Zoom image to fill space | Fill the product image area when using a fixed image ratio. |
| Show second image on hover | Show an alternate product image on hover. |
| Show vendor | Display the product vendor. |
| Show product rating | Display ratings when rating data is available. |
| Enable quick add button | Show the quick-add action on product cards. |
| Enable quick view | Allow customers to open Quick View. |
| Enable color swatches | Show product color swatches when configured. |
| Enable countdown | Show product countdown information when configured. |
| Show product highlights | Display product specs from the theme.highlights metafield. |
Quick View: When Quick View is enabled both in the section and the theme settings, clicking a product hotspot can open the product's Quick View. Otherwise, the hotspot links to the product page.
5. Configure the Heading and Highlight
| Setting | Description |
|---|---|
| Heading | Add the section title. |
| Heading size | Small, Medium, or Large. |
| Heading alignment | Left, Center, or Right. |
| Heading tag | Choose the heading tag. |
| Enable highlight | Apply highlighting to italic text in the heading. |
| Highlight style | Choose the highlight effect. |
| Highlight | Set the highlight color. |
To highlight part of the heading, select that text in the editor and click the italic (I) button. Then enable Enable highlight and choose a Highlight style.
6. Adjust Spacing
Use Top padding and Bottom padding to adjust the spacing around the section. Enable Show section divider if you want a visual separator from the section above.
7. Notes and Troubleshooting
- Add a main Image and select a product in each Product block for a complete shoppable display.
- A maximum of 6 products can be linked in one section.
- If a hotspot is misplaced, adjust its Horizontal position and Vertical position.
- If Quick View does not open, check Enable quick view in the section and the theme settings.
- If product highlights do not appear, enable Show product highlights and make sure the product has the
theme.highlightsmetafield populated. - If swatches, ratings, or countdowns do not display, check the corresponding product data and settings.
- Product cards may show placeholders when a block has no product selected.
If you encounter any issues or need additional help with your Be Yours theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
शेयर करना:
How to Set Up the Reveal Banner Section in Be Yours
How to Set Up the Tab Collage Section in Be Yours