Product Store New
File:
sections/collection-product-store.liquidTemplates:
collection.product-store.json
Description
Collection Product Store
Displays a curated product store view with a hero banner, sidebar filters, and a product grid. Shows a hand-picked “store” layout by default and switches to a paginated filtered grid when URL parameters are present.
Features:
- Hero banner with collection image and description overlay
- Sidebar filter panel using collection-filters snippet
- Curated “store” view with product callout rows and category image grids
- Automatic switch to filtered/paginated product grid when filters are active
- Pagination support (12 products per page)
- Responsive grid layout (1 column mobile, 3 columns on md+)
Settings:
- masterlist (textarea) — Comma-separated tag list for filter categories
- typeMasterlist (textarea) — Comma-separated type list for type filters
Blocks:
- products_callout: A row of up to 3 hand-picked products with a title.
- title (text) — Row heading
- product1, product2, product3 (product) — Individual product picks Limit: 4 blocks maximum
- category: A grid of up to 6 image links for browsing categories.
- title (text) — Category section heading
- image1..image6 (image_picker) — Category images
- url1..url6 (url) — Category link URLs Limit: 2 blocks maximum
Snippets Used:
- collection-filters — Sidebar filter UI
- product-list-item — Individual product card rendering
Dependencies:
- Tailwind CSS for utility classes
- Inline JavaScript for toggling between store and search-grid views
Tailwind Status: Full All layout and styling uses Tailwind utility classes.
Settings
| ID | Type | Label | Default | Info |
|---|---|---|---|---|
| “ | header | This list controls what categorys are allowed on the filter. Note: the tag still needs to be added to product. | ||
masterlist | textarea | Master List | ||
typeMasterlist | textarea | Type List |
Blocks
Product Callout
- Type:
products_callout - Limit: 4
| ID | Type | Label | Default |
|---|---|---|---|
title | text | Title | |
product1 | product | Product 1 | |
product2 | product | Product 2 | |
product3 | product | Product 3 |
Category
- Type:
category - Limit: 2
| ID | Type | Label | Default |
|---|---|---|---|
title | text | Title | |
| “ | header | ||
image1 | image_picker | Image | |
url1 | url | Url | |
| “ | header | ||
image2 | image_picker | Image | |
url2 | url | Url | |
| “ | header | ||
image3 | image_picker | Image | |
url3 | url | Url | |
| “ | header | ||
image4 | image_picker | Image | |
url4 | url | Url | |
| “ | header | ||
image5 | image_picker | Image | |
url5 | url | Url | |
| “ | header | ||
image6 | image_picker | Image | |
url6 | url | Url |
Presets
- Product Store (Category: Collection)
Usage
This section can be added via the Shopify theme editor.
{% section 'collection-product-store' %}