As an alternative to using UGC as the primary image for your recommendation campaigns, you can choose to use UGC as a hover effect instead. This can be beneficial if you are still don't have a substantial amount of UGC to cover your product catalog.
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) </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>