Storefront Customization
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
