BETA— site is in trial. Features may change.
Live preview
Sample content from the Northwind shop. Your theme settings replace it.
Photograph is the picture, the title, the text, and the button.
Each Hotspot is a product, or a title and a price, placed with Horizontal position and Vertical position.
Advanced sets Pin icon (Plus, Dot, or Ring; default Plus), Open with (Click or Hover; default Click), and Pulse (on by default).
Photograph
Full-bleed lifestyle photo. Until you upload your own, a sample photograph fills the frame. Pins are a percentage of this picture.
Title
Eyebrow
Text
Button label
Button link
Also the card link for a hotspot that uses a title and price.
Accent
Fill on the button. Ink on the button stays charcoal.
Price
Price text on each card, and the short rule above the title.
Product
Fills the title, price, and link. The fields below are the fallback.
Title
Fallback title.
Price
{%- comment -%}
DotSection · Shop the Look
Online Store 2.0 section.
File: sections/shop-the-look.liquid
{%- endcomment -%}
<style>
.ds-look {
position: relative;
width: 100%;
background: #101014;
color: #fff;
overflow: hidden;
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.ds-look__stage {
position: relative;
width: 100%;The Liquid file appears here once this section is in your library.
Claim a free section now. A paid section opens after checkout.
4.5 out of 5 · 4 reviews
4.0
Sasha Nguyen · Oct 29, 2026, 2:52 AM
Quiet frame. The sale badge is the only magenta on the photo.
4.0
Leila Okonkwo · Oct 29, 2026, 2:52 AM
Used it on the lookbook. On my phone the card sits at the bottom.
5.0
Jonas Park · Oct 29, 2026, 2:52 AM
Imported cleanly. Moving a hotspot moved the card with it.
5.0
Mira Chen · Oct 29, 2026, 2:52 AM
The preset already looked finished. I only swapped the photograph.
Fallback price. Example: $48.
Note
One short line under the title.
Placement
Horizontal position
Distance from the left edge of the photograph.
Vertical position
Distance from the top edge of the photograph.
Card side
Auto opens the card on the left when the pin sits past the middle.
Open on load
Shows this card when the page loads. Turn on for one pin only.
Details
Thumbnail
Overrides the product photo on the card.
Compare-at price
Struck through beside a fallback price.
Sale badge
Example: -21%. A product on sale calculates its own badge.
Each Hotspot block is a pin. Set a product, or a title and price, then place it on the photograph.
Pin icon
Plus is a dark disc with a white plus. Dot is solid. Ring is an outline.
Open with
Hover opens on a mouse. Touch still taps. Escape, close, and a click outside dismiss.
Pulse
A soft black ripple on idle pins. It uses the pin fill.
Sale badge
Magenta fill. Text on the badge stays charcoal.
Pin fill
Dark fill with a white plus, so the mark stays visible on a pale photograph.
Shade
Darkens the top of the photograph so the title stays readable. 0 keeps the photo as shot.
Title alignment
Image description
Screen-reader description of the photograph.
Close label
Read by screen readers on the card’s close button.