Widget Customization
Rich Landing Bundle: Storefront Widget Customization Overview
Rich Landing Bundle 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