Hanging cards

ProContentv1.0.0

Introduce the people behind your brand on hang tags. Each tag hangs from a slim rail on a loop of string through its eyelet, tilted and gently swaying; hovering straightens and lifts it. A click or tap turns it over to a care-label back with their role and place, a short note, a short list, a staff pick with its price set large like a price tag and an Add to cart (a link to the product when it has options or is sold out), an email and a profile link, finished with a barcode and the tag's number. Use it for your team, your makers, your stockists or customer stories. More tags than fit scroll sideways along the rail.

Good for: Meet the team · Meet the makers · Staff picks

When to use it

Use it on an About page or your home page to introduce the people behind your brand: your team, your makers, your stockists or customer stories.

Faces before details. Each person hangs on a tag with a photo, a name and a role. Shoppers turn a tag over with a click or tap to read more, so the section stays short until someone is curious.
A product with every story. The back of a tag can hold a staff pick with its price and a button, so a recommendation from a real person is one click from the cart.
A way to get in touch. Add an email address and a link to a full profile, for stockists or customers who want to reach that person.

Set it up

Add the section

On your home page or a page template, choose Add section and pick SU: Hanging cards. It starts with four Tag blocks.

Fill in the front of each tag

Select a Tag block and add a Photo, a Name and a Role. These show on the front. Add another Tag block for each person, up to 8.

Fill in the back

Under Back of the card, add any of these. Empty fields are left out.

Location shows next to the role.
Short bio is a few sentences about the person.
List heading and List make a short list, one item per line. Only the first 3 lines show.
Staff pick is a product, shown with its price.
Email, plus a Link with its Link label, for example to a full profile page. They sit under Contact heading on the back (Let’s connect by default; leave it empty for no heading).

Check how the staff pick is bought

A staff pick with a single variant gets an add button on the tag. A product with several variants, or one that is sold out, gets an arrow that goes to its product page instead. Under Motion, After adding to cart chooses whether the cart opens or shoppers stay on the page.

Choose how many tags show at once

Under Cards, set Tags in view on desktop to 3, 4 or 5. More tags than that scroll sideways along the rail. You can also rename the labels printed on the tags, such as Label on the front, Label on the back, Flip button and Product heading on the back, or turn off Number the cards.

Set the motion

Turn off Tags sway gently for still tags, or Straighten and lift tags on hover to stop tags reacting to the mouse. Shoppers who prefer reduced motion always see still tags.

The back of a tag has limited room. Keep the bio to about three lines; longer content scrolls inside the tag.

Hanging cards: A card turned over to its care label. — A card turned over to its care label.

Try it

Open full page(opens in a new tab)

Live example with sample products. Links and checkout are turned off; Add to cart shows what shoppers would see.

Settings

In the theme editor, in the order you'll see them. Every section also has the heading and style settings.

Cards

Setting	What it does
Tags in view on desktopDropdown	More tags than this scroll sideways.Options: 3, 4, 5Default: 4
Label on the frontText	Default: Studio
Label on the backText	Default: Care label
Number the cardsCheckbox	Default: On
Flip buttonText	Default: Turn over
Product heading on the backText	Default: Staff pick
Contact heading on the backText	Default: Let's connect
Hint under the cardsText	Default: Tap a tag to turn it over

Motion

Setting	What it does
Tags sway gentlyCheckbox	Default: On
Straighten and lift tags on hoverCheckbox	Shoppers who prefer reduced motion see still tags.Default: On
After adding to cartDropdown	Options: Open the cart, Stay on the pageDefault: Stay on the page

Blocks go inside the section: use Add block, up to 8 in all, and drag them to change the order.

Block: Tag

Setting	What it does
PhotoImage
NameText	Default: Maya Bennett
RoleText	Default: Creative director
LocationText
Short bioMulti-line text
List headingText	Default: Favourite projects
ListMulti-line text	One item per line, up to 3.
Staff pickProduct	Shown with its price and an Add to cart button.
EmailText
Link labelText	Default: Full profile
LinkLink

Good to know

Up to 8 tags.
The back holds a short note (3 lines), up to 3 list items, one staff pick and one email and link; longer content scrolls inside the tag.
Without JavaScript the fronts show; flipping to the details needs JavaScript.

Accessibility: Each tag is a labelled region with a button that turns it over (with its expanded state); the hidden side is inert, focus moves to the shown side's button, Escape turns a tag back, and the staff pick has a labelled add button or product link. The sway and lift are off for shoppers who prefer reduced motion.

Speed: Tags render in Liquid with lazy, responsive images; the sway and hover are CSS, and a 1 KB script turns the tags.

Changelog

1.0.0: Initial release.