Creating Snippets
How to create embedded 3D product views for ready-to-ship products
Creating Snippets (Embedded Views)
Snippets are pre-configured 3D visualizations for specific products. Unlike rules, where customers upload their own images, snippets display artwork you've already set up—perfect for ready-to-ship framed art, prints, and merchandise.
Use snippets when you want customers to see an existing product in beautiful 3D, not upload their own artwork.
When to Use Snippets
| Scenario | Use Snippet? |
|---|---|
| Selling ready-made framed art | ✓ Yes |
| Licensed print collections | ✓ Yes |
| Artist portfolio pieces | ✓ Yes |
| Custom print-on-demand | ✗ No (use Rules) |
| Customer uploads their image | ✗ No (use Rules) |
Creating a Snippet
Navigate to Embeds
From your WrapStudio dashboard, click on Embedded Snippets in Quick Actions, or select the Embeds tab in the navigation.
Select a Product
Click the product selector to choose which product this snippet is for. Unlike rules, snippets are for single products.
You can create multiple snippets for the same product with different variant conditions. For example, different artwork for "Blue Frame" vs "Gold Frame" variants.
Choose Product Type
Select the product type that matches your physical product:
- Frame - For framed art pieces
- Canvas - For canvas prints
- Paper - For photo prints and posters
- Metal - For metal prints
- Acrylic - For acrylic prints
- Magnet - For magnetic products
Open the Full Editor
Click Open Editor to launch the complete WrapStudio editor. This is where you'll configure the entire 3D experience.
The full editor opens in a popup or new window:
Upload Your Artwork
In the editor, upload the artwork that will be displayed for this product:
- Click the Upload button or drag-and-drop your image
- Position and resize the artwork as needed
- The 3D preview updates in real-time
Configure the 3D Settings
Customize every aspect of the 3D visualization:
For Frames:
- Select the exact moulding style
- Set mat presence and color
- Choose glass type
- Pick a background scene
For Canvas:
- Choose edge wrap style
- Set canvas depth
- Adjust texture visibility
Take your time here—this is exactly what customers will see!
Save and Return
Once you're happy with the preview:
- Click Save in the editor
- The editor closes and returns you to the dashboard
- Your snippet appears in the embed list with a thumbnail
Understanding the Snippet Interface
The Embeds List
Your dashboard shows all created snippets in a list:
Each snippet card shows:
- Thumbnail: A preview of the 3D view
- Product Name: The linked Shopify product
- Product Type: Frame, Canvas, Paper, etc.
- Actions: Edit, Copy Code, Delete
Snippet Actions
| Action | What It Does |
|---|---|
| Edit | Reopen the editor to modify the 3D settings |
| Copy Code | Copy the embed code for manual theme integration |
| Delete | Remove the snippet (cannot be undone) |
Working with the Full Editor
The WrapStudio editor is a powerful tool for creating perfect 3D visualizations.
Editor Layout
| Area | Purpose |
|---|---|
| 3D Preview | Real-time interactive preview of your product |
| Settings Panel | Frame, canvas, and scene configuration |
| Upload Area | Drag-drop or click to upload artwork |
| Action Buttons | Save, Reset, and Cancel options |
Rotating the 3D View
Click and drag on the 3D preview to rotate the view. Customers will be able to do the same on your product pages.
Zoom Controls
Use your mouse scroll wheel or pinch gestures to zoom in and out on the 3D preview.
Setting Multiple Snippets per Product
You can create multiple snippets for the same product, each applying to different variants. This is useful when:
- Different variants have different artwork
- Frame color variants should show matching frames
- Size variants need different visual treatments
Example setup:
| Snippet | Product | Variant Condition |
|---|---|---|
| Ocean Art - Gold | Ocean Sunset Print | Frame = Gold |
| Ocean Art - Silver | Ocean Sunset Print | Frame = Silver |
| Ocean Art - Black | Ocean Sunset Print | Frame = Black |
See Variant Conditions for detailed setup instructions.
Copy Embed Code
For advanced theme integration, you may need the embed code:
Paste in Theme
The code is copied to your clipboard. You can paste this into custom theme sections or Liquid templates.
<div data-wrapstudio-embed="abc123"></div>
<script src="https://wrapstudio.app/embed.js" async></script>Most users don't need to copy embed codes. The WrapStudio app block handles everything automatically when added to your theme.
Best Practices for Snippets
Image Quality
- Use high-resolution images (at least 2000px on the longest edge)
- Ensure proper color profiles (sRGB recommended)
- Avoid overly compressed JPEGs
3D Configuration
- Match the 3D frame style to your actual product
- Use realistic settings customers will receive
- Test on mobile devices—most customers shop on phones
Organization
- Name snippets clearly (include product name + variant if applicable)
- Clean up unused snippets regularly
- Keep variant conditions simple
Troubleshooting Snippets
Snippet not showing on product page?
- Verify the WrapStudio block is added to your theme
- Check that the product is correctly linked
- Review any variant conditions that might exclude the current variant
- Ensure your subscription hasn't exceeded snippet limits
Thumbnail not generating?
Thumbnails are generated automatically when you save. If missing:
- Edit the snippet and save again
- Ensure a valid image is loaded in the editor
- Wait a few seconds for processing