Hi,
My shop includes a hero image with a button laid on top. I’d like to replicate this exact same button (but only change the text) further down the front page. However, I can’t find the element’s code.
Any idea how I could locate this button’s code? Given the button’s copy, I have searched the exact phrase on every page of the ‘edit code’ section. Yet, nothing comes up.
Thanks in advance.
Not how that works, the text you enter is stored in config/settings_data.json it isn’t injected and hardcoded into the underlying template files.
tl;dr search code for “btn” in an tag class attribute
To find an elements code use chromes browsers developer tools , press F12 or ctrl+shift+i, to inspect rendered elements by pressing ctrl+shift+c (top right arrow button in dev tools).
This will help you find what structure is rendered for an element of interest to better dial in what parts you need to search for in the themes templates code.
A lot of themes devolve into using simple anchor tags that are then heavily styled to look like buttons instead of using actual elements.
And the classes used will often also be horrible named CSS classes like btn or cta, or other nonsense making it that much harder to do a sane search/find for relevant code.
Referencing the debut theme demo https://themes.shopify.com/themes/debut/styles/default/preview it uses the following to make a button on the hero image
Shop Now
so search code for “btn” in an tag class attribute
Thank you! Using Chrome’s Dev Tools, I was able to place the cursor over the button of interest and it then highlighted the element’s code. From there, I copied the code onto my keyboard and duplicated it within my store using the custom HTML option.