How to Use These Examples
Open MOD Bundles
Go to Customization
Find Custom CSS section
Paste the CSS you want
Save
Or add to your theme's CSS file.
Button Styling
Brand Color Buttons
/* Change all bundle buttons to your brand color */.bundle-add-btn,.pack-builder-add-btn,.mix-match-add-btn,.bundle-add-to-cart-btn { background-color: #4A90D9; /* Your brand color */ color: white; border: none; border-radius: 4px;}.bundle-add-btn:hover,.pack-builder-add-btn:hover,.mix-match-add-btn:hover,.bundle-add-to-cart-btn:hover { background-color: #3A7BC8; /* Darker on hover */}Rounded Buttons
.bundle-add-btn,.bundle-add-to-cart-btn { border-radius: 25px; padding: 12px 24px;}Outlined Buttons
.bundle-add-btn { background-color: transparent; border: 2px solid #4A90D9; color: #4A90D9;}.bundle-add-btn:hover { background-color: #4A90D9; color: white;}Product Card Styling
Rounded Cards
.bundle-product-card,.mix-match-card,.pack-builder-card { border-radius: 12px; overflow: hidden;}Card Shadow
.bundle-product-card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: box-shadow 0.3s ease;}.bundle-product-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);}Card Border
.bundle-product-card { border: 1px solid #eee;}.bundle-product-card.selected { border: 2px solid #4A90D9;}Card Padding
.bundle-product-card { padding: 16px;}Selected State Styling
Highlight Color
.mix-match-card.selected,.pack-builder-card.selected { border-color: #4A90D9; background-color: #F0F7FF;}Checkmark Indicator
.bundle-product-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 10px; background: #4A90D9; color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px;}Bold Border on Selection
.bundle-product-card.selected { border: 3px solid #2E7D32; box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);}Image Styling
Square Images
.bundle-product-image { aspect-ratio: 1/1; object-fit: cover;}Rounded Image Corners
.bundle-product-image { border-radius: 8px;}Image Hover Effect
.bundle-product-image { transition: transform 0.3s ease;}.bundle-product-card:hover .bundle-product-image { transform: scale(1.05);}Image Border
.bundle-product-image { border: 1px solid #f0f0f0;}Typography
Product Titles
.bundle-product-title { font-size: 16px; font-weight: 600; color: #333; margin: 8px 0;}Product Prices
.bundle-product-price { font-size: 14px; font-weight: bold; color: #4A90D9;}Strikethrough Original Price
.bundle-compare-price { text-decoration: line-through; color: #999; font-size: 12px; margin-left: 8px;}Bundle Summary Text
.bundle-summary-total { font-size: 20px; font-weight: bold; color: #333;}Layout Adjustments
2-Column Grid
.bundle-product-grid,.mix-match-grid,.pack-builder-grid { grid-template-columns: repeat(2, 1fr); gap: 16px;}3-Column Grid
.bundle-product-grid { grid-template-columns: repeat(3, 1fr); gap: 20px;}4-Column Grid (Desktop)
@media (min-width: 1024px) { .bundle-product-grid { grid-template-columns: repeat(4, 1fr); }}Reduce Card Spacing
.bundle-product-card { margin: 5px;}.bundle-product-grid { gap: 10px;}Floating Bar / Summary
Dark Background
.bundle-floating-bar,.pack-summary-bar { background-color: #333; color: white;}Light Background with Border
.bundle-floating-bar { background-color: #fff; border-top: 1px solid #eee; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);}Rounded Summary
.bundle-floating-bar { border-radius: 12px 12px 0 0; margin: 0 16px;}Mobile Styles
Mobile-Friendly Buttons
@media (max-width: 768px) { .bundle-add-btn, .bundle-add-to-cart-btn { min-height: 48px; font-size: 16px; width: 100%; }}Mobile Grid
@media (max-width: 768px) { .bundle-product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }}@media (max-width: 480px) { .bundle-product-grid { grid-template-columns: 1fr; }}Mobile Typography
@media (max-width: 768px) { .bundle-product-title { font-size: 14px; } .bundle-product-price { font-size: 13px; }}Hide Elements
Hide Prices on Cards
.bundle-product-price { display: none;}Hide Compare Prices
.bundle-compare-price { display: none;}Hide Quantity Label
.mix-match-qty-label { display: none;}Hide Card Labels
.mix-match-card-label { display: none;}Animation Effects
Fade In Cards
.bundle-product-card { animation: fadeIn 0.3s ease;}@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); }}Smooth Selection
.bundle-product-card { transition: all 0.2s ease;}Button Press Effect
.bundle-add-btn:active { transform: scale(0.95);}Theme Integration
Use Theme CSS Variables
/* If your theme uses CSS variables */.bundle-add-btn { background-color: var(--color-button); color: var(--color-button-text); font-family: var(--font-body);}.bundle-product-title { font-family: var(--font-heading);}Match Theme Card Style
/* Copy your theme's card styling */.bundle-product-card { background: var(--color-card-background); border-radius: var(--card-corner-radius); border: var(--card-border-width) solid var(--color-card-border);}Full Example: Clean Modern Style
/* Modern clean bundle styling *//* Cards */.bundle-product-card { border: 1px solid #f0f0f0; border-radius: 12px; padding: 16px; transition: all 0.2s ease;}.bundle-product-card:hover { border-color: #ddd; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);}.bundle-product-card.selected { border-color: #4A90D9; background-color: #F8FBFF;}/* Images */.bundle-product-image { border-radius: 8px; aspect-ratio: 1/1; object-fit: cover;}/* Typography */.bundle-product-title { font-size: 15px; font-weight: 500; margin: 12px 0 4px;}.bundle-product-price { font-size: 14px; color: #666;}/* Buttons */.bundle-add-btn { background: #4A90D9; color: white; border: none; border-radius: 6px; padding: 10px 16px; font-weight: 500;}.bundle-add-btn:hover { background: #3A7BC8;}/* Summary Bar */.bundle-floating-bar { background: white; border-top: 1px solid #eee; box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);}