In this brief tutorial, we will cover how to effectively install the ArtPlacer Widgets into your Shopify website.
TABLE OF CONTENTS
- Initial Considerations
- Theme Compatibility
- Download the ArtPlacer Shopify App
- Connecting Shopify to ArtPlacer
- Generate your Widget Code
- Add the Widgets
We recommend reading the instructions provided in the Widget Generator section of this manual before proceeding with the steps described below.
Note: 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.
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.
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.
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
Generate your Widget Code
Step out of Shopify for a moment. In a new tab, log into your ArtPlacer Dashboard
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.
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.