Expand my Community achievements bar.

SOLVED

Adobe Target | How to edit product carousel by using VEC

Avatar

Level 1

Hello,

I am creating an AB test where the experience involves adding a "New" label to one of the product cards in a product carousel. I have tried two different approaches using the VEC, but both resulted in different issues. Below are the details.

 

Has anyone experienced something similar, and what solutions did you find? It seems like there might be some limitations with using the VEC for carousel components. How to overcome this? I'm really stuck here, so any help would be greatly appreciated!

 

1. Edit the HTML: I selected the entire component and added the code after the product name:

<span style="color:#ff66cc;"> New</span>

Outcome: The edit is visible, but the carousel's horizontal scrolling function breaks, causing all product cards to stack up.

Activity QA link: Link
Frame 2.png

 

2. Replace the Image: I added the "New" label to the image and replaced it in the carousel.

Outcome: The scrolling function works, but the replaced image does not display.

Activity QA link: Link
Frame 3.png

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Matt167 ,

 

You can create experience fragment for that component as per your requirement in cloud/AEM and share that fragment with target and use that fragment in your activity. Replace the component with Experience Fragment.

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

Hi @Matt167 ,

 

You can create experience fragment for that component as per your requirement in cloud/AEM and share that fragment with target and use that fragment in your activity. Replace the component with Experience Fragment.