In this tutorial, we will show you how to install the live preview script on your Shopify theme. This allows your customers to see what their products will look like after entering their customized properties.
On this page
Accessing & Copying Preview Script
From your My Easy Monogram Dashboard, navigate to the bottom left of the screen and click on the Preview Script button.
Once you have accessed the Preview Script page, scroll down and click Copy Code under the first block of code.
After you have copied the script code from the My Easy Monogram app, navigate to your Shopify Admin page.
Creating Snippet in Shopify Theme
Once you are on your Shopify Admin page, click on Online Store in the list to the left.
After clicking on Online Store it should take you to the Themes setup page first. If not, click on Themes under Online Store
From here, click on the Actions button dropdown and select Edit Code.
While on the Edit Code page, scroll down the list on the left until you find the Snippets folder. Click on the Snippets folder and then click Add a new snippet.
A pop-up box will appear titled Add a new snippet. For this snippet, we will name it MEM-Live-Preview and then click Create Snippet.
After clicking Create Snippet, a blank snippet will be created.
With the Live Preview code still copied from the My Easy Monogram app, we will then paste the code into this text box and click Save.
Updating Theme.Liquid Layout
Now that we have created the MEM-Live-Preview Snippet, it is time to place one last line of code into the Layout.
Navigate back to the My Easy Monogram Preview Script page. From here, scroll to the bottom of the page and click the Copy Code button on Step 5.
After clicking Copy Code, go back to your open Shopify Admin tab that has the Edit Code page up. In the list on the left, navigate to Layout and select theme.liquid.
In the text box to the right, scroll all the way to the bottom of the code and find the last </body> tag and insert a new line by hitting Enter/Return.
Using the line of code we copied from the My Easy Monogram Preview Script page, we are going to paste it in the line above the </body> tag.
Be sure to save your work before closing this page by clicking the Save button on the top right of the screen
With this code copied and saved, it is time to finally go back to the My Easy Monogram Preview Script page and select the checkbox at the bottom of the screen stating that you have inserted the live preview script into your Shopify store.
Now your customers will be able to see a Live Preview of the product they would like to order including any customized fields they insert!