Shopify Add To Cart

Overview
Shopify Add To Cart is a feature that allows you to create a seamless shopping experience for your customers by allowing them to add products to their cart directly from your UGC Widgets.
Developer Guide
This guide should assist you with basic customisation of the Shopify Add To Cart functionality. We will continue to update this guide with more customisation options as they become available.
Note
When customising UGC widgets, Javascript & CSS Code is modified within the custom code editor of the widget. The section should be 'Expanded Tile'.
Customising Color Variant Selection
Adding custom colour swatches to your variant selectors is a great way to make your UGC Widgets stand out and enhance the customer's experience.
Within the UGC Custom Code Editor, you can add the following code to your Javascript section to add custom colour swatches to your variant selector.
window.ugc.options.shopify = {
  mappings: {
    "colors": [
        {
            "name": "Celeste Olive Mix",
            "displayName": "Olive Mix",
            "value": "https://images.ctfassets.net/09hbx69ra4p2/7DQrNNXRhl02EDxhOmNtlW/830408f2ac9bfa5c44dbe63f07ab53ab/swatch_solids-ankle-8pk-fa23-celesteolivemix.png"
        },
        {
            "name": "Black navy mix",
            "displayName": "Black Navy Mix",
            "value": "#e6e6e6"
        }]
    }
};
Note the Celeste Olive Mix Color and how it utilises an image as the value. This is how you can add custom image icons to your colour swatches.
However, if you wish to map a color instead of utilising a custom image, you can add the hexadecimal value of the color instead, as shown in the black navy mix.
If you wish to change the label of the mapping, you can utilise the "displayName" property. This is how it will be displayed, but will default to the name property value.
Customising CSS Properties of the Add To Cart functionality
The following elements can be customised using our predefined selectors. This can be added to our UGC code editor.
.ugc-add-to-cart-button Utilised to customise the Add To Cart button
.ugc-add-to-cart-colorpicker-text Utilised to customise the text of the color picker
.ugc-add-to-cart-colorpicker-ring Utilised to customise the container for the ring of the color picker
.ugc-add-to-cart-colorpicker-ring:after Utilised to customise the ring of the color picker
.ugc-add-to-cart-colorpicker Utilised to customise the container for the color picker
.ugc-add-to-cart-colorpicker-inner Utilised to customise the inner container for the color picker
.ugc-add-to-cart-other-variant-selector Utilised to customise the container for the other variant selector
.ugc-add-to-cart-sizepicker Utilised to customise the container for the size picker
.ugc-add-to-cart-sizepicker-btn Utilised to customise the button for the size picker
.ugc-add-to-cart-price Utilised to customise the price of the product
.ugc-add-to-cart-container Utilised to customise the container for the add to cart functionality
Example customisation
If you wish to change the border of the variant selector to be a square instead of a circle, you can modify the existing border radius.
For example:
```css
.ugc-add-to-cart-colorpicker-ring:after {
    border-radius: 0;
}
​
.ugc-add-to-cart-colorpicker-ring {
    border-radius: 0;
}
​
.ugc-add-to-cart-colorpicker-inner {
    border-radius: 0;
}
```
Changing the structure of the variant selectors
If you wish to move the parent divs around, or add custom html between the components, you can utilise the following code in the UGC Widget Expanded Tile code editor and modify as required.
    window.ugc.options.shopify = {
        rawTemplate: `
        <div data-component="color-variant-picker"></div>
        <div data-component="size-variant-picker"></div>
        <div data-component="other-variant-picker"></div>
        <div data-component="add-to-cart-button"></div>
        `
    }  
For example, I may wish to add a div around the color-variant-picker so I can decorate it a bit differently, I can do this by doing so.
    window.ugc.options.shopify = {
        rawTemplate: `
        <div id="my-variant-selector">
            <p>Test!</p>
            <div data-component="color-variant-picker">
            </div>
        </p>
        <div data-component="size-variant-picker"></div>
        <div data-component="other-variant-picker"></div>
        <div data-component="add-to-cart-button"></div>
        `
    }  
This will enable the addition of the 'Test!' text between variant selectors, and will also create the my-variant-selector div around the color-variant-picker.
Customising The Add To Cart Error / Success Messages
If you would like to modify the error / success messages that are displayed when adding a product to the cart, you can do so by adding the following code to the UGC Widget Expanded Tile code editor.
    window.ugc.options.shopify = {
        successTitle: ‘Great! ’,
        successMessage: ‘Item has been added to cart.’,
        errorTitle: ‘Uh oh!’,
        errorMessage: ‘Item has not been added to cart.’
    }
Customising The Add To Cart Button Text
If you would like to modify the text associated with the add to cart button, you can do so with the following:
    window.ugc.options.shopify = {
        addToCartButtonText: ‘Add To Cart’
    }
Using partial color matches
By default, our color variant picker has a strict matching algorithm. This means that if you have a color variant named 'Black' and a color variant named 'Black Navy', the color variant picker will not match the 'Black' variant. However, if you wish to use partial matching, you can do so by adding the following code to the UGC Widget Expanded Tile code editor.
    window.ugc.options.shopify = {
        usePartialColorMapping: true
    }
By default, we provide a list of 1000+ colors which we can default to, this can be helpful to match to those colors loosely.

Widget Implementation

Enterprise Tools

Last modified 8d ago