Requirements: Nosto UGC Publisher Center Module or one of the supported 3rd party UGC providers (Yopto, Olapic, Fousixty)

In the digital age, where authenticity drives consumer behavior, integrating user-generated content (UGC) such as Instagram photos into your marketing strategy can transform everyday customer interactions into invaluable brand assets.

While traditional product photography with a standard white background offers a clear, consistent view of items, UGC brings them to life by illustrating how they are used and enjoyed in everyday settings.

Unlock the full potential of authentic customer engagement with UGC for Product Recommendations which allows you to enrich your product recommendations with real user-generated content, providing the social proof that drives higher average order values.

Getting Started with UGC for Recommendations

Step 1: Moderate Nosto User Generated Images for Recommendations

If don't use Nosto UGC module please skip this step.

Please note that only user-generated images are supported. Videos (short or long) are not available to be used in Recommendations.

To make your user-generated images aggregated via the UGC Monitoring available for your Recommendation campaigns you need to ensure those images meet the following criteria:

Have been tagged with 1 or more Products (via Shopspots or just Product Tags)
Are marked as Rights Approved or Rights Owned
Are marked as Published

Images that don't meet the 3 criteria above won't be available to be used in your Recommendation Campaigns.

Please note that once an image meets the 3 criteria it might take up to 24 hours before it's available in your Recommendation campaigns. See How do I know what images will be used in my Recommendation campaigns?

Step 2: Enable UGC for your Recommendation Campaign

Once you have enough UGC for your Recommendation Campaign it's time to enabled the UGC feature. You have 2 main options to use UGC in Recommendations:

Use UGC as the Primary Image

In this case, UGC images as shown instead of the product stock image or alternative images you have for the product.

You can start by using the User-generated Content (UGC) Template from the Gallery by going to Recommendations > Templates Gallery > User-Generated Content (UGC) and clicking Give it a try!

Or if you prefer to use an existing campaign and template to go:

Your Recommendation campaign > click Edit
Locate the Visual Settings section and then UGC
Click the User-generated photography toggle

Please note that with this setting on, if a recommended product doesn't have a piece of UGC available, the product will be hidden. This behavior is to keep consistency in the visual appearance of your recommendation campaign.

Use UGC as a Hover Effect

As an alternative, for recommendation campaigns where many recommended products might not have UGC available you choose to use UGC as a hover effect instead.

You can start by using the Best Sellers with UGC Hover Effect Template from the Gallery by going to Recommendations > Templates Gallery > Best Sellers with UGC Hover Effect and clicking Give it a try!

Or if you prefer to use an existing campaign and template and configure the hover effect you will need to edit the Template HTML by going to:

Your Recommendation campaign > click Edit
Locate the Visual Settings section and then Template Settings
Click Go to template

Then click Template HTML

In there if you scroll down you will find the Template Variable that are available

This is a list of all UGC variables you can use to leverage UGC by editing your HTML template

Expressions	Description
$!product.ugcImageUrl	URL for UGC Image
$!product.useUgcImage	Product is using UGC image as default image
$!product.ugcImageSource	UGC Image source (e.g. instagram, facebook) if available
$!product.ugcThumb(size)	Product's UGC thumbnail URL.
$!product.ugcImages	List of product's UGC thumbnail URLs. Each entry in the list has a method called thumb(size).

Here is a sample code for a basic UGC hover effect:

    #$divId .nosto-hover{
        width: 100%;
        height: 100%;
        background: rgba(182,0,149,0.7);
        position: absolute;
        display: none;
    }

