Installation & Theme Setup Guide

Learn how to install Uplift Product Customizer and add it to your Shopify theme.

Prerequisites

• A Shopify store on any plan
• An Online Store 2.0 theme (Dawn, Craft, Sense, or similar)
• At least one product in your store

Installing the App

From the Shopify App Store

1. Visit the Uplift Product Customizer listing in the Shopify App Store
2. Click Add app
3. Review the permissions and click Install app
4. You'll be redirected to the Uplift dashboard

Permissions Explained

Uplift requests the following permissions:

Understanding the App Blocks

Uplift uses three app blocks that work together to create the complete customization experience:

You can add any combination of these blocks depending on your needs.

Adding App Blocks to Your Theme

This is a no-code installation using Shopify's Theme Customizer.

Step 1: Open Theme Customizer

1. Go to Online Store → Themes in your Shopify admin
2. Click Customize on your active theme

Step 2: Navigate to Product Template

1. Use the page selector dropdown at the top center
2. Select Products → Default product (or your custom product template)

Step 3: Add the Option Controls Block

This is the main block that displays your customization options.

1. In the left sidebar, find your product information section
2. Click Add block (or Add section depending on theme)
3. Scroll down to Apps section
4. Click Uplift Option Controls
5. Position it where you want options to appear (typically below price, above Add to Cart)

Step 4: Add the Canvas Display Block (Optional)

Add this if you want to show real-time visual previews.

1. Click Add block again
2. Find Uplift Canvas Display in the Apps section
3. Click to add it
4. Position it where you want the preview (often alongside or above the product gallery)

Step 5: Add the Price Display Block (Optional)

Add this to show dynamic pricing that updates with selections.

1. Click Add block again
2. Find Uplift Price Display in the Apps section
3. Click to add it
4. Position it near your product price area

Step 6: Save Your Changes

Click Save in the top right corner.

Block Placement Recommendations

Option Controls

Best positions:

• Below the product title and price
• Above the Add to Cart button
• Within the main product form area

Canvas Display

Best positions:

• Replace or supplement the product image gallery
• In a side-by-side layout next to options
• Above the main product information

Price Display

Best positions:

• Near or replacing your theme's price display
• Below the Option Controls
• Near the Add to Cart button

Configuring Each Block

Option Controls Settings

Click on the block to access settings:

• Title - Customize header text (e.g., "Customize Your Product")
• Description - Add helper text for customers
• Show Title - Toggle the header on/off
• Layout Style - List or grid layout
• Swatch Size - Small, medium, or large swatches
• Colors - Accent color, background, borders
• Spacing - Margins, padding, option spacing

Canvas Display Settings

• Title - Preview section heading
• Show Title - Toggle header visibility
• Canvas Size - Width percentage
• Max Width - Maximum canvas size in pixels
• Alignment - Left, center, or right
• Background - Canvas background color
• Border - Add borders and border radius

Price Display Settings

• Price Format - How to display the price
• Show Add-on Count - Display number of selected add-ons
• Add-on Label - Text like "add-ons" or "extras"
• Typography - Font size and styling
• Animation - Enable/disable price change animation

Adding Blocks to Multiple Templates

If you have multiple product templates:

1. Switch to each template in the Theme Customizer
2. Add the desired blocks to each template
3. Configure settings per template if needed
4. Save all changes

Verifying Installation

After setup, verify everything works:

Check the Blocks

1. Visit any product page on your storefront
2. You should see:
   • Option Controls section (may show "Loading..." initially)
   • Canvas if added (may be empty until configured)
   • Price Display if added

Check the Dashboard

1. Open Uplift from your Shopify admin
2. Configure a product with add-on groups
3. Return to your storefront
4. The options should now display

Test the Integration

1. Make selections on a configured product
2. Verify:
   • Options respond to clicks
   • Canvas updates (if configured with layers)
   • Price updates (if Price Display block added)
   • Add to Cart includes customizations

Hiding or Removing Blocks

Temporarily Hide

1. Go to Theme Customizer
2. Click on the block
3. Click the eye icon to hide
4. Save changes

Remove Completely

1. Go to Theme Customizer
2. Click on the block
3. Click the trash icon
4. Save changes

Theme Compatibility

Uplift requires Online Store 2.0 themes with app block support:

✅ Fully Compatible:

• All free Shopify 2.0 themes (Dawn, Craft, Sense, Taste, etc.)
• Most premium 2.0 themes from theme partners
• Custom themes built on OS 2.0 architecture

❌ Not Compatible:

• Vintage/Legacy Shopify 1.0 themes
• Themes without app block support

Troubleshooting Installation

Blocks Not Appearing in Theme Customizer

• Ensure you're on a product template (not homepage)
• Look in the "Apps" section when adding blocks
• Try refreshing the Theme Customizer

Options Not Loading on Storefront

• Verify the Option Controls block is added and visible
• Check that you've configured products in the Uplift admin
• Clear your browser cache

Canvas Showing Blank

• Canvas requires layer configuration in the admin
• Add base images and layers in Layers & Badges section
• See Canvas Visual Preview Guide

Uninstalling the App

To completely remove Uplift:

1. First, remove all app blocks from your theme(s)
2. Go to Settings → Apps and sales channels
3. Find Uplift Product Customizer
4. Click Uninstall

Next Steps

• Quick Start Guide - Configure your first product
• Managing Products - Set up customization options
• Canvas Visual Preview - Configure the canvas