Seventh > Cards > Shop the look card

Shop the look card

The Shop the look card block displays an image or video with interactive hotspots. Use it to highlight products or add informational tooltips directly on the media.

What it does

This block displays:

  • Media (image or video)
  • Hotspots for products or text
  • Optional button overlay
  • Card styling options

Block Settings Explained

Media

Image

  • Background image for the card.

Video

  • Background video for the card (overrides image if both are set).

Media overlay

  • Color overlay on top of the media.

Media aspect ratio

  • Controls the display ratio (natural or fixed ratios).

Card button

Label

  • Text shown on the optional button.

Position

  • Button placement (top-left, top-right, bottom-left, bottom-right).

Link

  • URL for the button.

Open in new tab

  • Opens the button link in a new tab.

Card Style

Padding

  • Sets the card’s padding (around the card).

Add padding to media

  • Adds padding around inner media (image or video) blocks. Doesn't refer to card background media.

Corner radius

  • Controls corner rounding (only for the main card, not the inner blocks).

Color scheme

  • Selects the card color scheme.

Hotspot blocks

Product Hotspot

Adds a clickable hotspot linked to a product.

Text hotspot

Adds a hotspot with custom text content.



Hotspot settings

Vertical position

  • Position in percentages on the Y axis (0 - 100%)

Horizontal position

  • Position in percentages on the X axis (0 - 100%

Tooltip position

  • Where to open the tooltip in relationship to the hotspot.
  • Try to make the tooltip open (somehow) inside the card, in order to prevent overflowing issues on smaller devices.

Color scheme

  • Set a color scheme for both the hotspot and the tooltip (along with it's inner content).

Common use cases

Complete outfit or bundle showcase

Display a styled image and link multiple products directly from the same visual.

Editorial product stories

Combine lifestyle imagery with interactive product hotspots for a magazine-style layout.

Room or scene inspiration

Show interiors, desks, or environments with clickable product placements.

Feature callouts

Use text hotspots to explain details, materials, or design choices directly on the image.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.