Reference

Simple Bundles Design System

Colors, typography, buttons, layout, and components used across the site.

Colors

Brand and neutral palette.

sb-red

black

neutral-300

neutral-200

neutral-50

slate-150

white

Typography

Font: Futura PT (primary), Roboto Mono (code/highlights).

Label

Header 1 — 60px

Header 2 — 48px

Header 3 — 30px

Header 4 — 24px

Header 5 — 20px

Header 6 — 18px

Body text

p-lg — Large body text

p-md — Medium body text

p-sm — Small body text

p-xs — Extra small text

Handlebar labels

handlebar-red handlebar-black handlebar-white

Highlights: highlight-gray and highlight-blue

Buttons

Button variants. Classes: btn, btn-black, btn-white, btn-outline, btn-outline-white, btn-ghost.

Black White Outline Ghost

Outline white

Layout & Grid

Container max-width 960px. Site grid: 4 cols (mobile), 12 cols (md+). Gaps: gap-x-4/8/10, gap-y-8.

col-span-4

Spacing

site-block: p-4, py-16, gap-y-16. Tailwind spacing scale (4, 8, 12, 16…). Custom: 7.5 (30px), 15 (60px).

4

8

12

16

Lists

checkmark-list and rightarrow-list.

checkmark-list

First item
Second item
Third item

rightarrow-list

First item
Second item

Cards & Components

Reusable partials for buckets, cards, CTA, FAQ, and more.

bucket

Single bucket with header and content. Often used in buckets-3.

Bucket title

Bucket content goes here. Supports headerSize: large, medium, small.

buckets-3

Three buckets in a row. Params: bucket1Header, bucket1Content, bucket1HeaderSize (and 2, 3).

First bucket

Content for the first bucket.

Second bucket

Content for the second bucket.

Third bucket

Content for the third bucket.

block-promo

Promo block with heading, description, button, and image.

card-integration

Integration partner card. Params: title, image, description, link_url, tag1, tag2, tag3.

Klaviyo

Sync bundled product data seamlessly and trigger personalized campaigns.

Marketing

card-video

Video card with embed, header, and description; whole card links to YouTube (embed stays interactive).

Getting Started with Simple Bundles 2.0

Build Mix-and-Match, Multipack, Fixed Bundles on Shopify.

cta

Call-to-action block. Params: header, description, button_url, button_label, image_src (optional).

The easiest way to grow AOV

Join 25,000+ Shopify merchants already using Simple Bundles to drive their growth.

Try Simple Bundles free

faq-item

Expandable FAQ item. Params: question, answer. Wrap in flex flex-col gap-8 for spacing.

How does Simple Bundles sync inventory with Shopify?

When a bundle is sold, the stock levels for each item within the bundle are automatically adjusted. This ensures accurate product availability across all channels, helping you avoid overselling.

What types of product bundles can I create?

Simple Bundles allows for the creation of mix-and-match bundles, fixed bundles, subscription bundles, BOGO bundles, volume discounts, wholesale B2B multipacks, and more.

Post item

Post list item structure (from posts-loop). Rendered via #get in real usage.

Image

Post title

Post excerpt appears here when show_excerpt is enabled.

Author name · MMM DD, YYYY

pricing-card

Pricing tier card with features and CTA.

Starter

For Shopify Basic

Unlimited bundles & orders
POS integration
Free migration & import
Email support

$24 monthly

or $240 yearly and save 17%

Try for free

review-card

Testimonial with stars, content, and author.

Simple Bundles helped us increase AOV by 40%.

Acme Co, New York