Accessing Settings
Open MOD Bundles → Customization
Select Pack Builder from the sidebar
Edit settings and click Save
These are global settings (apply to all Pack Builders). For per-block settings in the Theme Customizer, see Theme Settings Reference.
Layout & Spacing
Container
Setting | Default | Description |
Max width | 1200px | Set to 3000px for no limit |
Padding (horizontal) | 0px | Left/right padding |
Padding top | 0px | — |
Padding bottom | 50px | Space for floating bar |
Product grid gap | 15px | Space between cards |
Mobile (< 768px)
Setting | Default |
Padding (horizontal) | 0px |
Padding top / bottom | 0px / 50px |
Product grid gap | 10px |
Desktop Layout
Setting | Default | Description |
Side-by-side layout | Off | Products left, pack controls in sticky sidebar right (992px+) |
Step Titles
Setting | Default |
Text alignment | Center |
Text color | #333333 |
Number circle background | #000000 |
Number text | #ffffff |
Font size (desktop) | 48px |
Font size (mobile) | 20px |
Margin top (desktop / mobile) | 60px / 30px |
Margin bottom (desktop / mobile) | 10px / 10px |
Pack Size Buttons
Layout
Setting | Default |
Alignment | Center |
Container max width | 600px |
Border radius | 8px |
Auto-upgrade pack size | Off |
Colors
State | Background | Text | Price | Per-Item | Compare |
Default | #ffffff | #333333 | #000000 | #666666 | #999999 |
Selected/Hover | #000000 | #ffffff | #ffffff | #cccccc | #cccccc |
Typography
Setting | Default |
Text font size | 20px |
Price font size | 30px |
Price line height | 1.5 |
Per-item font size | 14px |
Compare-at font size | 18px |
Discount Badge
Setting | Default |
Badge background | #e53935 |
Badge text | #ffffff |
Badge font size | 12px |
Badge bg (selected) | #ffffff |
Badge text (selected) | #000000 |
Badge position | Floating (top right) or Inline (below title) |
Product Card
Text Colors
Setting | Default |
Product name | #333333 |
Subtitle | #666666 |
Price | #000000 |
Compare-at price | #999999 |
Add to Pack Button
State | Background | Text | Border |
Default | #000000 | #ffffff | #000000 |
Hover | #333333 | #ffffff | — |
Disabled (full) | #cccccc | #888888 | — |
Setting | Default |
Font size | 12px |
Border radius | 4px |
Vertical padding | 8px |
Font family | inherit |
Letter spacing | 0px |
Uppercase | Off |
Added Item Indicator
Option | Description |
Default | Text like "Added" or "In pack: 2" |
Quantity selector | +/- buttons for quantity adjustment |
Quantity badge | Circular count badge |
Images
Setting | Default |
Image fit | Cover |
Aspect ratio | 1:1 (or 4:5) |
Image border radius | 0px |
Features
Setting | Default | Description |
Product subtitle metafield | (blank) | e.g., |
Show inline variant selection | Off | Variant options on cards |
Align buttons at bottom | Off | Even heights when cards vary |
Product Popup (Modal)
Overlay & Container
Setting | Default |
Overlay color | #000000 |
Overlay opacity | 0.5 |
Modal background | #ffffff |
Modal border | #e0e0e0 |
Modal border radius | 8px |
Center align modal | Off |
Text Colors
Setting | Default |
Product name | #333333 |
Price | #000000 |
Compare-at price | #999999 |
Option labels | #666666 |
Product Description
Setting | Default |
Show description | On |
Max height | 95px |
Font size | 13px |
Text color | #666666 |
Close Button & Images
Setting | Default |
Close color | #333333 |
Close hover bg | #f0f0f0 |
Image fit | Cover |
Aspect ratio | 1:1 |
Add to Cart Button
State | Background | Text |
Active | #000000 | #ffffff |
Active (hover) | #333333 | #ffffff |
Disabled | #888888 | #ffffff |
Setting | Default |
Border radius | 4px |
Vertical padding | 12px |
Uppercase | Off |
Show "Clear All" button | On |
Selected Items & Progress
Progress Bar
Setting | Default |
In progress | #FFC107 (yellow) |
Complete | #4CAF50 (green) |
Track background | #e0e0e0 |
Container & Thumbnails
Setting | Default |
Container background | #ffffff |
Container border | #e0e0e0 |
Container radius | 8px |
Thumbnail border | #e0e0e0 |
Thumbnail radius | 4px |
Thumbnail size (desktop) | 50px |
Thumbnail size (mobile) | 40px |
Empty slot background | #f5f5f5 |
Empty slot plus color | #999999 |
Text
Setting | Default |
Title ("Your Pack") color | #333333 |
Title font size | 18px |
Subtotal label color | #666666 |
Subtotal label size | 14px |
Subtotal price color | #000000 |
Subtotal price size | 16px |
Features
Setting | Default |
Show selected items list | Off |
Show compare-at price | Off |
Always show compare price | Off |
Compare price source | Calculated |
Floating Bar
Colors & Border
Setting | Default |
Background | #ffffff |
Header text | #333333 |
Price text | #000000 |
Compare-at price | #999999 |
Top corner radius | 16px |
Bottom corner radius | 0px |
Mobile (< 768px)
Setting | Default |
Item size | 32px |
Pad V / H | 12px / 16px |
Width | 100% |
Center bar | Off |
Bottom offset | 0px |
Desktop (768px+)
Setting | Default |
Item size | 40px |
Pad V / H | 16px / 24px |
Bottom offset | 0px |
Setting | Default |
Hide until first item added | Off |
Text Labels
Go to MOD Bundles → Text & Labels → Pack Builder to customize:
Buttons
Setting | Default |
Add to Pack | "Add to Pack" |
Add Pack to Cart | "Add Pack to Cart" |
Pack Full | "Pack Full" |
Sold Out | "Sold Out" |
Clear All | "Clear All" |
Summary
Setting | Default |
Your Pack text | "Your Pack (" |
Separator | "/" |
Close paren | ")" |
Per-item suffix | "/item" |
In pack label | "In pack: " |
Discount badge | "% OFF" |
Error Messages
Setting | Default |
Select color error | "Please select a color before adding to pack." |
Select size error | "Please select a size before adding to pack." |
Pack capacity error | "Your pack can only fit [count] more item[plural]..." |
Pack full error | "Your pack is full with [count] items..." |
Troubleshooting
Changes not appearing — Save, hard refresh (Ctrl+Shift+R), try incognito
Colors look different — Verify hex codes include
#; check for theme CSS overridesButton states not working — Ensure all state colors are set; check for CSS conflicts