Need Help with Dynamically Changing Product Page Heading based on UTM Parameter

Store Design
, ,

Topic summary

Issue: A merchant wanted to dynamically change the product page heading based on a UTM parameter in the URL, but their JavaScript caused the heading to be duplicated. (UTM parameters are URL tags used for tracking marketing sources.)

Early attempts: Changing the assignment to set the heading text to only the UTM keyword reduced duplication but produced incorrect layout (padding) and moved text into a paragraph, indicating the wrong DOM element was being targeted.

Root cause: The script selected the container element (.product__title) rather than the actual heading element.

Resolution: Update the selector to target the H1 specifically: use .product__title h1, then set textContent as needed (e.g., to the UTM keyword). This removed duplication and layout issues.

Outcome: Problem resolved. No further open questions or code changes noted. Images were shared to illustrate the duplication and layout side effects.

Summarized with AI on January 8. AI used: gpt-5.
1

Hi Shopify Community,

I hope you are all doing well! I’m facing an issue with dynamically updating the heading on my product page based on a UTM parameter in the URL. I’ve implemented the following JavaScript code, but it’s causing the heading to be duplicated:

Capture.PNG
Capture.PNG1518×823 174 KB

I’ve tried different versions of the code, but the issue persists. The heading appears duplicated. Can anyone provide insights into what might be causing this issue or suggest an alternative approach?

Any help or guidance would be highly appreciated. Thank you!

2
3

I tried that before but then it comes out like this:

Capture.PNG
Capture.PNG1738×495 55 KB

including some padding which was already there i forgot to mention, need toget rid of that to.

4

Replace
titleElement.textContent = originalTitle + ’ - ’ + keyword;
with
titleElement.textContent = keyword;

1 Like
5

Capture.PNG
Capture.PNG1409×424 44.4 KB

That removes the whole title and only shows the keyword in paragraph

6

ok found the issue.
You need to replace this line.
const titleElement = document.querySelector(‘.product__title’); // Adjust the selector accordingly
with
const titleElement = document.querySelector(‘.product__title h1’); // Adjust the selector accordingly

1 Like
7

No way man! How did u find that, I was testing for like 4 hours?? Thank you so so much, u got it :joy: