How can i add a clickable link to this scrolling text bar? There are no options for it by default. But i was wondering how it can be done with css
Topic summary
Goal: Make the Impact theme’s scrolling text bar clickable with a link.
Key approach: Not possible with CSS; requires editing the Shopify Liquid file (scrolling-text.liquid). Liquid is Shopify’s templating language; the schema defines editable settings in the theme editor.
Steps:
- Add a URL field to the section schema (after “Promotion text”): {“type”:“url”,“id”:“link_url”,“label”:“Promotion URL”}.
- Wrap the scrolling text block with conditional link tags using {% if section.settings.link_url %} … {% endif %} just after opening and just before closing the div.
Configuration: After these changes, set the destination link in the section settings (the new “Promotion URL” field) in the theme editor.
Constraints: Full paid theme code wasn’t posted publicly; the file with exact placements was shared via direct message.
Outcome: The solution worked as confirmed by the original poster.
Status: Resolved; no open questions.
Hi @Serenity3
It can not be done with CSS, but it is just two steps of editing scrolling-text.liquid. First you need to add URL in schema, so after Promotion text add
{
"type": "url",
"id": "link_url",
"label": "Promotion URL"
},
The next step is to add a link,
{% if section.settings.link_url %}{% endif %}
.......
{% if section.settings.link_url %}{% endif %}
So two new lines, one just after opening the div and the other just before closing div.
Let me know if you have any issues, I can send you the whole file in a private message as I can not post the code of the paid theme publicly.
Would appreciate if you could DM me the file, not sure where exactly to insert this code, and also where to add the custom link that we want it to go to after clicking
DM sent.
After you can choose a link in the section settings after the Promotion text.
1 Like
Works, thank you!
1 Like