This customization works when using the FlexFrame Listing Desktop unit
1 User needs to fill only the following fields (User-defined-variables) on this template:
CTA (this will work only for first feature product)
Logo
Number of Slides
Listing Hero (Image for Featured product) In regular order.
Listing Thumbnail - the order needs to be changed. First thumbnail (Listing_1_Thumbnail), must be the second product on your list, so the product you use for your second Listing Hero and so on.
Listing Price - This should be the title/name of the product
Listing URL - The click URL for each product
2 User will add following code on the Custom JS field and will need to fill out only the lines for the const thumbs, highlighted on the following example.
Add the details for products on const thumbs. The first product needs to be the first on thumb slider with exception for the background color. BG color number one must be the same as the product on first Featured slide.
To Add a different copy on Disclaimer go to disclaimer.innerHTML, highlighted in blue below.
const thumbs = {
prods: [
{
link: "https://www.google.com",
title: "Melissa Coppel Bonbons",
linkCopy: "Buy at Amazon",
extraCopy: "Body Copy goes here",
bgColor: "#c1e4df",
},
{
link: "https://www.amazon.com",
title: "Oral-B Pro 1000",
linkCopy: "Buy at Amazon",
extraCopy: "Body Copy goes here 2",
bgColor: "#f0dfd0",
},
{
link: "https://www.youtube.com",
title: "Best gifts under $50",
linkCopy: "Read the guide",
extraCopy: "Body Copy goes here 3",
bgColor: "#666e8a",
},
{
link: "https://www.nytimes.com",
title: "Fujifilm Instax Mini Evo",
linkCopy: "Buy at Amazon",
extraCopy: "Body Copy goes here 4",
bgColor: "#eac197",
},
],
};
// TO CHANGE BG, SET FEATURE BODY COPY AND CTA LINK WHEN SWIPING , ADD TRACK EVENT ON CTA SLIDE NUMBER