UGC Techdocs
  • Introduction
  • Guides
    • Analytics
      • Tracking UGC on Adobe Analytics
      • Tracking Widget interactions with Google Analytics
    • Direct Uploader
      • How to add Custom Data to Direct Uploader
      • How to capture Custom Data on Direct Uploader
      • How to automatically tag data on Direct Uploader
      • How to Customize error messages on Direct Uploader
      • How to Track Direct Uploader form submissions with Google Analytics (Universal & GA 4)
    • Data Templates
      • Creating a Data Template
    • Rights via Registration
      • Capture Custom Data on Rights by Registration Form
      • Styling Rights via Registration Form
    • REST API
      • Caching REST API results for optimization
      • Posting content into Nosto via Tile API
      • Posting images into Nosto via Tile API
    • Onsite Widgets (2.0)
      • Blank Canvas
        • How to Use the Blank Canvas to Create a Twitter Count Widget
        • Creating an Auto-Scrolling Carousel using Blank Canvas
        • Creating Gallery Widget by Using the Blank Canvas Widget
        • Creating a simple Hover effect using Blank Canvas
        • Creating a Word Cloud using Blank Canvas
        • Creating Your Widget by Using the Blank Canvas
      • Bind your own Events
      • Creating a Grid Widget from Waterfall
      • Create a Q&A Widget using Data Templates
      • Displaying a Widget in a Mobile App
      • Dynamically Specify Products to Display in Widget
      • Dynamically specify what Tile to display in a Widget
      • How to add a title / subtitle to a widget
      • How to localize the load more button on widgets
      • How to overlay existing Google Map with the UGC Map Widget
      • Styling cross-sellers on Grid and Carousel Widgets
      • How to Load External JS and CSS into Widgets
      • Profiling Widget Performance
      • Re-targeting with Widgets and Facebook Pixel
      • Render Widget filters dynamically
      • Styling Carousel Widget
      • Styling Grid Widget
      • Styling Masonry Widget
      • Styling Waterfall Widget
      • Styling Widget Expanded Tile
      • Styling Widget Shopspots
      • Using Web Fonts in Widgets
    • Digital Screens
      • Customizing Carousel Event Screen
      • Customizing Mosaic Event Screen
      • Customizing Scrollwall Event Screen
      • Customizing the Mosaic Event Screen to Have 9 Even Tiles
    • Email
      • Adding Location to an Email Tile
      • Styling the Email Widget
    • Integrations
      • DoubleClick
        • UGC Ads with Nosto and Google DoubleClick
      • Zapier
        • Consuming UGC Webhooks via Zapier
      • Mailchimp
        • Bring Social Content into a Mailchimp Campaign
    • Webhooks
      • Trigger notifications when content is in the moderation queue
  • Widgets
  • API Docs
    • JavaScript API
      • Widgets
        • Introduction
        • API Reference for Content Widgets
        • API Reference for Blank Canvas
        • API Reference for Map Widget
      • Digital Screens
        • Introduction
        • API Reference
    • Content API
      • Reference
    • REST API
      • Reference
        • Filters API
        • Moderation Views API
        • Tags API
        • Terms API
        • Tiles API
        • Users API
        • Widgets API
        • Automation Rules API
        • REST API Reference Widgets style and config
      • Best Practices
    • Webhooks
  • Enterprise Tools
    • Automation Rules
      • Triggers
      • Actions
      • Samples
    • Data Templates
    • User Access Control (UAC)
    • Single Sign On (SSO)
    • Enterprise Admin User Interface (EAUI)
    • Zapier
  • Commerce Tools
    • Product Feeds
    • Widget Implementation
    • Reporting
    • Integrations
      • Google Tag Manager
      • Magento
      • SalesForce Commerce Cloud
      • Shopify
      • Shopify Add To Cart
        • Global Variant Mapping for Add to Cart
        • Customise Add to Cart Widget Experience
  • Analytics
    • Google Analytics 4
      • Getting Started
      • Widgets Events
      • E-commerce Events
      • Email Events
  • Terms of Use
Powered by GitBook
On this page
  • Overview
  • Predefined Mappings
  • Default Experience
  • Add Custom Mappings

Was this helpful?

  1. Commerce Tools
  2. Integrations
  3. Shopify Add To Cart

