The Lookbook section lets you display a large lifestyle image with clickable hotspots. You can use it to highlight products, explain details in an image, or guide customers to featured items in a visual layout.
In Concept, the Lookbook section supports two hotspot block types:
| Block type | Purpose |
|---|---|
| Product | Adds a product hotspot that links to a product or opens quick view when quick view is enabled. |
| Content | Adds an informational hotspot with text, icon, and an optional link or drawer. |
The section supports up to 6 hotspot blocks.
How to Set Up the Lookbook Section in Concept
Steps:
Add the Lookbook section
-
From your Shopify admin, open Online Store > Themes.
-
Click Customize on your Concept theme.
-
Open the template where you want to display the lookbook.
-
Click Add section.
-
Select Lookbook.
-
Click Save.
After adding the section, you can upload the lookbook image, add hotspot blocks, and position each hotspot on the image.
Add the lookbook image
-
Open the Lookbook section in the theme editor.
-
In Image, select the main image for desktop.
-
In Mobile image, select a separate image for mobile if needed.
-
Use a mobile image when the desktop image is too wide or the hotspots need a better mobile layout.
-
Click Save.
The section uses the selected image as the main visual area. If a mobile image is added, the mobile image will replace the desktop image on smaller screens.
Add a Product hotspot
-
Inside the Lookbook section, click Add block.
-
Select Product.
-
Choose the product you want to highlight.
-
Use Horizontal position and Vertical position to place the hotspot on the desktop image.
-
Use the mobile position settings to adjust the hotspot position on mobile.
-
Choose a hotspot color if needed.
-
Click Save.
When customers interact with a product hotspot, the hotspot can show product information such as product title, image, and price on desktop.
If Product quick view is enabled in the theme settings, clicking the hotspot can open the product quick view drawer. If quick view is disabled, the hotspot links directly to the product page.
Add a Content hotspot
-
Inside the Lookbook section, click Add block.
-
Select Content.
-
Add a heading for the hotspot.
-
Add text content if you want to explain a feature, material, detail, or promotion.
-
Select a built-in icon, or upload a custom icon image.
-
Add a link if you want the hotspot to open another page.
-
Leave the link blank if you want the content to open in a drawer.
-
Use Horizontal position and Vertical position to place the hotspot on the desktop image.
-
Use the mobile position settings to adjust the hotspot position on mobile.
-
Click Save.
Content hotspots are useful for explaining non-product details inside the image, such as fabric information, feature callouts, size notes, or campaign messaging.
Position hotspots on desktop and mobile
-
Each hotspot has separate desktop and mobile position controls.
-
Use the desktop Horizontal position and Vertical position settings to place the hotspot on the main image.
-
Use the mobile Horizontal position and Vertical position settings to place the hotspot on the mobile image.
-
Preview the section on both desktop and mobile before publishing.
-
Adjust the hotspot position if the image crop changes between screen sizes.
This is important when the desktop and mobile images have different proportions or show different parts of the same scene.
Configure the heading and button
-
Open the Lookbook section settings.
-
Add a heading if you want to display title text with the section.
-
Add a subheading or description if needed.
-
Choose the heading size and alignment.
-
Use Heading position if you want the heading to appear over the image on desktop.
-
Add a button label and button link if you want to include a call-to-action.
-
Enable button icon if you want an arrow icon to appear inside the button.
-
Click Save.
If Heading position is set to None, the heading appears above the lookbook image. If a position is selected, the heading can appear as overlay content on the image for desktop.
Configure colors and overlay
-
Open the Lookbook section settings.
-
Adjust the text, background, highlight, and button colors if needed.
-
Use Overlay color to add a color overlay above the lookbook image.
-
Adjust Overlay opacity to make the image darker or lighter behind the heading content.
-
Use the hotspot color setting inside each hotspot block to control the hotspot color.
-
Click Save.
Overlay settings are most useful when the heading is placed over the image and needs stronger contrast.
Adjust section layout
-
Open the Lookbook section settings.
-
Adjust the top and bottom padding.
-
Enable Show section divider if you want a divider line around the section.
-
Enable Make section full width if you want the lookbook image to span the full browser width.
-
Enable Make section rounded if you want rounded section styling.
-
Click Save.
Use the layout settings to match the lookbook with the surrounding sections on the page.
Lookbook behavior
- The section displays one main lookbook image.
- A separate mobile image can be used for smaller screens.
- Each hotspot can have its own desktop and mobile position.
- Product hotspots can link to product pages or open quick view.
- Content hotspots can link to a page or open content in a drawer.
- Desktop hotspots can show hover content with title, price, text, icon, or preview information.
- The section can include up to 6 hotspot blocks.
- Overlay and color settings help improve readability when heading content appears over the image.
Troubleshooting
If the Lookbook section does not appear, make sure the section has been added to the correct template.
If the image does not appear, make sure an image is selected in the Image setting.
If the mobile layout does not look correct, add a Mobile image and adjust the mobile hotspot positions.
If a product hotspot does not show product information, make sure a product is selected in the Product block.
If clicking a product hotspot opens the product page instead of quick view, check whether Product quick view is enabled in the theme settings.
If a content hotspot does not open a drawer, make sure the Link setting is blank. When a link is added, the hotspot works as a link instead of opening a drawer.
If hotspots appear in the wrong place, adjust the horizontal and vertical position settings for desktop and mobile separately.
If the heading is hard to read over the image, adjust the overlay color, overlay opacity, or text color settings.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
بانٹیں:
How to Set Up the Portfolio Section in Concept