Overview

This article provides a detailed guide on integrating the Live Preview Embed into your Shopify theme. It covers setting up a new product theme template in Shopify and customizing your store's layout to enable the product's live preview. Follow these step-by-step instructions to enhance your customers' shopping experience. For additional support, refer to Shopify's official documentation and our help resources.

Note: There are many Shopify themes available, but from our testing, the free Shopify Dawn Theme has shown the best performance in terms of user experience and load speed.

Installing MEM Live Preview Embed to Shopify

The MEM Live Preview Embed enhances personalization by allowing customers to view customizations in real-time, improving the shopping experience. Follow the steps below to install and enable the MEM Live Preview on your Shopify store to ensure seamless product display.

Watch the step-by-step video for setting up your live preview:

How to Install and Enable the MEM Live Preview Embed on Your Shopify Store:

Step-by-Step Installation Guide

Navigate to Shopify Admin:
- Go to your Shopify Admin dashboard.
- Select Online Store > Themes > Customize.
Create or Modify a Product Theme Template:
- In the theme editor, click the Home Page dropdown at the top and navigate to Products.
- Select Create Template to create a new product theme template or choose an existing template to modify.
- Tip: We suggest creating a new product theme template specifically for MEM products, especially if you have other non-MEM products in your store, to avoid conflicts.
Add and Position the MEM Live Preview Block:
- Under Templates > Product Information, select Add Block and choose MEM Live Preview.
- Drag the MEM Live Preview block to the appropriate section on the page, ideally positioning it under the price section for optimal visibility.
Edit Appearance and Settings:
Adjust the appearance and settings of the MEM Live Preview by selecting it in the theme editor. You have the option to choose between the Embed or Modal view:
- Embed Option: Displays the variant and personalization options directly on the product page, with real-time updates visible as selections are made.
- Modal Option: Opens a preview widget, guiding customers through personalization step by step as they make their selections and add the product to their cart.
Customize these settings to fit your store's needs and enhance the customer experience.
Customize the Product Page for a Better Customer Experience:
- We recommend hiding the variant picker, quantity selector, and buy buttons within the MEM Shopify theme template to prevent confusion during personalization.
Assign the MEM Theme Template to Your Products:
- Very Important: Ensure you assign the appropriate MEM theme template to your products from the Template dropdown on the Shopify admin product page. This step is crucial for the live preview to function correctly.

Setting Up Shopify Product Theme Templates with My Easy Monogram Live Preview Embed

Properly setting up Shopify product theme templates is essential to display My Easy Monogram products beautifully and provide a seamless personalization experience. The MEM live preview embed lets customers see real-time updates to their personalized products, enhancing their experience and boosting conversions.

Why Assign the Correct Product Theme Template?

Optimal Display: Templates present personalized products clearly, making it easier for customers to visualize customizations.
Consistent Branding: Assigned templates maintain a cohesive look across your store, aligning with your brand’s style.
Enhanced Functionality: Using the correct templates is essential to ensure the live preview works properly; without the right template, the live preview will not function as intended, leading to potential display issues.

Watch the Video: Step-by-Step Guide

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.

Additional Resources

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.

See Timestamp 1:15-2:15 in this Shopify video for guided instructions on setting up templates.