Every week on r/shopify and r/shopifydev, the same questions come up:
“Is there an app that shows a free shipping progress bar in the cart drawer?” “How do I track GA4 purchases after checkout.liquid was deprecated?” “Is there a way to display color swatches without installing yet another app?”
The answer to most of these is: yes, and you don’t need an app to do it. A well-written Liquid snippet or a small JavaScript file handles nearly everything merchants pay $8–$30/month for — with zero app overhead, zero data sharing with third-party vendors, and zero risk of an app update breaking your store at 2 AM on Black Friday.
We’ve been building these solutions for Shopify clients for years. We’ve now open-sourced 13 of the most commonly requested ones as a free GitHub repository — MIT licensed, OS 2.0 compatible, and designed to drop straight into Dawn, Sense, Refresh, and any other Online Store 2.0 theme.
Here’s a full breakdown of what’s in the collection and when you’d use each one.
The Repository
Everything is at github.com/aumlytics/shopify-liquid-snippets.
Each snippet lives in its own folder under snippets/ with:
- A
README.mdexplaining setup and configuration options - The
.liquidfile to drop into your theme’ssnippets/directory - Any
.jsfile that goes intoassets/ - Notes on compatibility and edge cases
To use any snippet, the general pattern is:
- Copy the
.liquidfile into your theme’ssnippets/folder {% render 'snippet-name' %}where you need it in a template- Copy any
.jsfile intoassets/and reference it with{{ 'snippet-name.js' | asset_url | script_tag }}
1. GA4 Purchase Event — Custom Pixel
The problem: Shopify deprecated checkout.liquid in August 2024 for all Shopify Plus stores, and the old way of firing GA4 purchase events via a <script> tag in the checkout template no longer works. Merchants who haven’t migrated are tracking zero purchase conversions in GA4.
What this snippet does: Implements a Shopify Custom Pixel that fires a GA4 purchase event with full ecommerce data — transaction ID, revenue, tax, shipping, items array with SKU/name/category/quantity/price — immediately after checkout completes. It works inside Shopify’s sandboxed pixel environment (no window, no document, no gtag directly) and handles multi-currency stores via presentmentMoney.
Complexity: ⭐⭐ — Requires setting up a Custom Pixel in your Shopify Admin (Admin → Settings → Customer events) and entering your GA4 Measurement ID. No theme code changes needed.
When you need it: Any store using GA4 directly (without GTM) that processes orders on Shopify’s checkout.
2. GTM via Custom Pixel + dataLayer Bridge
The problem: Google Tag Manager can’t be loaded directly in Shopify’s checkout or post-purchase pages using the standard GTM snippet. The sandboxed Custom Pixel environment doesn’t have access to window, so the standard GTM loader script fails silently.
What this snippet does: Loads GTM correctly inside the sandboxed environment and bridges checkout event data into the dataLayer — including purchase, begin_checkout, add_shipping_info, and add_payment_info events with full ecommerce item arrays. Your existing GA4 tags in GTM fire as expected.
Complexity: ⭐⭐⭐ — Requires a Custom Pixel for the GTM loader and a separate Customer Events configuration. The README walks through the exact pixel setup and which GTM trigger to use.
When you need it: Stores using GTM to manage GA4, Meta Pixel, TikTok Pixel, or other tags — this is the correct architecture for post-checkout.liquid Shopify stores.
3. Variant Metafield Display (Dynamic)
The problem: You have metafields on product variants — care instructions, materials, dimensions, or any variant-specific content — but they only update on page reload. Switching from a small to a large variant shows the metafields for whichever variant loaded first.
What this snippet does: Listens for Shopify’s native variant:change event (fired by OS 2.0 themes when the variant selector changes) and fetches updated metafield data for the selected variant via the Storefront API — no page reload, no flash of incorrect content.
Complexity: ⭐⭐ — Requires your metafield namespace/key to be configured in the snippet. The README includes the exact Storefront API query to use.
When you need it: Any product page with variant-specific metafields that need to update dynamically. Common for clothing (materials per colorway), supplements (nutritional info per size), and electronics (spec sheets per model).
4. AJAX Cart Drawer + Free Shipping Bar
The problem: This is the one merchants most frequently pay $15–$25/month for. A slide-out cart with a progress bar showing how close the customer is to free shipping — “Add £12 more for free shipping!” — consistently lifts average order value. Building this from scratch is one of the most tedious Shopify development tasks.
What this snippet does: A complete, self-contained cart drawer implementation with:
- Smooth slide-in/out animation
- Real-time cart item list with quantity controls and remove buttons
- Free shipping progress bar with configurable threshold
- Cart note field
- AJAX add-to-cart that opens the drawer automatically
- Works with Dawn’s existing cart AJAX API
Complexity: ⭐⭐⭐ — The most complex snippet in the set. Requires adding the drawer to your theme.liquid and updating your ATC button to trigger it. The README has the exact integration points.
When you need it: Any store that wants a cart drawer without adding an app. Particularly useful if you’re already paying for apps like CartHook or Slide Cart Drawer.
5. Sale Badge + Discount % on Product Cards
The problem: Shopify’s default sale badge just says “Sale” — it doesn’t tell the customer how much they’re saving. Showing “Save 30%” on a product card converts better than a generic tag, but calculating the percentage in Liquid trips up most merchants because compare_at_price math in Liquid is integer-only.
What this snippet does: Calculates the discount percentage from compare_at_price and price using Liquid’s integer math (multiplied before dividing to preserve accuracy), and renders a configurable badge — “Save 30%”, “30% OFF”, or a custom label — only on products where compare_at_price > price.
Complexity: ⭐ — Drop into your product-card.liquid snippet and render with {% render 'sale-badge', product: product %}.
When you need it: Any store running sales. Also useful for bundles or clearance sections where you want to make the saving explicit.
6. Sticky Add-to-Cart Bar
The problem: On mobile, the main “Add to Cart” button is often below the fold — buried after product images, variant selectors, and descriptions. A user who scrolls to read the description has to scroll back up to buy. That friction costs conversions.
What this snippet does: A sticky bar that appears at the bottom of the screen once the main ATC button has scrolled out of view (detected via IntersectionObserver), showing the product title, selected variant, price, and an ATC button that submits to the same cart endpoint. Disappears when the main button is back in view. No layout shift, no jank.
Complexity: ⭐⭐ — Add {% render 'sticky-atc' %} to your product template and link to the JS asset. The snippet reads the existing product form’s data attributes.
When you need it: Stores with long product pages. Especially impactful on mobile — this is the snippet that consistently moves the needle on mobile conversion rate.
7. Color Swatches + Variant Image Swap
The problem: The default Shopify variant selector is a dropdown. Dropdowns hide the color options and require an extra click to see what’s available. Color swatches — circular or square patches showing the actual color — are better UX, and they should swap the product images to show the selected colorway.
What this snippet does: Replaces the color option dropdown with clickable swatches. On click or hover, it updates the selected variant, swaps the product images to the variant’s associated media, and updates the URL without a page reload. Handles out-of-stock variants by dimming swatches with a strikethrough.
Complexity: ⭐⭐ — Replaces the color variant input in your product form. The README explains how to assign swatch images via metafields (for exact color matching) or fall back to CSS color values.
When you need it: Any apparel, home goods, or multi-colorway product store. This single snippet replaces several $10–$20/month Shopify swatch apps.
8. Back-in-Stock Email Capture
The problem: When a product is sold out, Shopify shows nothing — no “Notify me when available” button, no email capture. You’re leaving money on the table. Apps like Back in Stock cost $19–$29/month.
What this snippet does: Shows a “Notify me when available” form when the selected variant has zero inventory. The form stores the email and variant in a Shopify customer metafield (or posts to a simple endpoint you own). When stock is replenished, you can trigger an email from your ESP using the list.
Complexity: ⭐ — The simplest approach uses Shopify’s Customer Metafield API. The README includes the full endpoint setup and a basic Klaviyo/Mailchimp integration pattern.
When you need it: Any store that sells out regularly — fashion drops, limited editions, seasonal products. Capturing the intent prevents lost sales.
9. Recently Viewed Products
The problem: Recently viewed product carousels are table stakes for e-commerce UX — they reduce bounce rate on product pages and help returning visitors pick up where they left off. Most solutions require an app.
What this snippet does: Stores viewed product handles in localStorage (up to 6 products), then fetches product data via the Storefront API on subsequent pages to render a “Recently Viewed” carousel. No server calls on page load — the fetch only happens if localStorage contains viewed products.
Complexity: ⭐⭐ — Add to your product template. The snippet is self-contained; it writes to localStorage on product page views and reads on all pages.
When you need it: Any store with a broad catalogue where customers browse multiple products before buying. Particularly effective on fashion, home decor, and multi-category stores.
10. Countdown Timer (Metafield-driven)
The problem: Countdown timers for flash sales or shipping cutoffs add genuine urgency. But hardcoded timers either expire and keep showing “00:00:00” or require a developer to update the date for every promotion.
What this snippet does: Reads a deadline from a product or section metafield (ISO 8601 format — e.g., 2026-03-31T23:59:00Z), calculates the remaining time in JavaScript, and renders a live DD : HH : MM : SS countdown. When the timer expires, it shows a configurable “Offer ended” message or hides entirely. You change the deadline in the Shopify Admin without touching code.
Complexity: ⭐⭐ — Configure the metafield namespace/key in the snippet. One snippet works for product-level timers (flash sales) and section-level timers (sitewide promotions).
When you need it: Flash sales, pre-order windows, same-day shipping cutoffs, limited-time offer pages.
11. JSON-LD Schema (Product + Breadcrumb + Organization)
The problem: Shopify’s default themes include minimal schema markup. Without proper Product, BreadcrumbList, and Organization schema, you’re missing rich results in Google Search — star ratings, price ranges, availability badges — which meaningfully affect click-through rates.
What this snippet does: Generates three schema blocks per product page:
Productschema — name, description, image, brand, offers (price, availability, currency), SKU, GTIN (if metafield present), and aggregate rating (if reviews are available via Shopify’s native reviews)BreadcrumbListschema — derived from the current collection contextOrganizationschema — injected on all pages from your theme settings
Complexity: ⭐ — Drop into your product.json template layout and configure brand name / organization details once.
When you need it: Every Shopify store should have this. It’s a zero-downside SEO improvement that takes ten minutes to install.
12. Responsive Image with srcset
The problem: Shopify’s CDN can serve images at any width — image.jpg?width=400, image.jpg?width=800 etc. — but most themes either serve a single large image or implement srcset incorrectly, with sizes attributes that don’t match the actual CSS layout. The result: mobile devices download 1500px images for 375px screens. This tanks LCP (Largest Contentful Paint) scores.
What this snippet does: A correct <img> implementation with:
- Shopify CDN
srcsetat 375, 750, 900, 1100, 1400, and 1800px widths - Accurate
sizesattribute matching your theme’s grid layout (configurable for product cards vs. hero images vs. full-bleed) loading="lazy"on non-hero images,fetchpriority="high"on hero/LCP imageswidthandheightattributes to prevent layout shift
Complexity: ⭐ — Replace your existing <img> or {{ image | image_tag }} calls with {% render 'responsive-image', image: image, sizes: '...' %}.
When you need it: Any store that cares about Core Web Vitals. This snippet alone has moved stores from “Needs Improvement” to “Good” on LCP in PageSpeed Insights.
13. Infinite Scroll Collection Pages
The problem: Pagination is friction. “Next page” clicks reduce the number of products a customer sees before leaving. Infinite scroll — or a “Load More” button, which is better for SEO and accessibility — automatically fetches the next page as the user scrolls.
What this snippet does: Uses IntersectionObserver to detect when the user reaches the bottom of the current product grid, then fetches the next page of products via the Storefront API and appends them to the grid without a page reload. The URL updates via history.pushState so back-navigation works correctly. Configurable as either true infinite scroll or a “Load More” button (recommended for SEO).
Complexity: ⭐⭐ — Add the JS asset and a sentinel <div> at the bottom of your collection grid. Works with any product card structure since it fetches and appends raw HTML from the next paginated URL.
When you need it: Collections with more than 24 products, especially on mobile where pagination clicks are cumbersome. The “Load More” variant is the right default — true infinite scroll can hurt SEO by making paginated content harder to crawl.
Compatibility
All 13 snippets are tested against:
- Dawn (Shopify’s reference theme — all versions)
- Sense, Refresh, Crave, Craft, Horizon (Shopify free themes)
- Shopify 2025+ Liquid (no deprecated filters)
- Checkout Extensibility (post-August 2024 — the two pixel snippets handle this explicitly)
- Shopify Markets and multi-currency stores
Legacy themes (Debut, Brooklyn, Minimal) will mostly work but may need minor adjustments to integration points documented in each README.
What’s Coming Next
This is a living repo. Based on the most common questions we see on r/shopify and r/shopifydev, the next batch of snippets will cover:
- Shopify Bundles without an app — product grouping via metafields
- Custom checkout UI extension — consent checkbox, gift message, custom fields
- Klaviyo dataLayer integration — server-side events without the app embed
- GA4 scroll depth + video engagement events — custom pixel implementation
Star the repo to get notified when new snippets land: github.com/aumlytics/shopify-liquid-snippets
Need a Full Implementation?
Snippets handle the common cases. If you need a complete GA4 + GTM audit, a custom Shopify app, a complex analytics pipeline, or a full Checkout Extensibility migration — that’s the work we do for Shopify brands every day.
Book a free consultation with Aumlytics →
We’ll look at your current setup, identify what’s leaking data or conversions, and give you a straight answer on what’s worth fixing.