Collection list

A scrolling row of collection cards that sends people into your categories.

What it’s for. Pointing shoppers at whole collections, not single products. Each card links to a collection page like “Magic” or “Sealed,” so people land on a full category instead of one item. Use this when you want browsing lanes; use featured collection when you want to show off actual products with prices.

When to use it. Anywhere you want to break the store into clear paths, usually high on the homepage. Great as a “shop by game” or “shop by category” row right under the hero.

Ways to use it

• Shop by game — Magic, Pokemon, Yu-Gi-Oh!, Lorcana, each linking to that game’s collection.
• Shop by type — Singles, Sealed, Accessories, Supplies as top-level navigation.
• Seasonal lanes — New releases, Preorders, Clearance for quick browsing.

Tips

• Cards use your collection’s featured image. If a collection has no image, it falls back to a plain placeholder, so set an image on every collection you list.
• Card titles and product counts sit in an overlay on top of the image, with a fade behind them for readability. Pick collection images that read well with text over the bottom.
• Cards are shaped like a TCG card (tall, 63:88). Wide or square art gets cropped to fit.
• Turn off product count if a collection’s number looks thin (a “Lorcana: 4 products” card undersells it).
• Arrows appear on hover to scroll the row; they’re hidden on phones, where people just swipe. The whole row scrolls sideways no matter how many collections you add.
• Auto-rotate is off by default. If you turn it on, it pauses when someone hovers or tabs into the row.

Settings

Was this page helpful?

Spotted something wrong, or want to suggest an improvement? Email support → — your message goes straight to engineering.