Implementation Guide for Shopping Galleries in Commerce

This guide will walk you through the basics of how to create, edit, and maintain your Shopping Galleries. Want to know more about how Shopping Galleries work? Check out our overview of Shopping Galleries here.

How do I create a Shopping Gallery?

Create and Add Products

1. Login to your Sovrn Platform and click the Create button under Commerce.

2. Click Shopping galleries. On this page, if you have previously created any Shopping Galleries, they will be listed here. 

3. To create a new Shopping Gallery, select the site you want to add the Shopping Gallery to under the Site dropdown menu.

4. Click the blue + Create a shopping gallery button in the top right-hand corner. 

5. A menu card should now appear prompting you to to double check which site you are creating the Shopping Gallery for and the country that you want to include merchants from.

6. Click the dropdown menu to modify any of these options.

7. Now you can start putting the products you want to showcase in your Shopping Gallery! In the search bar, you can search for a product either by the name of the product, the URL of the product, or the UPC of the product.

8. Add the products directly to your Shopping Gallery by clicking the Add product button when you hover over the product. 

9. If you want to filter out the specific merchants or products that appear, click the Filter merchants button. From here, you can search for a given merchant, select/deselect a merchant, or provide price filters to narrow your search.

10. Click the Apply button in the bottom right-hand corner.

Once you've added a product of your choice, you should now see the product appear under the Added products tile on the right of the menu card. You can continue to search for additional products in the search bar - all of your added products will stay in that tile until you're ready to finish your Shopping Gallery!

If you need to remove a product from your Shopping Gallery, hover over the product icon under the Added products section and click the trashcan icon in the right-hand corner of the product icon.

When you are finished adding products to your Shopping Gallery, click the blue Next button on the bottom of the menu card. Now, you will be able to modify the appearance of the Shopping Gallery.

Configure and preview

Under this tile you can select the following to modify the appearance of your Shopping Gallery.

• Template layout: choose a premade template for your site, or a default Table or Carousel/Grid. 

• Products per column: label how many products will appear in each column of your Shopping Gallery.

• Products per row: label how many products will appear in each row of your Shopping Gallery.

• Enable carousel: create rotating view of your Shopping Gallery for your readers to click through.

This tile also allows you to curate your Shopping Gallery for your Desktop and Mobile users as well. Click the Desktop and Mobile icons in the middle of this tile to select these features.

Get the Code 

1. Click the Get Code button to finalize your Shopping Gallery.

2. Provide a name under the Gallery name field and click Next when you are done.

3. A prompt will appear that provides you with the code needed to install the Shopping Gallery.

How do I install the Shopping Gallery?

To install the Shopping Gallery, you will need two snippets of code:

• Shopping Gallery code: the code that provides the actual Shopping Gallery widget, which is modified by selections you make when you create/edit your Shopping Gallery

• Commerce JavaScript: the code that empowers the affiliate links and monetizes the links on the Shopping Gallery

Both of these code snippets are necessary for your Shopping Gallery to work properly! If you do not implement these both in conjunction with one another, you will not be able to properly monetize your content nor will you be able to populate your Shopping Gallery.

Shopping Gallery Code

The raw code for the Shopping Gallery can be placed wherever on the page you'd like the Shopping Gallery to appear. This can be within your blog content, editorial content, etc.

Commerce JavaScript

This code must appear on any page in which a Shopping Gallery is present. This code can be placed anywhere on the page, but we recommend placing it just before the </body> at the end of your page. As long as this code snippet loads when the page loads, that?s all that matters! You can check out this article for more information about how the Commerce JavaScript code snippet works.

• If you have multiple Shopping Galleries on the same page, only one Commerce JavaScript code snippet needs to be on the page for the Shopping Galleries to function correctly.

How do I create my own Template for Shopping Galleries?

When creating your Shopping Gallery, you may notice that you have the ability to create your own template. This allows you to build out a theme/aesthetic that matches your publication and can be reused in all your subsequent Shopping Galleries! To make a new template:

1. When building a Shopping Gallery, click Template layout.

2. Click on the arrow in the dropdown menu and click Create a new template.

3. Enter a name under Template name.

4. click Save.

You should now see a Customize arrow appear at the bottom of the list of options in the left column under Configure and preview. Click on Customize to edit the template. You can modify the template using the following settings:

• Font: the style that the text will appear in your Shopping Gallery

• Font color: the color that the text will appear as in your Shopping Gallery

• Font size: the size that the text will appear as in your Shopping Gallery

• Call to action text: the text that will appear in the buttons/links to your products

• Button font size: the size that the text will appear as in the buttons/links to your products

• Button font color: the color that the call to action text will appear as to your products

• Button background color: the color of button within your Shopping Gallery

Additionally, if you would like more customization, you can click Edit CSS to open up a code editor that allows you to manually code your template. Make sure to click Save in the code editor if you modify any code.

5. Once you are satisfied with the appearance of your template, click Save template.

How do I fix or edit my Shopping Gallery?

All Shopping Galleries that you create will be listed here under the site that you've created the Gallery for. You can access this page by going to your Sovrn Platform, clicking Create, then clicking Shopping galleries.

If you need to edit a Shopping Gallery:

1. Click the pencil icon on the right side of the Gallery you need to update.

2. Add/remove products or change the design of your Shopping Gallery.

I still need help.

Feel free to reach out to Sovrn Support if you have any additional questions or concerns about getting started with Shopping Galleries.