Breadcrumbs, Divider & Image

Three small blocks for your product page: a breadcrumb trail, a divider line or space, and an image with an optional link.

---

These three blocks help you structure your product information. Breadcrumbs shows shoppers where they are in your store, Divider separates groups of blocks, and Image adds a picture such as a size chart, badge or promotion.

1. Our guide to set up these blocks:

Steps:

• In the theme editor, open a product page using the page selector at the top.

• In the Product information section, click Add block.

• Select Breadcrumbs, Divider or Image.

• Click Save.

Drag the block in the sidebar to place it where you want among the other blocks.

2. Breadcrumbs

The Breadcrumbs block shows a trail of links, such as Home / Collection / Product title. It has no settings.

• Home links to your home page.

• The collection is the one the shopper came from. If they opened the product directly, for example from search, the product's first collection is used. If the product isn't in any collection, the trail is Home / Product title.

• The product title is the last item and isn't a link.

You can add one Breadcrumbs block per product template. Place it at the top, above the Title block.

3. Divider

The Divider block adds a horizontal line or empty space between blocks. You can add as many as you need.

• Show line: Shows a thin line. Turn off to add empty space only.

• Line opacity: How strong the line is, 5–100%. Applies when the line is shown. The line uses the text color of the section's color scheme.

• Block padding

  • Top padding: Space above the line, 0–50px.

  • Bottom padding: Space below the line, 0–50px.

4. Image

The Image block shows an image, with an optional link, in your product information. You can add as many as you need.

• Display position: Product info / Media. With Media, the image appears below the product images on desktop (990px and wider). On smaller screens it stays in the product information area, in the block's position.

• Image: The image to show. Until you pick one, a placeholder image shows.

• Image width: Width of the image as a share of the column, 10–100%.

• Link: Optional. Makes the image clickable.

5. Tips

• Use a Divider with Show line off to add breathing room between the buy buttons and the details below them.

• Use the Image block for a size chart, a certification badge or a small promotional graphic. Add a Link to a page with more details.

• Keep images with text on them wide enough to read on mobile, for example 80–100%.