This guide walks you through installing and customizing the MEM Live Preview Embed on your Shopify store. With the correct setup, customers will see their personalization updates in real time — improving confidence, reducing errors, and boosting conversions.
On This Page
Overview
The MEM Live Preview Embed allows customers to view their personalization instantly as they customize products, creating a smoother and more professional shopping experience.
⚡ Recommended Theme: We recommend using the free Shopify Dawn Theme for the best load speed and customer experience.
Step 1: Install MEM Live Preview Embed
Log in to your Shopify Admin Dashboard.
Go to Online Store > Themes > Customize.
Watch the video guide for a visual walkthrough:
Step 2: Create or Edit a Product Theme Template
In the Theme Editor, click the Home Page dropdown at the top.
Select Products.
Choose Create Template (recommended for MEM products) OR select an existing product template to edit.
💡 Tip: Create a dedicated MEM product template to prevent conflicts with non-MEM products.
This video covers:
How to use Shopify product theme templates with MEM products.
Best practices for maximizing the MEM live preview embed.
The importance of assigning the correct theme template for a seamless, professional look.
Step 3: Add & Customize the MEM Live Preview Block
Under Templates > Product Information, click Add Block.
Select MEM Live Preview.
Drag and position the block under the Price section for optimal visibility.
Customize the appearance and settings:
Embed Option: Shows personalization updates directly on the product page.
Modal Option: Opens a guided widget for step-by-step personalization.
Customize the Product Page for a Better Customer Experience
⚠️ We recommend hiding the following within your MEM product theme template:
Variant picker
Quantity selector
Buy buttons
This prevents confusion and ensures the customer flows naturally through personalization before checkout.
This video covers:
Overview of the new MEM Shopify app embed settings and features
Comparison of the embed vs. modal settings for product pages
Best practices for choosing between embed and modal options
How to configure and customize the new settings to enhance the customer experience
Tips for optimizing product pages using the MEM Shopify app
Demonstration of the impact of these settings on the shopping experience
Troubleshooting common issues and questions related to the new features
Step 4: Assign the MEM Template to Your Products
In Shopify Admin, open the Product Page for a MEM product.
From the Template dropdown, assign your MEM product theme template.
⚠️ Important: Without the correct template assigned, the Live Preview will not display.
Step 5: Test Your Setup & Verify Personalization
Go to your live store and open a product using the MEM theme template.
Enter personalization details (e.g., names, dates, initials).
Confirm the Live Preview updates immediately with your input.
Test on both desktop and mobile to ensure functionality works across devices.
⚠️ Troubleshooting
🔍 Live Preview Not Showing
Confirm the MEM product template is assigned.
Ensure the Live Preview block is toggled on in the Theme Editor.
Double-check the product was imported from MEM (not manually created in Shopify).
🔄 Personalization Not Syncing
Verify the product was created in the MEM app with personalization enabled.
Re-import the product if necessary.
Ensure the correct theme template is assigned.
🎨 Preview Looks Distorted
Confirm the correct mockup scene is selected in MEM.
Check that personalization font/size fits within the design space.
💡 Best Practices
Hide the variant picker, quantity selector, and buy buttons in MEM product templates.
Always place the preview block close to the personalization field for visibility.
Use clear product images and high-contrast backgrounds for readability.
Watch support videos for guided setup help.
Contact the MEM support team for additional assistance.
Shopify – Creating Product Theme Templates
Creating product theme templates in Shopify allows you to customize the layout and design of product pages on your online store. Follow these steps to create and manage templates:
📌 Note: The instructions provided in this section are adapted from the Shopify Help Center. For the latest and most detailed guidance, refer directly to Shopify's official documentation.
▶️ Watch: See timestamp 1:15–2:15 in this Shopify instructional video for guided instructions on setting up templates:
Additional Assistance
For more detailed guidance or additional support, visit the Shopify Help Center or reach out to our MEM support team.
Tips for Success
✨ Pro Tip #1: Always test your personalization preview before launching new products.
✨ Pro Tip #2: Place the preview close to the personalization box so customers see it update instantly.
✨ Pro Tip #3: Use clear product images and high-contrast backgrounds to improve readability.
Final Checklist
✅ MEM Product Template is assigned in Shopify
✅ Live Preview block is enabled in Theme Editor
✅ Personalization is syncing correctly from MEM
✅ Test order completed to confirm preview displays properly
Summary
Setting up the MEM Personalization Live Preview allows customers to see their customizations in real time, giving them confidence in their purchase. By installing the embed, creating a dedicated MEM template, adding the preview block, assigning the template to products, and testing, you’ll reduce errors, increase conversions, and deliver a professional, seamless shopping experience.