Product Links Blocks
Product links blocks make editorial media shoppable. Use them to connect imagery or video to the products shown in that content.
Included Blocks
| Block | Use |
|---|---|
| Product link card | A reusable product link with product picker, optional custom link, image, price, and card/text-only styles. |
| Image with product links | An image media block with up to six product links positioned over or below the image. |
| Video with product links | A video media block with product links positioned over or below the video. |
Setup Order
- Select real productsAssign products to each link so product title, image, price, and destination are available.
- Use custom links only when neededAdd a custom link when the click should go to a campaign, collection, or external destination instead of the product page.
- Choose link styleUse card style when media needs product context, or text-only style when the image already makes the product obvious.
- Choose the product link actionKeep Open product page for normal navigation, or choose Open quick add so product-backed links open the product purchase modal.
- Place links safelyPosition links where they do not cover important image or video subject matter on desktop or mobile.
Image And Video Product Links
| Setting group | What to use it for |
|---|---|
| Media | Choose desktop/mobile images or uploaded/external videos. |
| Aspect ratio | Control media shape separately from the original asset where needed. |
| Overlay | Add a light overlay when links need contrast over busy media. |
| Product links | Place links bottom-left, bottom-right, top-left, top-right, center, or below media. |
| Product link action | Open selected products on their product page or in the quick-add modal. Custom URLs always open their assigned destination. |
| Link style | Switch between card and text-only presentation. |
| Product 1-6 | Assign products and optional custom links. |
Product Link Card
Use Product link card when a section or container already provides the media and the card is just the shoppable callout. It can show product image and price, or reduce to a text-only link.
QA Checklist
| State | What to confirm |
|---|---|
| Missing product | Empty product links do not create broken or misleading links. |
| Product page action | Product-backed links navigate to the selected product page. |
| Quick-add action | Product-backed links open the modal, support keyboard use, and return focus after closing. |
| Custom link | Custom destinations navigate normally even when the block uses Open quick add. |
| Card style | Product image, title, price, background, and hover colors remain legible. |
| Text-only style | Underline and hover treatment make the link discoverable. |
| Mobile media | Links do not cover faces, product details, captions, or video controls. |
| Video controls | Product links do not block native controls when controls are enabled. |