In this tutorial, we will cover how to effectively install the ArtPlacer Widgets into your Squarespace store.
We recommend reading the instructions provided in the Widget Generator section of this manual before proceeding with the steps described below.
NOTE: We strongly recommend reading the Widget Generator documentation before engaging on this tutorial
Initial Considerations
The ArtPlacer Widget can be embedded into Regular Pages or Product Pages.
Regular Pages are distinctive pages where you communicate something about your company such as the Home Page, About Us, Contact, etc.
Product Pages are pages typically found in e-commerce websites that display information of a specific product. These pages are usually generated automatically for each product, and they are usually similar pages where only the product data varies (i.e. the artwork image, its description, its cost, etc.). A good example of a product page is a Shopping Cart Page such as the one below.
IMPORTANT: In order for the ArtPlacer Widgets to work in Squarespace you need to disable Ajax in your website. To do so, please follow these instructions or contact Squarespace support.
Installing the ArtPlacer Widget and showing the Artworks uploaded to ArtPlacer Artworks' section:
This type of integration is going to display specific artworks that you have uploaded through the ArtPlacer Dashboard.
While on the Widget GeneratorStep n°3 make sure to choose the Space and "ArtPlacer Catalog":
Then, make sure you choose "Squarespace":
1. Login to your Squarespace dashboard and on the left menu head up to Code Injection menu entry by clicking on: Settings > Advanced > Code Injection
2. Copy the "Script Code" from the Widget Generator.
3. Paste the "Script Code" below into the FOOTER Box and click Save, as shown above for the Regular Pages. The script code should look like this:
3. Navigate back to the Main menu and click on the Pages selection.
4. Select the page where you want to insert the ArtPlacer Widget and click Edit.
5. The editable areas will be marked with “+” signs. Click on the one marking the area where you wish to add the widget button.
6. Click on Add Blank +
7. Hover over the newly inserted Text element and click on the small circle at the top left corner.
8. A list of Content Blocks will pop up. Click on the < / > Code Block.
9. Copy the "Button Code" from the Widget Generator.
10. Paste the code copied from the Widget Generator into the box. Make sure to click on APPLY to close the modal box.
11. Paste the widget code generated with the Widget Generator into the Code Box.
It should look like this: <artplacer gallery="1" type="2" text="try in your room" artwork="13872" space="156"> </artplacer>
12. Next, click on the top Edit Pencil icon on the right under the image to edit the appearance and position of the element.
13. You can adjust the size and alignment of the new element within the area.
Installing the ArtPlacer Widget on Shop Page:
There are two ways to install the ArtPlacer Widgets into Shop Pages. You can add the widget code into each specific artwork description, or you can add the code just once, so it works for your entire catalog.
Individual (single) Artwork Integration:
Get your widget code using the Widget Generator. In the Step n°3 make sure to choose the Space and "Artwork from ArtPlacer".
Later, in the step n° 4 make sure you choose "Squarespace".
1. Login to your Squarespace dashboard and navigate the Code Injection menu entry by clicking on Settings > Advanced > Code Injection
2. Copy the "Script Code" from the Widget Generator.
3. Paste the "Script Code" below into the FOOTER Box and click Save, as shown above for the Regular Pages. The script code should look like this:
4. Navigate back to the Main menu and click on the Pages selection and then on Shop to view the list of your products.
5. Select a product on the left bar and then go to EDIT PRODUCT.
6. Go to Additional Info and add the CODE < / > element.
7. Copy the "Button Code" from the Widget Generator.
8. Paste the code copied from the Widget Generator into the box. Make sure to click on APPLY to close the modal box.
TIP: You can generate additional code for the other types of widgets and add it to the code block as shown below.
7. Now click on Price & Variants and make sure you enter the correct Height of your artwork, in inches. If left blank, the height will default to 30”. (You do not need to enter the Width, since it will be calculated automatically from the image aspect ratio).
8. Make sure to click on SAVE to save all your work.
NOTE: If you offer the Product in different size variations, repeat step 7. and list each one of them, so the Widget is able to detect them as well.
Artworks from your website (Squarespace Product Listing) Widget Integration:
This method is recommended when you have a large catalog and editing every artwork would be too tedious. In general, this applies mostly to Product Pages but it could be used for Regular Pages as well.
Get your widget code using the Widget Generator. In the Step n°3 make sure to choose the Space and "Artwork from your Website".
Later, in the step n° 4 make sure you choose "Squarespace".
1. Login to your Squarespace dashboard and navigate the Code Injection menu entry by clicking on Settings > Advanced > Code Injection
7. Copy the "Button Code" from the Widget Generator.
2. Paste the code from the Widget Generator into the FOOTER box as in the image below. Then click Save and the ArtPlacer Widget will display in your site.
3. To let the widget scale your artwork properly, you will need to enter the correct height for the artworks in your catalog. To do this, navigate back to the Main menu and click on the Pages selection and then on Shop to view the list of your products.
4. Select a product on the left bar and then go to EDIT PRODUCT.
5. Click on Price & Variants and make sure you enter the correct Height of your artwork, in inches. If left blank the height will default to 30”. (You do not need to enter the Width since it will be calculated automatically from the image aspect ratio).
6. Make sure to click on SAVE to save your work. Repeat this for all the artworks in your catalog if you need to scale them realistically.
IMPORTANT: Please note the attribute after. This attribute is used to specify the position of the element after which the ArtPlacer Widget Button is to be inserted using CSS Selectors. If you leave it blank – as in the example above – the button will be floating at the bottom right of the page with the following result:
Below is an example of a gallery that added three different types of the ArtPlacer Widgets, Sample Room (type 2), Client Room (type 1) and AR (type 3).
IMPORTANT: Given the case your store visual theme is modified AFTER having had installed our Widgets. We strongly recommend re-installing them as well. Always make sure to have a hard copy of the widgets' code in a .doc / .txt file.
And, if something seems unclear, don't hesitate to contacting us.