<div class="nosto-block">
    <h4 class="nosto-header">$!title</h4>
    <ul class="nosto-list">
        #foreach($product in $products)
        <li class="nosto-list-item">
            <style>
            #if ($!props.ugcImage.hoverEffect && $!product.ugcImages && $!product.ugcImages.size() > 0)
                #$divId .img-$imgCount:before, #$divId .img-$imgCount:after {
                     content: "";
                     position: absolute;
                     background-position: center center;
                     top: 0px;
                     right: 0px;
                     bottom: 0px;
                     left: 0px;
                     opacity: 1;
                     z-index: 1;
                }
                #$divId .img-$imgCount:before {
                    background-image: url('$!product.primaryImageUrl');
                    background-size: contain !important;
                    background-repeat: no-repeat;
                    transition: opacity 0.3s;
                    z-index: 2;
                }
                #$divId .img-$imgCount:after{
                    #if($!props.display.imageFormat && $!props.display.imageFormat != 0)
                    background-image: url('$!product.thumb($!props.display.imageFormat)');
                    #elseif($!props.display.imageFormat && $!props.display.imageFormat == 0)
                    background-image: url('$!product.imageUrl'));
                    #else
                    background-image: url('$!product.thumb(7)'));
                    #end
                    background-size: cover !important;
                    background-repeat: no-repeat;
                    opacity: 0;
                    transition: opacity 0.3s;
                }
                #$divId .img-mock.img-$imgCount:after {
                    background-size: contain !important;
                }
                #$divId .img-$imgCount:hover:before{
                    opacity: 0;
                }
                #$divId .img-$imgCount:hover:after{
                    opacity: 1;
                }
                #$divId .img-$imgCount:hover .nosto-image-source-icon {
                    opacity: 1;
                }
            #else
                #$divId .img-$imgCount{
                    background-image: url('$!product.primaryImageUrl');
                    background-position: center center;
                    background-repeat: no-repeat;
                    background-size: contain !important;
                }
            #end
            </style>

            <a href="$!product.url" alt="$!product.name">
                <div class="nosto-image-container img-$imgCount#if ($product.mock) img-mock#end">
                    #if ($!props.ugcImage.includeSocialIcon)
                    <div class="nosto-image-source-icon">
                        #if ($!product.ugcImageSource == "facebook")
                        <img src="https://cdn.nosto.com/nosto/assets/ugc/facebook.svg" />
                        #end
                        #if ($!product.ugcImageSource == "stackla")
                        <img src="https://cdn.nosto.com/nosto/assets/ugc/nosto.svg" />
                        #end
                        #if ($!product.ugcImageSource == "instagram" || $!product.mock)
                        <img src="https://cdn.nosto.com/nosto/assets/ugc/instagram.svg" />
                        #end
                    </div>
                    #end
                </div>
            </a>
            <div class="nosto-product-info">
                <a href="$!product.url" class="nosto-product-name">$!product.name.truncate(100)</a>
                #if ($!props.display.showBrandName)
                <a href="$!product.url" class="nosto-product-brand">$!product.brand.truncate(100)&nbsp;</a>
                #end
                #if ($product.discounted && $props.display.showOldPrice)
                <a href="$!product.url" class="nosto-product-price">
                    <span class="nosto-oldprice">$!product.listPrice</span>
                    <span class="nosto-newprice">$!product.price</span>
                </a>
                #else
                <a href="$!product.url" class="nosto-product-price">$!product.price</a>
                #end
            </div>
            #if ($!props.display.showBuyButton)
            #if ($product.tags1Contains("add-to-cart"))
            <button onclick="Nosto.addProductToCart('$!product.productId', this); return false;" class="nosto-btn">$!props.display.buyButtonCopy</button>
            #end
            #end
        </li>
        #set ($imgCount = $imgCount + 1)
        #end
    </ul>
    <div class="nosto-siema-controller nosto-prev"></div>
    <div class="nosto-siema-controller nosto-next"></div>
</div>
#end

Add the network social icon to my UGC images

You also have the option to add the social icon to your UGC images, which can help create more social proof

Advantages:

Brand Recognition: Social networks like Instagram are widely recognized and trusted by consumers. Displaying its icon can lend credibility to the UGC, as viewers may perceive the content as more authentic and trustworthy if they know it was posted on a reputable social platform.
Engagement and Familiarity: Many users are accustomed to interacting with content on social networks. Seeing the network icon might make them more likely to engage with the content on your site, mirroring their social media behaviors.
Proof of Authenticity: The icon serves as a direct indication that the content was created by a real user, not the brand itself, enhancing the authenticity of the image.

            <a href="$!product.url" alt="$!product.name">
                <div class="nosto-image-container img-$imgCount">
                    #if ($!props.ugcImage.includeSocialIcon)
                    <div class="nosto-image-source-icon">
                        #if ($!product.ugcImageSource == "facebook")
                        <img src="https://cdn.nosto.com/nosto/assets/ugc/facebook.svg" />
                        #end
                        #if ($!product.ugcImageSource == "stackla")
                        <img src="https://cdn.nosto.com/nosto/assets/ugc/nosto.svg" />
                        #end
                        #if ($!product.ugcImageSource == "instagram" || $!product.mock)
                        <img src="https://cdn.nosto.com/nosto/assets/ugc/instagram.svg" />
                        #end
                    </div>
                    #end
                </div>
            </a>

See which Recommendation Campaigns are using UGC

You can see which recommendation campaigns have the UGC toggle enabled by adding the UGC columns to your recommendations list.

Go to Recommendations > Overview
Click Configure
Tick the UGC option

Filter by Recommendations Campaigns using UGC

You can filter which recommendation campaigns have the UGC toggle enabled by:

Going to Recommendations > Overview
Click Filter
Search by UGC
Select is Enabled