TABLE OF CONTENTS

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

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.


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 with a catalog

This type of integration is going to display specific artworks that you have uploaded through the ArtPlacer Dashboard.

Get your widget code using the Widget Generator. In the Step n°3 make sure to choose the Space and "ArtPlacer Catalog". 


Later, in the step n° 4 make sure you choose "Squarespace".

1. Login to your Squarespace dashboard and navigate to 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: <script src=“//widget.artplacer.com/js/script.js”></script>


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 in Product Pages 

There are two ways to install the ArtPlacer Widgets into Product 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 Artwork Widget 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: <script src=“//widget.artplacer.com/js/script.js”></script>

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.

You are all set! The widget should be up and running for the chosen product.

Multiple Artworks 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
As indicated above, you can specify where to insert the widget by adding a CSS selector to the after attribute of your code. Setting up CSS Selectors can be tricky, so if you don’t have any web programming knowledge, we recommend you leave this empty and the widget will be displayed floating at the bottom of your page as shown in the previous example.

If you want to learn more about CSS Selectors, you can click here.

Conclusion

We presented different ways of adding the ArtPlacer Widgets into Regular and Product Pages on Squarespace websites, with different levels of difficulty and different outcomes.

If you need further help, please contact us.