Attempting to alter the text of a class of buttons. Styling changes work in browser dev tools, but not in Adobe Target

[aaronlng_92]

I'm attempting to alter the text of some buttons on a webpage. They are product recommendations driven by a third party company (API call). When I adjust the styling in the browser dev tools, I see the change apply as I expect. When I take that same code over to Adobe Target and implement via custom code (adding a style element to the head of the page), the change does not apply. Could this be a timing issue of when target is firing versus when the product recommendations load? Has anyone else experienced something similar?

[Matthew_Ravlich_ACG]

Hi @aaronlng_92,

It could be a timing issue, but I would first try wrapping the custom style in '<style>' tags:

<style>
  .add-to-cart-btn::after {
    content: "ADD TO CART";
    background-color: #004b67;
    padding-top: 0.35rem;
  }
</style>

See if this allows you to apply your custom styling. If you still have issues, you could apply the styles through JavaScript and use a MutationObserver to check when the DOM is loaded.

Check out the Target Custom Code documentation here: https://experienceleague.adobe.com/en/docs/target/using/experiences/vec/modifications/vec-code-edito...

I hope this helps.

Matthew Ravlich | ACG Digital | albertacg.com

[Perrin_Ennen · Accepted solution]

Hi @aaronlng_92 ,
looks like a timing issue to me as well. This probably works in the preview in the VEC. But as @Matthew_Ravlich_ACG writes I would use a script with a mutation observer to wait until the element exists and then set the styles with JavaScript accordingly. If all this doesn't help - you can still hide the button via CSS and show a new one that triggers the hidden one. That is not nice. But in exceptional cases it is unavoidable.