​
Install the Shopify App

Go to the Shopify App Store and type mockspark into the search bar at the top. Find the app called Mockspark Product Personalizer, then click to open its details page and select Install.
Shopify will redirect you to your store’s admin page, where you can review the permissions required by the app. Click the Install button to begin installation. If the process completes without any issues, Mockspark will be successfully added to your Shopify store.

​
Enable the App on Your Theme

After you’ve installed the Mockspark Product Personalizer app from the Shopify App Store, just follow a few simple steps to enable the app in your current Online Store Theme. This will complete the setup and connect Mockspark with your Shopify store.
  1. Log in to your Shopify admin and navigate to Sales channels on the left sidebar. Click on Online Store, and you’ll be taken to the Themes page by default.
  2. Find your current Online Store theme and click the Customize button on the right side. This is where you’ll make a few setup changes to enable the app.

​
Enable the App Embed

  1. On the theme customization page, click the third icon in the left-hand sidebar to switch to the App Embeds panel.
  2. In the App Embeds panel, locate the toggle for Mockspark and turn it on to enable the app.

​
Add the Design Button

After enabling the Mockspark App Embed, the next step is to add the Mockspark design button to your product detail pages.
  1. At the top of the theme customization page, click the dropdown that says Home page.
  2. From the dropdown menu, select Products.
Click on Default product to open the template editor for the product detail page.
The name of the product detail page template may vary depending on the theme you’re using. If you’re using a paid third-party theme, we recommend reaching out to the theme developer for guidance.
In the product detail page template, choose a spot where you’d like the Mockspark design button to appear. A common placement is just above the Add to Cart button. Move your cursor to the area where you want to add the button. A blue interactive highlight will appear on the screen. Click the plus() icon to insert the element.

  1. Once you’ve selected the insertion point, a dialog box will appear on the screen. In the dialog box, switch to the Apps tab.
  2. After switching to the Apps tab, scroll down and select the Mockspark design button.
  1. Now, in the product detail page template, you’ll see the Mockspark design button we just added. Select the button, which is labeled Customize by default.
  2. After selecting the Mockspark design button, the settings panel will appear on the screen. From here, you can customize the button’s style to better match your store’s theme and overall look. You can also change the text that appears on the button.
    The Mockspark Design button settings panel may appear on either the left or right side of the screen, depending on the width of your current display.
  3. After you finish configuring the button, make sure to click the Save button in the top right corner of the page. Otherwise, your changes will not be saved.
That’s it! You’ve successfully enabled the Mockspark Product Personalizer app in your current Online Store theme. To exit the theme editor, click the Exit button in the top left corner of the page.

​
Next steps

If everything went smoothly, you’ve successfully installed and enabled Mockspark. Now it’s time to create and publish your first customizable product. Let’s get started:

Quick Start Guide

Start selling your customizable products in minutes