Featured shops
Featured shops shows a row of visual shortcuts to your collections — circular badges or square tiles with a cover image and a name. Shoppers tap a badge and land on that collection’s page.
What it does
Section titled “What it does”Use it where shoppers decide where to go next — under the hero on the home page, or before the footer. Each badge leads to one collection, so keep the names short: Food, Toys, Beds, Sale.
It is a navigation section: it shows collections you pick by hand, not products. To show products from one collection, use Featured collection instead.
Add it to a page
Section titled “Add it to a page”- In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
- Open the template where you want the section.
- Click Add section and choose Featured shops.
- Under the section, click Add block → Shop badge for each collection (up to 6).
- Pick a Collection in each block, then save.
Choose a style
Section titled “Choose a style”The Layout setting switches between three looks:
| Style | Look | Extra settings that appear |
|---|---|---|
| Circle badges (default) | Round badges in a row on a dark background | Badge shape |
| Square tiles | Square photo cards in a grid | Columns on desktop |
| Split | Badges on one side, title, text, and button on the other | Badge shape, Text, button |
Two more settings work in every style: Background (Light or Dark) and Hover effect (see below).
Set it up: quick start
Section titled “Set it up: quick start”- Add the section and keep the default Circle badges style.
- Add a Shop badge block, pick a Collection, and repeat for up to 6 collections.
- Type a Heading shoppers will understand, e.g. “Shop by category”.
- Save and preview — tap each badge to confirm it opens the right collection.
Settings
Section titled “Settings”Section settings
Section titled “Section settings”| Setting | Default | Options | What it does |
|---|---|---|---|
| Layout | Circle badges | Circle badges / Square tiles / Split | Switches the overall look |
| Background | Dark | Light / Dark | Card area behind the badges |
| Badge shape | Circle | Circle / Rounded / Square (1:1) | Shape of each badge. Circle badges and Split layouts only |
| Columns on desktop | 3 | 2–5, step 1 | How many tiles sit in one row. Square tiles layout only |
| Hover effect | Lift | None / Lift / Zoom image / Pop out | What a badge does when a shopper points at it (desktop with a mouse) |
| Subheading | Empty | Text | Small line above the heading |
| Heading | “Shop our favorites” | Text | Section title; leave empty for no title |
| Text | Empty | Text | Intro paragraph. Split layout only |
| First button label | Empty | Text | Shows a button in the Split layout |
| Link | Empty | URL | Where the button leads |
Blocks
Section titled “Blocks”Add up to 6 Shop badge blocks — one per collection.
| Block | Limit | What it adds |
|---|---|---|
| Shop badge | 6 | One collection link with a cover image and a name |
Shop badge settings
| Setting | Default | Options | What it does |
|---|---|---|---|
| Collection | Empty | Collection picker | Where the badge leads and, by default, which image it shows |
| Label | Empty | Text | Name on the badge. If left empty, the collection’s title is used |
| Cover image | Empty | Image picker | Optional photo that replaces the collection’s own image |
Images and content tips
Section titled “Images and content tips”- Badges look best with square-ish images around 800×800 px. The cover is cropped to the badge shape, so keep the subject centered.
- If a badge has no cover image and its collection has no image either, a placeholder graphic shows — upload a photo or pick a collection that has one.
- Keep labels to one or two words; long names wrap on small badges.
Good to know
Section titled “Good to know”- The badges link to collections, they don’t show products. Shoppers see the products after they tap through.
- Hover effects need a mouse. On touch screens badges simply respond to taps; the hover animation is skipped.
- The collection’s own image is the fallback. A badge without a Cover image borrows the collection image — change it in the collection settings if needed.
Example setups
Section titled “Example setups”Category shortcuts. Circle badges, 4 badges (Food / Toys / Beds / Sale), default dark background, Lift hover. Place under the hero on the home page.
Collection spotlight. Split layout, 3 badges on the left, a heading like “Four ways to spoil your pet”, short text, and a “Browse all” button linking to the catalog page.
Common questions
Section titled “Common questions”A badge shows a placeholder instead of a photo. The collection has no image and the block has no Cover image. Upload a Cover image in the block, or set an image on the collection itself.
The badge name is wrong. Check the block’s Label — an empty label falls back to the collection’s title, so either type the name you want or rename the collection.
My hover effect doesn’t show on my phone. Hover animations only run on devices with a mouse. On touch screens, badges respond to taps without the animation.