Joffre Ordinola Shopify Developer & E-commerce Specialist
|

Custom Section · Web Component · Liquid

A slot-based bundle builder that unlocks only when the right product count is met — no app required.

Build Your Own Bundle

Problem:

Products that naturally pair together had no bundling mechanism, leaving AOV on the table and forcing customers to navigate multiple product pages to assemble a set manually.

Solution:

A native Liquid section with a custom web component. Customers pick from a product grid while a sticky sidebar tracks their selections in real time, and the Add to Cart button only unlocks once the exact bundle size is met.

How it works:

The left panel renders products from a collection or curated list, each with a variant picker. The right sidebar pre-renders empty slots and fills them in real time via JavaScript, populating each slot with the selected product's image, title, variant, and price. The Add to Cart button stays disabled until the exact configured bundle count is met. Bundle size, columns, and color scheme are all manageable from the Theme Editor.

Tools:

  • Liquid
  • Web Components
  • JavaScript
  • Shopify Theme Editor

More projects

See all projects
Price Testing

Price Testing

PostHog-powered A/B framework that tests prices via metafields and injects discount codes at checkout.

Made-to-Order Configurator

Made-to-Order Configurator

A custom product configurator and Shopify app that recalculates prices on the server and creates a real checkout. No Shopify Plus required.