A set of custom Shopify theme sections built on the Dawn theme, written in Liquid with vanilla JS and CSS (no app, no framework). Built to reproduce a premium apparel product experience inside a standard Shopify theme.
Adapted from a real build. Store handle, brand name, and brand CDN image URLs have been removed or replaced with placeholders. The custom sections are the deliverable.
| File | What it does |
|---|---|
snippets/pack-selector.liquid (+ assets/pack-selector.{js,css}) |
Multi-pack / quantity-break selector. Lets a customer pick a bundle size (e.g. 1 / 3 / 6 pack) with per-pack pricing and savings, then maps the choice to the correct variant. |
sections/best-sellers-carousel.liquid (+ assets/best-sellers-carousel.{js,css}) |
Responsive best-sellers carousel with drag/scroll, snap points, and add-to-cart per card. |
sections/product-family-cards.liquid (+ assets/product-family-cards.{js,css}) |
Product-family navigation cards for cross-selling related fits/styles from the product page. |
sections/product-info-section.liquid (+ snippets/product-gallery.liquid, assets/product-info-section.{js,css}) |
Full custom product-information layout: gallery + variant/pack selection + info blocks, schema-configurable from the theme editor. |
- Native Shopify sections, fully configurable from the theme customizer via
{% schema %}settings (no hardcoded content where it can be a setting). - Vanilla JS - no jQuery, no theme app extensions, no external dependencies. Drops into Dawn (or any Online Store 2.0 theme) by copying files and adding the section.
- Variant-aware pack/quantity logic that resolves customer selections to real Shopify variants.
- Copy the matching files into your theme's
sections/,snippets/, andassets/folders. - Add the section to a template from the theme editor (or reference the snippet/section in your Liquid).
- Configure via the section settings in the customizer.
Shopify · Liquid · Dawn / Online Store 2.0 · vanilla JavaScript · CSS