Shopify: How to Install ArtPlacer Widgets

Modified on Wed, 24 Jul at 11:40 AM

Table of Contents

Initial Considerations

  • An active Advanced or Premium Plan Subscription is required.

  • You must have generated and obtained the necessary script and button implementation codes from the Widgets’ section. Learn how to properly do that, here.

  • ArtPlacer’s Shopify App must be installed (get it from here).

  • If you’re planning to implement Widgets on a Product Page (Shop page), the products (hence the Artworks) must be previously listed on your Shopify inventory as physical products with specified height and width dimensions. Learn how to properly do this, here.

  • For non-Product/Shop pages, the Artworks need to be previously uploaded to your ArtPlacer Dashboard Artworks’ section. Learn more about that, here.

  • Confirmed list of fully supported themes (July 2024): “Dawn”, “Prestige V5 (3.0)”, “Debut”, “Crave”, “Minimal”, “Galleria”, “Flex”, “Studio”, “North”, “California”, and “Impulse”.
     
    NOTE: don’t hesitate to install our app if your active store theme is not mentioned on the list from above. As long as the theme was acquired from Shopify’s official store, you should still be able to install our app and widgets, easily. 3rd party/custom (non-official) Shopify theme users: we cannot guarantee compatibility.

Installation Process
To make the process as smooth as possible, the ArtPlacer’s Shopify App was created. Additionally, we’ve put the following slides together:


NOTE: If the presentation is not displaying correctly, click here.

Troubleshooting:

  • Problem: the Widget buttons are not visible

  • Check the following:

    • Log into your Shopify store Dashboard →  Apps → ArtPlacer and verify the products collections that have been excluded (marked=excluded):



  • Problem: The Widget is displaying the wrong Artwork dimensions (when installed on a product page).

  • Check the following:

    • Make sure that the Artworks (hence the products) on your Shopify store have been listed as ‘physical products’ because the widget will attempt to read the dimensions set at Shopify dashboard → Product → (Product to be displayed) → Variants:



    • The compatible product variants’ Option name to specify size or dimensions are the following: “Size”; “Sizes”; “Sizing”; “Dimension”; “Dimensions”; “Measurements”; “Measures”. NOTE: If your site is offered in different languages, please reach out to us for further information on this matter.


  • The compatible variant Option values formats are the following: “WxH in (or CM)”; “HxW in (or CM)”; “WxH in (or CM) - text”; “HxW in (or CM) - text” (where W= width value and H= height value - see an example below).

    Size variants should look similar to this from the visitor's POV 
     (numeric values upfront):

  • Check if the unit of measurement and dimension standard set in the widget code matches with the ones set in your products. Go to the Widget Button settings at Shopify dashboard → Apps → ArtPlacer → Widget → Button code:



Change the values between (highlighted) captions as needed (“wxh” for “hxw” and/or “in” for “cm”).


  • Problem: The Widget is displaying the wrong Artwork dimensions (when installed on a non-product page).

  • Check the following:


  • Head up to the Artworks’ section within your ArtPlacer account and verify the Artwork dimensions from its edit view.


  • Problem: The Widget button is loading in the wrong position.

  • Check the following: 

    • If you need to check on this, go to the Widget Button settings at Shopify dashboard → Apps → ArtPlacer → Widget → Button code:

Try the different positions by simply replacing the value "floating" for "below-description" (below product description), "above-description" (above) or, "below-add" (below ‘Add to cart’ button).


  • Problem: The Widget is showing the wrong Artwork image.

  • Check the following:


  • Go to the Widget Button settings at Shopify dashboard → Apps → ArtPlacer → Widget → Button code
    Verify which image is set to be showcased from the product Media files:

    Change the number value between captions (highlighted) accordingly to the image you want to be showcased.



NOTE: if you want the image connected to the Variant to showcased instead, simply delete the line ‘product_sample_image=”1”’ from the Button Code field

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 at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article