Shop by concern
Entry points organized by the problem a customer is trying to solve rather than by product category. Up to six concerns, each a richly configured block.
- Merchant-addable
- Yes
- Settings
- 27
- Block types
- 1
- Max blocks
- 6
- File
sections/concern-navigator.liquid
Used by default on: Home
Screenshots pending
Captures for Shop by concern at desktop and mobile widths are generated from a live store by
npm run shots. They appear here automatically once that has run.
When to use it
Home pages, when your customers shop by need rather than by product type.
Setting it up
- Add the section and write the heading and intro under Content.
- Add a Concern block per entry point, up to six. Each has 10 settings — label, description, image, and destination.
- Point each concern at a collection, or at a filtered collection URL.
- Set the treatment under Style.
Where the content comes from
Blocks own the concern framing. Destinations are Shopify collections.
Notes and cautions
- Use your customers' words, not your category names. "Dullness" outperforms "Exfoliants" because it is what the customer would actually say.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Content
Describes this group of links for screen reader users.
Style
Choose how multiple concerns display on mobile. This setting applies when the section has more than one concern.
Adds the card color scheme over part of each image to support text contrast. When off, use images that keep the card text readable.
Controls how far the shade extends across each image.
Fades the section in on scroll. Respects the theme animation setting and reduced motion.
Blocks
Blocks are added, reordered, duplicated, and removed inside the section. Each type has its own settings.
Concern concern
Destination
Card content
Leave blank to use the selected collection or page title.
Replaces the selected collection image. 4:5 aspect ratio recommended.