Customize how Uplift Product Customizer appears on your store using the Theme Customizer—no code required.
Accessing Block Settings#
- Go to Online Store → Themes → Customize
- Navigate to a product page template
- Click on any Uplift block in the sidebar
- Adjust settings in the right panel
- Click Save when finished
All customization is done through Shopify's visual Theme Customizer.
Option Controls Block Settings#
The Option Controls block displays your customization options (swatches, checkboxes, radios, dropdowns).
| Setting | Description |
|---|
| Show title and description | Toggle the header section on/off |
| Options Title | Customize the heading text (default: "Customize Your Product") |
| Options Description | Add helpful text below the title |
Layout & Functionality#
| Setting | Options | Description |
|---|
| Layout Style | List, Grid, Compact | How options are arranged |
| Max Width | 300-1200px (slider) | Maximum container width |
| Swatch Size | Small, Medium, Large | Size of color/image swatches |
Colors#
| Setting | Description |
|---|
| Background Color | Container background (leave blank to inherit theme) |
| Border Color | Container border (leave blank for no border) |
| Title Color | Heading text color (leave blank to inherit theme) |
| Description Color | Description text color |
| Accent Color | Selection highlights and interactive elements |
Spacing & Typography#
| Setting | Range | Description |
|---|
| Border Radius | 0-20px | Rounded corners on container |
| Padding | 0-40px | Space inside the container |
| Top Margin | 0-80px | Space above the block |
| Bottom Margin | 0-80px | Space below the block |
| Title Font Size | 16-32px | Header text size |
| Option Spacing | 8-32px | Space between individual options |
| Group Spacing | 4-24px | Space between option groups |
Canvas Display Block Settings#
The Canvas Display block shows the real-time visual preview of customized products.
Canvas Settings#
| Setting | Options | Description |
|---|
| Show canvas title | On/Off | Toggle the preview heading |
| Canvas Title | Text | Customize heading (default: "Product Preview") |
| Canvas Size | Small (50%), Medium (75%), Large (100%), Extra Large (125%) | Preview size relative to container |
| Max Canvas Width | 400-1200px (slider) | Maximum width on larger screens |
| Enable image export | On/Off | Allow customers to download their preview |
| Show loading indicator | On/Off | Display spinner while canvas loads |
Layout & Colors#
| Setting | Options | Description |
|---|
| Canvas Alignment | Left, Center, Right | Horizontal positioning |
| Canvas Background | Color picker | Background behind the canvas |
| Border Color | Color picker | Border around the canvas |
| Border Radius | 0-20px | Rounded corners |
| Title Color | Color picker | Preview heading color |
| Accent Color | Color picker | Loading spinner and accents |
Spacing & Typography#
| Setting | Range | Description |
|---|
| Container Padding | 0-40px | Space around the canvas |
| Top Margin | 0-80px | Space above the block |
| Bottom Margin | 0-80px | Space below the block |
| Title Font Size | 16-36px | Preview heading size |
| Border Width | 0-5px | Canvas border thickness |
Price Display Block Settings#
The Price Display block shows dynamic pricing that updates as customers make selections.
Price Display Settings#
| Setting | Options | Description |
|---|
| Show sale price first | On/Off | Display sale price before regular price |
| Show installment options | On/Off | Display Shop Pay installments |
| Show tax information | On/Off | Show tax inclusion details |
| Price Format | Arrow, Strikethrough, Replace | How price changes are shown |
| Show Add-on Count | On/Off | Display "3 add-ons: +$25.00" vs just "+$25.00" |
| Add-on Label Text | Text | Customize label (e.g., "add-ons", "extras", "upgrades") |
| Enable Price Animation | On/Off | Smooth transitions when price changes |
| Format | Example | Best For |
|---|
| Arrow | $49.99 → $74.99 | Showing value progression |
| Strikethrough | $49.99 $74.99 | Emphasizing total price |
| Replace | $74.99 | Clean, simple display |
Typography#
| Setting | Options | Description |
|---|
| Preset | Default, Paragraph, Heading 1-6, Custom | Quick typography styles |
| Width | Fit content, Fill | How much space the price takes |
| Alignment | Left, Center, Right | Text alignment |
| Font | Body, Subheading, Heading, Accent | Font family from your theme |
| Size | 10px - 184px | Font size options |
| Line height | Tight, Normal, Loose | Vertical spacing |
| Letter spacing | Tight, Normal, Loose | Character spacing |
| Case | Default, Uppercase | Text transformation |
| Color | Text, Heading, Link | Color from theme palette |
| Add-on Text Size | 10-32px | Size for the add-on count text |
Padding#
| Setting | Range | Description |
|---|
| Top | 0-100px | Space above |
| Bottom | 0-100px | Space below |
| Left | 0-100px | Space on left |
| Right | 0-100px | Space on right |
Common Customization Examples#
Match Your Theme Colors#
- Click on the Option Controls block
- Set Accent Color to your brand's primary color
- Adjust Title Color and Description Color to match your theme typography
- Leave Background Color blank to inherit your theme's background
Create a Compact Options Display#
- Select Compact for Layout Style
- Set Swatch Size to Small
- Reduce Option Spacing to 8px
- Reduce Group Spacing to 4px
- Set Padding to 12px
Make the Canvas Stand Out#
- Click on the Canvas Display block
- Set Canvas Size to Large (100%) or Extra Large (125%)
- Add a subtle Border Color
- Increase Border Width to 1-2px
- Set Border Radius to 8-12px for rounded corners
Professional Price Display#
- Click on the Price Display block
- Choose Arrow format to show price progression
- Enable Show Add-on Count for transparency
- Set Size to 24px or larger
- Choose Heading font for emphasis
- Enable Price Animation for smooth updates
Block Placement Tips#
Option Controls#
- Place below the product title and price
- Keep above the Add to Cart button
- Ensure it's within the main product form area
Canvas Display#
- Consider replacing or supplementing your product image gallery
- Works well in a side-by-side layout with options
- Can be placed above or below product information
Price Display#
- Position near your theme's existing price display
- Or place near the Add to Cart button
- Keep visible as customers scroll through options
Mobile Considerations#
All Uplift blocks are fully responsive. The settings you choose automatically adapt to mobile:
- Swatch sizes scale appropriately
- Layouts stack vertically on smaller screens
- Canvas maintains aspect ratio
- Touch targets remain accessible
Test your customizations on mobile by using the device preview in the Theme Customizer.
Testing Your Customizations#
Before going live, verify your settings:
- Preview different products - Check various configurations
- Test on mobile - Use the device preview toggle
- Check selections - Ensure accent colors highlight correctly
- Verify prices - Confirm price display updates work
- View canvas - Make sure preview renders properly
Next Steps#
