How to Add the Widget Code to Your Squarespace Website

Modified on Fri, 08 Mar 2024 at 12:20 PM



Introduction


In this tutorial, we will cover the process of how to effectively implement the ArtPlacer Widgets on your Squarespace website. This can be done on a
 Squarespace Shop/Product and/or on regular/gallery pages.

Integrating ArtPlacer Widgets on a Shop/Product page (dynamic integration)

Initial Considerations

If you're using Squarespace version 7.0 or earlier, we strongly recommend disabling AJAX on your website. 

The dynamic integration requires the Artwork and its dimensions listed on your Squarespace Shop page product list and product size variants.


For more information on these matters please refer to the following articles or get in touch with the Squarespace Support Team: 


- Enabling or Disabling Ajax

- Adding products to your store


- Adding product variants


Phase 1: Choose Type



1. Head up to your ArtPlacer Dashboard Widget section.


2. Select 'Squarespace' from the platform or structure drop-down menu options.

3. Select the type of Widget you'd like to implement on your website (for EG. the Sample Room Widget).

4. Select the 'Product Page' from the widget place drop-down menu options and click/tap on 'NEXT'.




Phase 2: Settings


1. Select the Widget interface language.

2. Select the Mock-Up Space(s) and/or Personal Spaces you'd like your Artworks to be showcased on (9 max).

3. Open the left menu and head up to Settings > Developer tools > Code Injection

4. On the Footer section, paste the widget script and button code you've obtained from the ArtPlacer Widget generator and make sure you click on APPLY and then on SAVE

NOTE: You can add more than 1 widget. To do so you can add the code before the </script> closing tab. See the example below of a Squarespace Shop page with different types of ArtPlacer Widgets, Sample Room (type 2), Client Room (type 1), and AR (type 3): 

Size & dimensions


NOTE: If you want or widget to generate a preview on true scale and proportions the product shipping parameters must be filled out. To do so, follow the steps listed below:


1.  Open the Shop page product list


2. Locate the product you want to edit and click on EDIT PRODUCT

3. 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).


NOTE: If you offer the product in different size variations,  repeat step 2.

Widget button position

NOTE: If our script is unable to detect the 'Add to cart' button position CSS selector. The button will float in the bottom right corner as seen below:

Given the case you want the button to be placed on a specific position, you can always target the CSS Selector of the element the widget button should follow on the after: line from the code you've previously obtained from our Widget Generator (see below): 

If you don't know the CSS Selector of the 'Add to cart' button or other element of Squarespace store theme. We recommend reaching out to the theme author or to Squarespace support team to find it out.

IMPORTANT: Given the case your store visual theme is modified AFTER having 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.

Integrating ArtPlacer Widgets on regular pages (not Shop pages)


NOTE: Your Artwork must be previously uploaded on your ArtPlacer Dashboard Artworks' section.

1. Generate the Widget code following these instructions

When you reach the Integration step (step 4), make sure you select HTML (Custom Websites) and not Squarespace as seen below:

2. Log into your Squarespace dashboard


3. Disable Ajax-loading following these instructions from Squarespace support


4. Deploy your Squarespace dashboard left menu and head up to Settings > Advanced > Code Injection


5. Back to ArtPlacer's Widget Generator, copy the Script Code:


 6. Back to the Squarespace Code Injection settings, paste the script code on the FOOTER code section and click on SAVE. It should look similar as seen below:


7. Back to Squarespace Dashboard main navigation menu, select the page/section (can't be a Shop page) you wish to implement the Widget, and click on Edit:

8. Click on the “+” sign below the element you wish the Widget button to appear:


9. Click on Add Blank +

10. Locate the new Text element that should have appeared and click on the small circle in the top left corner:

11. A list of Content Blocks will pop up. Select < / > Code Block.

12. Back to ArtPlacer Widget Generator, copy the “Button Code” from the Widget Generator:

13.  Back to the Squarespace new code block settings, paste the button code you've just copied and click APPLY



NOTE: you can click on the Pencil icon to adjust the appearance, position, and alignment of the block where the Widget button will be shown.



Installing the ArtPlacer Widget on specific product pages

NOTE: Your Artwork must be previously uploaded on your ArtPlacer Dashboard Artworks' section.


1. Generate the Widget code following these instructions:


When you reach the Integration step, make sure you select HTML (Custom Websites) and not Squarespace as seen below:

2. Log into your Squarespace dashboard.


3. Disable Ajax-loading following these instructions from Squarespace support.


4. Deploy your Squarespace dashboard left menu and head up to Settings > Advanced > Code Injection


5. Back to ArtPlacer's Widget Generator, copy the Script Code:


 6. Back to the Squarespace Code Injection settings, paste the script code on the FOOTER code section and click on SAVE. It should look similar as seen below:

7. Navigate back to the Main navigation menu and click on the Shop page containing the product on which you wish the product to appear.

8. Open the product list, select a product, and then click on Edit Product.


9. Open de Additional Info tab > CODE

 

10. Back to ArtPlacer Widget Generator, copy the “Button Code” from the Widget Generator:


11. Paste the code you've just obtained from our Widget Generator into the HTML code box and click APPLY.

NOTE: It is possible to implement more than one widget. You can generate additional codes add it to the code block as shown below:





Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article