Widget Customization
Rich Bundle Builder BYOB: Storefront Widget Customization Overview
Rich Bundle Builder BYOB gives you full control over the storefront widget’s look and feel so it can match your brand without writing any code.
Key Capabilities
- Colors & Branding
Configure primary, secondary, background, text, and accent colors, and add banner images to align the widget with your brand palette.
- Typography
Choose font families, sizes, and weights, and upload custom fonts to keep typography consistent with your store.
- Layout & Spacing
Adjust border radius, padding, gaps, and layout mode to fine‑tune the widget’s structure and visual rhythm.
- Text Customization
Edit all user-facing labels, button text, and badges. Use placeholder tokens to inject dynamic content (e.g., product names, prices, or discounts).
- Custom CSS
Use the built-in CSS editor to override any default style and target specific widget elements for advanced design control.
- Responsive Design
Understand and manage how the widget adapts across mobile, tablet, and desktop so it looks great on every screen.
Use these tools together to create a fully branded, responsive widget experience that feels native to your storefront.
1/* Example: Advanced customization with the Rich Landing Bundle custom CSS editor */2 3/* 1. Colors & Branding overrides */4.widget-root {5 --widget-primary: #1a73e8;6 --widget-secondary: #ff6b35;7 --widget-bg: #ffffff;8 --widget-text: #111827;9 --widget-accent: #10b981;10 background-image: url('https://example.com/your-banner-image.jpg');11 background-size: cover;12 background-position: center;13}14 15/* 2. Typography: custom font and sizing */16@font-face {17 font-family: 'BrandDisplay';18 src: url('https://example.com/fonts/BrandDisplay.woff2') format('woff2');19 font-weight: 400;20 font-style: normal;21}22 23.widget-root,24.widget-root * {25 font-family: 'BrandDisplay', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;26}27 28.widget-title {29 font-size: 1.5rem;30 font-weight: 600;31 letter-spacing: 0.02em;32}33 34.widget-subtitle {35 font-size: 0.95rem;36 font-weight: 400;37 color: rgba(17, 24, 39, 0.7);38}39 40/* 3. Layout & Spacing */41.widget-card {42 border-radius: 18px;43 padding: 1.25rem 1.5rem;44 gap: 1rem;45}46 47.widget-card--compact {48 padding: 0.75rem 1rem;49 gap: 0.5rem;50}51 52.widget-layout--horizontal {53 display: grid;54 grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);55 column-gap: 1.5rem;56}57 58/* 4. Text & button customization (structure only; labels set in UI) */59.widget-badge {60 text-transform: uppercase;61 font-size: 0.7rem;62 letter-spacing: 0.08em;63 padding: 0.15rem 0.5rem;64 border-radius: 999px;65 background-color: rgba(16, 185, 129, 0.08);66 color: #047857;67}68 69.widget-button-primary {70 background: linear-gradient(135deg, #1a73e8, #0f5ad0);71 color: #ffffff;72 border-radius: 999px;73 padding: 0.7rem 1.4rem;74 font-weight: 600;75 border: none;76}77 78.widget-button-primary:hover {79 filter: brightness(1.05);80}81 82.widget-button-secondary {83 background: transparent;84 color: #1a73e8;85 border-radius: 999px;86 border: 1px solid rgba(26, 115, 232, 0.4);87}88 89/* 5. Example of targeting dynamic content containers90 (actual text/labels configured via the app’s text settings using tokens91 like {{product_name}}, {{discount_value}}, etc.) */92.widget-line-item-title {93 font-weight: 500;94}95 96.widget-line-item-price {97 font-variant-numeric: tabular-nums;98}99 100/* 6. Responsive Design tweaks */101@media (max-width: 767px) {102 .widget-layout--horizontal {103 grid-template-columns: minmax(0, 1fr);104 row-gap: 1rem;105 }106 107 .widget-card {108 border-radius: 14px;109 padding: 1rem;110 }111 112 .widget-title {113 font-size: 1.25rem;114 }115}116 117@media (min-width: 1024px) {118 .widget-card {119 padding: 1.5rem 2rem;120 }121 122 .widget-title {123 font-size: 1.75rem;124 }125}126 127/* 7. Fine-grained element targeting example */128.widget-root .widget-footer {129 border-top: 1px solid rgba(17, 24, 39, 0.06);130 padding-top: 1rem;131 margin-top: 1rem;132}133 134.widget-root .widget-footer-note {135 font-size: 0.8rem;136 color: rgba(17, 24, 39, 0.55);137}138