In this tutorial, we will cover the process of how to effectively implement an ArtPlacer Widget(s) on your Squarespace website.
Initial Considerations
The ArtPlacer Widgets can be implemented on Squarespace regular pages/sections, and/or on Shop pages. However, in order to guarantee a smooth operation, you'd be required to disable Ajax on your Squarespace store. To do so, please follow these instructions or contact Squarespace support team.
Integrating ArtPlacer Widgets on a Shop page (dynamic integration)
Recommended for large product catalogs. This configuration will use the Artworks listed on your Squarespace Shop page product list and shipping parameters.
When you reach the integration step (step 4), make sure you select Squarespace
2. Login to your Squarespace dashboard
3. Open the left menu and head up to Settings > Developer tools > Code Injection
4. On the Footer section, paste 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 the 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 out.
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.
Integrating ArtPlacer Widgets on regular pages (not Shop pages)
NOTE: Your Artworks 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
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 Artworks must be previously uploaded on your ArtPlacer Dashboard Artworks' section.
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.
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:
