Widget

Installing the ArtPlacer Widgets into Shopify

Artplacer Admin
by on April 2, 2020

In this brief tutorial we will cover how to effectively install the ArtPlacer Widgets into your Shopify website. Before we begin, please make sure you understand what different types of widgets there are and what you need to make them work and how to prepare the ArtPlacer Widgets from the ArtPlacer Dashboard. We will be installing the the Sample Room Widget. The process for installing the Client Room Widget is quite similar.

Why we are doing this tutorial

Installing the ArtPlacer Widget for one or just a few artworks is really easy. It only comes down to copying and pasting a line of code a few times. The real challenge comes when we want to generate a code that will work for 10, 100, or 2000 different artworks. Of course, we don’t want to be copying and pasting that line of code that many times. We want to do this just once and make it work for all the pieces in our catalog, regardless of how many works of art we want to display.

This is what we will show in this tutorial.

That said, let’s begin!

Inserting the Widget in Shopify

Let’s paste the widget code into your Shopify website.

1. Login to your Shopify dashboard.

2. Click on Sales Channels item on the left menu, and then on Themes, below Online Store.

3. In the Live Theme section, click on the Actions selector and then select Edit code.

4. Under Layout section, on the left side of the opened pane, click on theme.liquid to select it unless it’s already selected.

5. Scroll down to the bottom of the code tab, and add the code below, right before</body> tag:
<script src="//widget.artplacer.com/js/script.js"></script>

Like this:

Click on the Save button, on the top right.

6. Under Sections, find your Product template and select it. It’s usually named as product-template.liquid. Click on it and a new code pane should open to the right.

7. Locate the correct spot in the template where you want to place the button that will open up the widget. If you don’t know HTML, try to guide yourself using keywords such as the wording you use in your page. In example, find the words “Add to Cart”, “Size”, etc.

8. Paste the code you copied from your ArtPlacer dashboard in the selected line the template. It should similar to the one below:

<artplacer gallery="YOUR_GALLERY_ID" type="2" space="2468" text="View in a space" artwork_url=" " height=“30"></artplacer>

Note: Make sure the gallery attribute is your gallery id.

9. Paste the following code between the quotes next to the attribute artwork_url:

{{ product.featured_image | img_url: 'x400' }}

The resulting code should look like this:

<artplacer gallery="YOUR_GALLERY_ID" type="2" space="2468" text="View in a space" artwork_url="{{ product.featured_image | img_url: 'x400' }}" height=“30"></artplacer>

Click on the Save button, on the top right.

Step 3 – Setting the correct Height

We are almost there! By now, we should have the widget up and running, but with the height set to 30 by default. Of course, our catalog has artworks of different sizes and we don’t want them all to look the same. Therefore, we will set up the widget to work with the correct size.

1. First, we go to the Products section in the Shopify dashboard and click on any product in the list.

2. We scroll down to the Variants section and take a look at the variants list.

3. We will look for the attribute Size. In the example, we can see the the Size attribute is the second column of the list. That means it’s the option 2. If it was in first place, it would be the option 1.
We notice that the Size value has the following structure: width x height.

4. We will replace the value in the attribute height in our widget code (which should currently be set to 30) with the following code:

{{ product.selected_or_first_available_variant.option2 | split: "x" | last | to_integer }}

If the Size attribute was the first in the list, our code would be as follows:

{{ product.selected_or_first_available_variant.option1 | split: "x" | last | to_integer }}

Note: We are using split: “x” because our Size value has the structure width x height . Replace the x accordingly.

5. The widget code should look as follows:

<artplacer gallery="YOUR_GALLERY_ID" type="2" space="2468" text="View in a space" artwork_url="{{ product.featured_image | img_url: 'x400' }}" height="{{ product.selected_or_first_available_variant.option2 | split: "x" | last | to_integer }}”></artplacer>

You are all set!

Start enjoying ArtPlacer’s functionalities within your website!

Working with the Client Room Widget

When using the Client Room widget (type=“1”) you may want to set the size of the artwork for informational purposes. Let’s do that.

1.Get back to your widget code and add the following as value to the size attribute:

{{ product.selected_or_first_available_variant.option2 }}

The widget code should look as follows:

<artplacer gallery="YOUR_GALLERY_ID" type="1" text="View in your room" size="{{ product.selected_or_first_available_variant.option2 }}" artwork_url="{{ product.featured_image | img_url: 'x400' }}" height="{{ product.selected_or_first_available_variant.option2 | split: "x" | last | to_integer }}”></artplacer>

Conclusion

The ArtPlacer Widget can be easily copied and pasted for a given artwork in your catalog. Making it work with any number of artworks automatically in Shopify website may be challenging at first, but can be achieved following a few steps detailed in this guide.

If you need further help, please contact us.

Blog