Theme Integration
Add WrapStudio to your Shopify theme
Theme Integration
After creating your rules or snippets, the final step is adding WrapStudio to your Shopify theme. This makes the 3D visualizer appear on your product pages.
WrapStudio uses Shopify's App Blocks system, which works with all Online Store 2.0 themes. No code editing required!
Prerequisites
Before integrating with your theme, ensure you have:
✓ At least one rule or snippet created
✓ Branding configured (optional but recommended)
✓ An Online Store 2.0 compatible theme
Using a vintage theme? Themes created before Online Store 2.0 (mid-2021) may require manual code installation. Contact support for assistance.
Adding the App Block
Open Theme Customizer
- Go to your Shopify Admin
- Navigate to Online Store → Themes
- Click Customize on your active theme
Navigate to Product Template
In the theme customizer, you need to be on the product page template:
- Click the dropdown at the top center (shows "Home page" by default)
- Select Products
- Choose Default product or your custom template
If you have multiple product templates, you'll need to add WrapStudio to each template where you want it to appear.
Add App Block
In the left sidebar, find the product information section:
- Look for "Product information" or similar section
- Click Add block
- Scroll down to find Apps section
- Select WrapStudio Customizer
The WrapStudio block is added to your template:
Position the Block
Drag the WrapStudio block to your desired position:
Recommended positions:
- Below the product description
- Above the "Add to cart" button
- In a dedicated section below the main product info
Position matters! Place the block where customers naturally look. Near "Add to Cart" is usually best because customers see the 3D preview right before purchasing.
Configure Block Settings (Optional)
Click on the WrapStudio block to view its settings:
Available settings:
- Button text - Customize the "Customize in 3D" button label
- Display mode - Button, embedded, or auto
Save Your Changes
Click Save in the top right corner to publish your changes.
Your WrapStudio integration is now live!
Verifying the Integration
After saving, verify everything works:
Visit a Product Page
Open a product that has a rule or snippet applied. Look for the WrapStudio button or embedded viewer.
Click the Button
Click "Customize in 3D" (or your custom button text) to open the visualizer.
Test the Full Experience
- For Rules: Upload a test image and verify the 3D preview works
- For Snippets: Verify the pre-configured 3D view appears correctly
- Test on mobile devices
Block Display Modes
WrapStudio offers different display modes:
Button Mode (Default)
Shows a button that customers click to open the 3D visualizer in a modal/popup.
Best for:
- Limited page space
- Products where 3D preview is optional
- Mobile-first designs
Embedded Mode
Shows the 3D viewer directly on the page without requiring a click.
Best for:
- Large desktop screens
- Products where 3D is the main selling point
- Art and home décor products
Auto Mode
Automatically chooses the best display based on screen size and product context.
Multiple Product Templates
If your theme uses different templates for different products, you may need to add WrapStudio to each:
| Template | How to Add |
|---|---|
| Default product | Standard setup process |
| Featured product | Add block to this template separately |
| Customizable product | Add block to this template separately |
| Pre-order product | Add block to this template separately |
Each template is independent. Adding WrapStudio to "Default product" doesn't automatically add it to other templates.
Theme Compatibility
WrapStudio works with all Online Store 2.0 themes, including:
✓ Dawn (Shopify default)
✓ Craft
✓ Crave
✓ Sense
✓ Studio
✓ Refresh
✓ Colorblock
✓ Ride
✓ Taste
✓ Most third-party 2.0 themes
Vintage Themes (Pre-2.0)
If you're using an older theme that doesn't support app blocks, you have two options:
- Upgrade to a 2.0 theme (recommended)
- Manual code integration (contact support)
Removing WrapStudio from Theme
If you need to remove WrapStudio:
Open Theme Customizer
Navigate to Online Store → Themes → Customize
Go to Product Template
Select the product template where WrapStudio is installed
Remove the Block
- Click on the WrapStudio block in the sidebar
- Click the trash icon or "Remove block"
Save Changes
Click Save to publish the removal
Removing the block from your theme doesn't delete your rules or snippets. They remain saved in WrapStudio and will work again if you re-add the block.
Troubleshooting
Block Not Appearing
Can't find WrapStudio in the Add Block menu?
- Make sure the WrapStudio app is installed
- Try refreshing the theme customizer
- Check if your theme supports app blocks (Online Store 2.0)
Button Shows But Nothing Happens
Button visible but 3D preview doesn't open?
- Verify you have a rule or snippet applied to this product
- Check variant conditions if applicable
- Open browser console for errors (F12 → Console)
- Clear browser cache and reload
3D Viewer Shows Wrong Preview
Seeing unexpected 3D preview?
- Check if multiple rules apply to the same product
- Review variant conditions
- For snippets, verify the correct artwork is configured
Mobile Display Issues
Looks wrong on mobile?
- Test in mobile preview mode in theme customizer
- Check if your theme's mobile styles conflict
- Consider using Button mode for mobile-first
Best Practices
Positioning
✓ Do:
- Place near the "Add to Cart" button
- Keep in the primary content area
- Ensure visibility without scrolling
✗ Don't:
- Hide in footer or secondary areas
- Place where it disrupts the purchase flow
- Add to areas that collapse on mobile
Performance
✓ Do:
- Use button mode for sites with many products
- Optimize images used in snippets
- Test page load times
✗ Don't:
- Add multiple WrapStudio blocks to the same template
- Use extremely high-resolution images unnecessarily
Next Steps
Congratulations! Your WrapStudio integration is complete. Here are some final touches: