In this brief tutorial, we will cover how to effectively install the ArtPlacer Widgets into your Shopify website.


We recommend reading the instructions provided in the Widget Generator section of this manual before proceeding with the steps described below.

If you undergo a theme change or visual changes in your website, we suggest removing the ArtPlacer widgets and reinstalling them. Before doing so, copy your widgets' codes and paste them somewhere safe in case you need them again.

Initial Considerations

The ArtPlacer Widget can be embedded into Regular Pages or Product Pages.

This tutorial works for Shopify product pages. If you wish to embed the widget somewhere other than on a product page, please read these instructions.

We will be installing the Sample Room Widget. The process for installing the Client Room Widget is quite similar.

Important Note
For the widget to reproduce scale properly, you’ll need to input the product’s correct measurements under the ‘variants’ option on your product page – even if you don’t have more than 1 variant of them.
If you user inches, the variant's format has to be numberXnumber (e.g.37x37), without adding any text in the field.
If you use centimeters, you may inform the variant as numberXnumber cm (e.g.37x37 cm). 
The widget will only detect the first variant by deafult. If you need multiple variant detection follow this article (advanced programming skills needed).

The order of your measurements (W x H or H x W) will be determined by you later, so make sure you input it the way you want it to be detected by the widget.

Theme Compatibility

While we are continuously adding support for several Shopify themes, some of them may initially prove incompatible with the ArtPlacer widgets.

The current list of supported themes is the following:













If your theme isn't on this list, please try embedding the widget anyway, since there might be compatibilities we're unaware of.  Should you experience any issues throughout the process, email us with your Shopify URL so we can build compatibility with your theme.

Let’s get started.

Download the ArtPlacer Shopify App

1. Log in to your Shopify dashboard.

2. Head to the Shopify App Store. You can do this by clicking on the Apps icon at your left.

3. Search for ArtPlacer, and download the ArtPlacer App.

4. It should now look like this:

Connecting Shopify to ArtPlacer

After downloading the ArtPlacer App for Shopify, you will see there is an option to subscribe or log in.
If you already have an ArtPlacer account (even if it's not active), you will now have to log in to use the app.
If you never created an ArtPlacer account, you may create one here and then log in.

Generate your Widget Code

Step out of Shopify for a moment. In a new tab, log into your ArtPlacer Dashboard

1. Click on Widget, at the top.

2. Next, click on Create New Widget

3. You now need to create your widget. As mentioned before, on this tutorial we’re creating a Sample Room widget using one of our Library Spaces, so choose Sample Room

4. Type the name of your preferred space. You can find all offered spaces on the Library Spaces tab.

5. Choose Dynamic.

6. Adjust the Settings and Style of your buttons.  For further information on how to customize your widget, read this article.

7. Under the Code section, always select HTML.

8. Now, copy the code that was created for you. You’ll need it soon.

NOTE: Do not copy the script code. The ArtPlacer Shopify App will do this part for you.

NOTE: The default system of measurement is imperial (in). To change it to metric (cm), head to your settings and change it.

Add the Widgets

1. Head back to your Shopify Dashboard.

2. Click on ArtPlacer (the blue hyperlink).

3. Click on Start Creating Widgets.

4. Name your widget to easily identify the button (this will not be the button text).

Set your preferred size unit. Make sure you select the one that matches the units in your website. Under Artwork, select Dynamic. If you don’t want the active artwork to be displayed automatically in your widget (and want the user to select one from the artworks’ slider instead), select Not Specified.

5. Paste the code you’ve copied from your ArtPlacer Dashboard.

It should look something like this:

6. Choose where you’d like your widget placed, and whether you’d like to exclude the widget from a collection(s) (e.g.: If you also sell pottery, you don’t want the widget to be applied to your pottery products.)

7. Click on Save Widget.

That’s it! You’re all set.

Follow these steps whenever you need to create new widgets.

If you need further help, please contact us.