Global Variant Mapping for Add to Cart

PreviousShopify Add To CartNextCustomise Add to Cart Widget Experience

Was this helpful?

Overview

If your products have variants, you will need to ensure your variants are mapped in Nosto's UGC before enabling the Shopify Add to Cart feature in your widgets.

Predefined Mappings

Nosto's UGC supports a library of predefined mappings for colors and sizes. If our defaults cover your variants, you don't need to do any additional mapping. Widgets will automatically use those defaults. You can find the library of default values by going to:

  • Settings > Shopify Add to Cart

  • Under the Color or Sizes tab, click on the default library link.

Default Experience

We recommend making sure that your variants are mapped in Nosto's UGC. However, we provide some default experience in case some mappings are missing to ensure end-users can still add your products to the cart.

Default Experience for missing color mappings

Colors are shown in widgets using color swatches based on the HEX, RGB, or icon values configured in the global mappings. In case a product is loaded in the widget with a color that is not mapped in Nosto's UGC, the widget will default to showing just the color name and a '.' for that color. The user will still be able to select that variant. See example below:

Default Experience for missing size mappings

Size is shown in widgets based on the display name configured in the global mappings. In case a product is loaded in the widget with a size that is not mapped in Nosto's UGC, the widget will default to show the value for the same exactly as provided by the Shopify API. For example, if the Shopify API returns 's' for a small size and in Nosto's UGC we have a display value mapping for 's' to be shown as 'Small', the widget will show the value 'Small'; otherwise, will just show 's'. The user will still be able to select that variant.

Default Experience for missing custom variant mappings

If your products have a variant type other than size and color, you can configure mappings for them in the global mapping section. See details here.

In case a product is loaded in the widget with a variant value that is not mapped in Nosto's UGC, the widget will default to show the value for the same exactly as provided by the Shopify API. For example, if the Shopify API returns 'cotton-material' for a material variant and in Nosto's UGC we have a display value mapping for 'cotton-material' to be shown as 'Cotton', the widget will show the value 'Cotton'; otherwise, will just show 'cotton-material.' The user will still be able to select that variant.

Add Custom Mappings

If you have additional color or size variant values that are not covered by our default library or have other variant types, you can choose to import and configure your custom mappings.

Custom Mappings for Color

Before you can import custom mapping for colors, you need to prepare your CSV file to include the following columns:

Column Name
Description
Column Type

name

Variant option name as provided in the Shopify API

text

value

Variant option HEX, RGB or icon link to be used in color swatches

text

displayName

Variant option display name to be shown in the widget

text

To start adding custom mappings for colors go to:

  • Settings > Shopify Add to cart

  • Select the Color Variant Tab

  • Click Import

  • Select the CSV file to import

  • Click Save

The imported colors will be displayed in the table. If any colors couldn't be imported you will see an error and you can see which colors were not imported.

Custom Mappings for Size

Before you can import custom mapping for sizes, you need to prepare your CSV file to include the following columns:

Column Name
Description
Column Type

name

Variant option name as provided in the Shopify API

text

displayName

Variant option display name to be shown in the widget

text

To start adding custom mappings for colors go to:

  • Settings > Shopify Add to cart

  • Select the Size Variant Tab

  • Click Import

  • Select the CSV file to import

  • Click Save

The imported size will be displayed in the table. If any of the sizes couldn't be imported you will see an error and you can see which size were not imported.

Custom Variant Types

There are 2 steps to configure custom variant types:

Step 1: Configure the custom variant type

  • The Variant Name needs to match the name of the variant in the Shopify API e.g. chain-type

  • The Variant Display Name is the name you want to show in the widget when the variant is presented e.g. Chain Type

Step 2: Import the custom variant options

Before you can import the variant option, you need to configure the following your CSV file to include the following columns:

Column Name
Description
Column Type

name

Variant option name as provided in the Shopify API

text

displayName

Variant option display name to be shown in the widget

text

To start adding mappings for your custom variant options go to:

  • Settings > Shopify Add to cart

  • Select the Other Variant Tab

  • Click Import

  • Select the CSV file to import

  • Click Save

The imported variant options will be displayed in the table. If any of the options couldn't be imported you will see an error and you can see which options were not imported.