Implementation Guide for AI Shopping Galleries Beta

AI Shopping Galleries is a beta feature with limited access. To use it, you must sign up and join the waitlist. We’ll notify you as soon as it becomes available for your account.

Step 1: Install the Commerce JavaScript

To install the Commerce JavaScript, start by retrieving your site’s API key. Your API key can be found in the Sovrn platform under Site Settings by clicking on the key icon next to the site where you plan to install Commerce.

Once you have your API key, insert it into the script below and add the code to your webpage template just before the </body> tag.

CODE

<script type="text/javascript">
 var vglnk = {key: 'YOUR API KEY'};
 (function(d, t) {var s = d.createElement(t);
 s.type = 'text/javascript';s.async = true;
    s.src = '//cdn.viglink.com/api/vglnk.js';
    var r = d.getElementsByTagName(t)[0];
    r.parentNode.insertBefore(s, r);
  }(document, 'script'));
</script>

This script enables the AI Galleries Shopping feature on your site and prepares it to analyze the content for relevant product recommendations.

Step 2: Add the AI Shopping Gallery code to your page

To add the AI Shopping Gallery to your webpage, simply insert the following line of code wherever you would like the gallery to appear:

CODE

<div class="sovrn-commerce-ai-shopping-gallery"></div>

This single line of code will seamlessly integrate an AI Shopping Gallery directly into your site. Once the code is in place, our AI will automatically analyze the content of your page upon load and display a shopping gallery with product recommendations tailored to your content.

Note: If there are multiple galleries on the page, each gallery will display the same products.

Step 3: Verify and test

Once integrated, verify that the recommendations are being displayed correctly by viewing your webpage. The gallery will handle the rest, ensuring the products remain relevant and in stock.

Step 4: Styling your gallery (Optional)

You can tailor the gallery’s appearance to align with your site’s design. Below are the key attributes and parameters available for customization:

Layout

The AI Shopping Gallery is responsive by default, adjusting its layout based on the available width of the container. There are three layouts supported:

One row of four products: Applied when the container is 1024px and up.
Two rows of two products: Applied when the container is 768px to 1023px.
One vertical column of four products: Applied when the container is 150px to 767px.

Below is an example of how to set up different gallery layouts:

CODE

<div class="sovrn-commerce-ai-shopping-gallery" style="width:1200px">
<!-- one row of four products -->
</div>

<div class="sovrn-commerce-ai-shopping-gallery" style="width:800px">
<!-- two rows of two products -->
</div>

<div class="sovrn-commerce-ai-shopping-gallery" style="width:150px">
<!-- four rows of one product -->
</div>

For the best results, set a minimum container width of 150px.

Products

To control the number of products displayed, use the productCount property in the gallery configuration. You can display 1, 2, or 4 products:

CODE

<div class="sovrn-commerce-ai-shopping-gallery" data-shopping-gallery-config='{"productCount":4}'>
<!-- four products returned -->
</div>

<div class="sovrn-commerce-ai-shopping-gallery" data-shopping-gallery-config='{"productCount":2}'>
<!-- two products returned -->
</div>

<div class="sovrn-commerce-ai-shopping-gallery" data-shopping-gallery-config='{"productCount":1}'>
<!-- one product returned -->
</div>

Styling

You can style and customize the gallery using either Global or Local configurations:

Global configuration: You can apply global styles by updating the Commerce JavaScript configuration. This will ensure consistent styling across all galleries on your site.For example, to customize the typeface and button styling:

CODE

<script type="text/javascript">
  var vglnk = {
    key: 'YOUR API KEY',
    shoppingGallery: {
      "font-family": "serif",
      button: {
"color": "red",
"innerText": "Purchase"
      }
    }
  };
  (function(d, t) {
    var s = d.createElement(t);
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//cdn.viglink.com/api/vglnk.js';
    var r = d.getElementsByTagName(t)[0];
    r.parentNode.insertBefore(s, r);
  }(document, 'script'));
</script>

Local configuration: You can apply local styles by configuring individual galleries using the data-shopping-gallery-config attribute. This allows for unique styling on a per-gallery basis. For example, to customize the title color and button text for a specific gallery:

CODE

<div class="sovrn-commerce-ai-shopping-gallery" 
  data-shopping-gallery-config='{
    "font-family": "serif",
    "button": {
      "color": "red",
      "innerText": "Purchase"
    }
  }'>
</div>

Note: Locally set styles will override global styles for the specific gallery.

List of configurable properties:

Here are the attributes you can modify for each part of the gallery:

Title: font-family, color, font-size, font-weight,
Price: font-family, color, font-size, font-weight,
Button: font-family, color, font-size, font-weight, border-color, border-radius, innerText

For more details on these properties and their valid values, refer to the MDN Web Docs.