Category showcase
Category showcase pairs a list of category names with one large image or video per category. As shoppers scroll or hover, the active category changes and its media slides in. It is an editorial section: each item links where you choose.
How to set it up
Step 1: Add the section
- In the theme editor, open the home page and click Add section in the Template area.
- Choose Category Showcase. Drag it to where you want it on the page.
Step 2: Add categories
- Click Add block > Category item.
- Write the Category label, choose an image or Shopify-hosted video, and add a link.
- Optionally add a subheading, heading, description and button shown on the media.
Step 3: Choose the scroll effect
- Choose the Desktop scroll style (1) and Mobile scroll style: Wipe transition, Stacked overlap or Normal media scroll.
- Set the category alignment, position and text style, and turn on Show category numbers.
Step 4: Size the media
- Under Media (desktop) and Media (mobile), choose the height mode (adapt, viewport or fixed) and ratio.
Settings reference
Category Showcase
| Layout | |
|---|---|
| Swap media position | Options: Left, Right. |
| Category alignment | Options: Left, Center, Right. |
| Category position | Options: Left, Center, Right. |
| Category vertical position | Options: Bottom, Center, Top. |
| Category content background | Turns this on or off. |
| Category content color scheme | Colors from Theme settings > Colors. |
| Content padding | Slider. |
| Background size | Slider. |
| Category row gap | Slider. |
| Category column width | Slider. |
| Column gap | Slider. |
| Category text style | Options: Display, Page title, Section heading, Secondary heading, Subheading, Body. |
| Category text scale | Slider. |
| Make category font bolder | Turns this on or off. |
| Show category numbers | Turns this on or off. |
| Desktop scroll style | Options: Wipe transition, Stacked overlap, Normal media scroll. |
| Mobile scroll style | Options: Wipe transition, Stacked overlap, Normal media scroll. |
| Media (desktop) | |
| Media height mode | Options: Adapt, Viewport, Fixed. |
| Media ratio | Options: Square, Landscape 4:3, Landscape 16:9, Portrait 4:5, Portrait 3:4, Portrait 9:16. |
| Viewport height | Slider. |
| Fixed height | Slider. |
| Media (mobile) | |
| Media height mode | Options: Adapt, Viewport, Fixed. |
| Media ratio | Options: Square, Landscape 4:3, Landscape 16:9, Portrait 4:5, Portrait 3:4, Portrait 9:16. |
| Viewport height | Slider. |
| Fixed height | Slider. |
| Media appearance | |
| Media corner radius | Slider. |
| Media spacing | Slider. |
Full width, section layout, color scheme, spacing and mobile overrides work the same in every section: see Section layout and spacing. Headings, subheadings and descriptions: see Section headings and text.
How it works
- Videos stay muted and play only while their category is active and the section is on screen.
- With reduced motion turned on, the section uses normal media scroll.