Pebble Theme
Pebble Theme
Theme Sections

Shop the look

2 min read
image

Showcase a complete look by tagging products within an image, allowing customers to shop each item directly.

How to add a Shop the look section to your Shopify store

  1. In the theme editor (Customize), click Add section.
  2. Select Shop the look section.
  3. Make necessary changes.
  4. Save.

How to customize the Shop the look section

The Shop the look section consists of three main blocks: Header, Banner, and Hotspot.

image

Use the Header block to create and customize the section’s heading and introductory content.

SettingDescription
AlignmentSet the header alignment: left, center, or right.
DevicesSwitch between desktop and mobile padding settings.
BottomAdjust the spacing below the header.

πŸ“¦ Nested dynamic blocks

  • Heading – Add a main title
  • Subheading – Provide supporting text above or below the heading
  • Text – Include additional descriptions or details
  • Image – Display an image or icon
  • Button – Add a call-to-action
πŸ“ Learn more: Basic
image

Configure the main image displayed in the section.

SettingDescription
ImageSelect the banner image.
Image mobileUpload a separate image optimized for mobile devices.
Aspect ratioAdjust the image ratio for desktop display.
Aspect ratio mobileSet a different image ratio for mobile display.
Corner radiusControl the roundness of the image corners.
image

Add interactive hotspots to highlight products or key elements within an image.

SettingDescription
LabelEnter the text displayed for the hotspot.
Offset topAdjust the vertical position of the hotspot.
Offset leftAdjust the horizontal position of the hotspot.
Offset top mobileSet the vertical position of the hotspot on mobile devices.
Offset left mobileSet the horizontal position of the hotspot on mobile devices.

πŸ“¦ Nested dynamic blocks

  • Image – Display the associated product or visual
  • Text – Add product name or description
  • Icon list – Highlight key features or benefits. Learn more: Basic
  • Button – Add a call-to-action for the hotspot

Learn more:

Basic
Last updated