A comprehensive, categorized library of Shopify sections and snippets. Copy what you need into your theme.
Library last updated: 2026-03-30
- Quick reference (by category)
- All sections & snippets
- Section Lab (all sections)
- Theme edits (Vogue)
- Folder structure
- Categories
- Source repositories
- Original sections (this repo)
- Plan and progress
- Authors & license
| Category | Section / Snippet | Source | Last updated |
|---|---|---|---|
| Carousels & Sliders | Marquee Products | bstroshek/marquee-section | 2025-02-14 |
| Fancy Slick Carousel | patrickbolle/shopify-snippets | 2025-02-14 | |
| Hero Slider (rocklss) | rocklss/shopify_section | 2025-02-14 | |
| Content & Layout | Double Block Section | patrickbolle/shopify-snippets | 2026-02-14 |
| Forms & Contact | Sectioned Contact Form | patrickbolle/shopify-snippets | 2026-02-14 |
| Snippets & Utilities | IP Redirection | patrickbolle/shopify-snippets | 2026-02-14 |
| Pagination With Numbers | patrickbolle/shopify-snippets | 2026-02-14 | |
| Tabbed Description | patrickbolle/shopify-snippets | 2026-02-14 | |
| Product & Collection | Collection Page Swatches | patrickbolle/shopify-snippets | 2026-02-14 |
| SL – Price Bubble Widget | Section Lab (paid) | 2026-02-16 | |
| SL – Icon List (Product Bullets) | Section Lab (paid) | 2026-02-18 | |
| SL – Payment Icons | Section Lab (paid) | 2026-02-18 | |
| SL – Bundle | Section Lab (this repo) | 2026-02-25 | |
| Scarcity Bar | Custom (this repo) | 2026-02-25 | |
| SL – How to Use | Section Lab (metaobjects) | 2026-02-27 | |
| SL – Frequently Bought Together | Section Lab (paid) | 2026-02-27 | |
| SL – Volume Discount | Section Lab (this repo) | 2026-02-28 | |
| SL – Active Ingredients | Section Lab (this repo) | 2026-03-07 | |
| SL – Highlights | Section Lab (this repo) | 2026-03-07 | |
| SL – Buy 3 Offer | Section Lab (this repo) | 2026-03-12 | |
| SL – Stacked Offers | Section Lab (this repo) | 2026-03-18 | |
| SL – Buy 2 Get 1 | Section Lab (this repo) | 2026-03-18 | |
| Product Card Label | this repo | 2026-02-25 | |
| Theme edits | Vogue theme edits | this repo | 2026-03-07 |
| Media & Gallery | Image Gallery (BoldizArt) | BoldizArt/Shopify-Image-Gallery | 2025-02-14 |
| Video / Media | SL - UGC Videos Carousel | Section Lab (this repo) | 2026-03-30 |
| SL - Native Video Slider | Section Lab (paid) | 2025-02-14 | |
| Media Slider Snap | Custom (video-section2) | 2025-02-14 | |
| Videos Slider (Mixed Media Carousel) | Custom (SS section) | 2025-02-14 | |
| Video Slider | Meetanshi blog | 2025-02-14 | |
| YouTube Section | prowebcoder/shopify-sections-youtube | 2025-02-14 | |
| Specialized | Timeline (rocklss) | rocklss/shopify_section | 2025-02-14 |
| Pricing Table (rocklss) | rocklss/shopify_section | 2025-02-14 | |
| FAQ (section + snippet) | Sections.Design (this repo) | 2025-02-24 | |
| Quiz | Sections.Design (this repo) | 2025-02-14 | |
| Tooltips | Sections.Design (this repo) | 2025-02-14 | |
| App Optimization | Sections.Design (this repo) | 2025-02-14 | |
| Navigation / Content | SL Story Navigation | Section Lab (paid) | 2025-02-14 |
| Promotional | SL Announcement Bar | Section Lab (paid) | 2025-02-14 |
| SL Delivery Countdown | Section Lab (paid) | 2025-02-14 | |
| Marketing | SL Face Proof Bubble | Section Lab (paid) | 2025-02-14 |
| SL Sales Nudge Widget | Section Lab (paid) | 2025-02-14 | |
| Maps & Local | Shop by State Map | bhoomikakanwarchouhan2104-cpu/shop-by-state-Map-Feature- | 2025-02-14 |
Every folder that contains .liquid section or snippet files. Sorted by last updated (oldest first, most recent at bottom). Each folder has a README with install steps and source.
| Section / Snippet | Description | Updated |
|---|---|---|
| App Optimization | Optimize ScriptTag-loaded apps (block or load on interaction). | 2026-02-14 |
| Collection Page Swatches | Color swatches on collection pages (snippet). | 2026-02-14 |
| Double Block Section | Two-block hero: 3/4 + 1/4 image layout. | 2026-02-14 |
| FAQ | Accessible FAQ with SEO FAQ schema. | 2026-02-14 |
| IP Redirection | Redirect by IP / geo (snippet). | 2026-02-14 |
| Marquee Products | Horizontal scrolling product marquee. | 2026-02-14 |
| Media Slider Snap | Video/media slider with snap scroll. | 2026-02-14 |
| Pagination With Numbers | Numbered pagination (snippet). | 2026-02-14 |
| Quiz | Product recommendation quiz section. | 2026-02-14 |
| Sectioned Contact Form | Drag-and-drop contact form builder. | 2026-02-14 |
| Tabbed Description | Product description in tabs by H6 (snippet). | 2026-02-14 |
| Tooltips | Product tooltips section. | 2026-02-14 |
| Video Slider | Horizontal video slider (Swiper.js). | 2026-02-14 |
| Videos Slider | Mixed media carousel (images + videos). | 2026-02-14 |
| SL – Announcement Bar | Top announcement bar. | 2026-02-16 |
| SL – Native Video Slider | Native video slider. | 2026-02-16 |
| SL – Price Bubble Widget | Price bubble / badge. | 2026-02-16 |
| SL – Story Navigation | Story-style navigation. | 2026-02-16 |
| SL – Delivery Countdown | Delivery countdown timer. | 2026-02-18 |
| SL – Face Proof Bubble | Social proof bubble. | 2026-02-18 |
| SL – Icon List | Product bullets / icon list. | 2026-02-18 |
| SL – Payment Icons | Payment method icons. | 2026-02-18 |
| SL – Scrolling Content | Horizontal scrolling marquee text. | 2026-02-24 |
| Product Card Label | On-card label from metafield (snippet). | 2026-02-25 |
| Scarcity Bar | "Only X left" urgency bar with progress. | 2026-02-25 |
| SL – Bundle | Bundle products grid + detail popups (Yves Rocher style). | 2026-02-25 |
| SL – Before And After | Before/after video or media. | 2026-02-26 |
| SL – Real Results | Real results / testimonials. | 2026-02-26 |
| SL – Frequently Bought Together | Product slider (recommendations or manual). | 2026-02-27 |
| SL – How to Use | Product "how to use" steps (metaobject or blocks). | 2026-02-27 |
| SL – Social Proof Video | Social proof video section. | 2026-02-27 |
| SL – UGC Videos Homepage | UGC videos + product strip (manual blocks, home page). | 2026-03-30 |
| SL – UGC Videos Carousel | UGC video + product carousel (manual blocks with AJAX add-to-cart). | 2026-03-30 |
| SL – Free Shipping Progress Bar | Cart free-shipping threshold progress bar. | 2026-02-28 |
| SL – Sales Nudge Widget | Sales nudge / urgency widget. | 2026-02-28 |
| SL – Volume Discount | Volume/quantity discount tiers (metaobject). | 2026-02-28 |
| SL – Active Ingredients | Product active botanical ingredients accordion + popup (Yves Rocher style). | 2026-03-07 |
| SL – Highlights | Product highlights accordion: icon + label, optional popup. | 2026-03-07 |
| SL – Buy 3 Offer | Product/cart offer card: tracks qualifying collection quantity, shows “add X more” + savings. | 2026-03-12 |
| SL – Stacked Offers | Combined promo card: repeating bundle deals + free delivery threshold. | 2026-03-18 |
| SL – Buy 2 Get 1 | Buy X Get 1 Free promo card with live cart progress bar; optional free delivery row. | 2026-03-18 |
| Theme edits (Vogue) | Product card (Yves Rocher), product-card-add-to-cart (FBT-style, sold-out), collection-list, product-gallery, locales, schema settings. | 2026-03-07 |
Theme-specific overrides for the Vogue theme. See theme edits/Vogue/README.md for install steps and file list (product card, product-card-add-to-cart, collection-list section, product-gallery, locales, schema-settings). Updated: 2026-03-07.
Section Lab sections live under Section Lab/. Each has a sections/ folder and often snippets/ and/or locales/. Sorted by last updated (oldest first, most recent at bottom).
| Section | Description | Updated |
|---|---|---|
| SL – Announcement Bar | Top announcement bar. | 2026-02-16 |
| SL – Native Video Slider | Native video slider. | 2026-02-16 |
| SL – Price Bubble Widget | Price bubble / badge. | 2026-02-16 |
| SL – Story Navigation | Story-style navigation. | 2026-02-16 |
| SL – Delivery Countdown | Delivery countdown timer. | 2026-02-18 |
| SL – Face Proof Bubble | Social proof bubble. | 2026-02-18 |
| SL – Icon List | Product bullets / icon list. | 2026-02-18 |
| SL – Payment Icons | Payment method icons. | 2026-02-18 |
| SL – Scrolling Content | Horizontal scrolling marquee text. | 2026-02-24 |
| SL – Bundle | Bundle products grid + detail popups (Yves Rocher style). | 2026-02-25 |
| SL – Before And After | Before/after video or media. | 2026-02-26 |
| SL – Real Results | Real results / testimonials. | 2026-02-26 |
| SL – Frequently Bought Together | Product slider (recommendations or manual). | 2026-02-27 |
| SL – How to Use | Product "how to use" steps (metaobject or blocks). | 2026-02-27 |
| SL – Social Proof Video | Social proof video section. | 2026-02-27 |
| SL – UGC Videos Homepage | UGC videos + product strip (manual blocks, home page). | 2026-03-30 |
| SL – UGC Videos Carousel | UGC video + product carousel (manual blocks with AJAX add-to-cart). | 2026-03-30 |
| SL – Free Shipping Progress Bar | Cart free-shipping threshold progress bar. | 2026-02-28 |
| SL – Sales Nudge Widget | Sales nudge / urgency widget. | 2026-02-28 |
| SL – Volume Discount | Volume/quantity discount tiers (metaobject). | 2026-02-28 |
| SL – Active Ingredients | Product active botanical ingredients accordion + popup (Yves Rocher style). | 2026-03-07 |
| SL – Highlights | Product highlights accordion: icon + label list, optional popup per item. | 2026-03-07 |
| SL – Buy 3 Offer | Product/cart offer card: qualifying collection quantity tracker with savings + progress. | 2026-03-12 |
| SL – Stacked Offers | Stacked incentives: repeating bundle deals + free delivery threshold in one card. | 2026-03-18 |
| SL – Buy 2 Get 1 | Buy X Get 1 Free promo card: collection-based cart tracker + confetti + free delivery row. | 2026-03-18 |
Each section or snippet group lives in its own folder:
SectionName/
├── sections/ # .liquid section files (if section)
├── snippets/ # .liquid snippets (if used)
├── assets/ # .js, .css (if used)
├── locales/ # en.default.json, ar.json (if translated)
└── README.md # Description, install steps, source, last updated
- Carousels & Sliders — Marquee, hero sliders, carousels
- Content & Layout — Double block, image/text, grids
- Forms & Contact — Contact form builders
- Snippets & Utilities — Tabbed description, pagination, IP redirect
- Product & Collection — Swatches, variants, catalog
- Media & Gallery — Image galleries, grid banners
- Product & Conversion — Price bubble, swatches, variants
- Navigation / Content — Story navigation, menus
- Promotional — Announcement bar, countdown
- Marketing — Sales nudge, social proof toasts
- Video — YouTube, video carousels
- Specialized — Timeline, pricing table, FAQ, quiz, tooltips, app optimization
- Maps & Local — Shop by state/region
- App Optimization — Optimize ScriptTag-loaded apps (block or load on interaction). Demo
- FAQ — Accessible FAQ with SEO FAQ schema. Includes a reusable
faq-itemsnippet for embedding FAQ items in any section. Demo - Tooltips — Product tooltips. Demo
- Quiz — Product recommendation quiz (type, tags, vendor, price, options). Demo
See PLAN.md for the build plan, repo mapping, and progress log.
- Mircea Piturca — Sections.Design (original sections)
- Sections from other repos are attributed in each section’s README and in the table above.
This project is licensed under the MIT License. Individual section sources may have different licenses; see each section’s README and the source repository.