How to find the relevant section in the code from a product page

[Shane_h]

Hi so im trying to learn as i go along here - one thing i sometimes struggle with are videos on line that relate to code to change - sometimes i dont have that file name in my code for the template - here is an example - and i guess my question is how how would you go about identify the equivalent section in your own code

so in this video https://www.youtube.com/watch?v=X_5xAl1oaAc i need to identify an element in the main product liquid - the theme they are woking with is Dawn which i am not using im using charge - i cannot identify the element / section in the code or maybe its there but doesent look like the video 

if i inspect the product page  the input selector  is what im trying to locate  from the product page is there a way to narrow things down from inspecting to find the relevant section in the code / page

hopefully you understand why im trying to do is help me identify where to look in cases like this - how would you look to solve this ?

thanks

[Shane_h]

so here is the example - in the video the code section is highlighted in yellow 

in my code it shows this - 

is there a way to inspect the product page like my 1st post and find the section in the code  - not sure if im going in the right direction but willing to learn 🙂

[Laza_Binaery]

Hi @Shane_h 

In code you shared I would focus on this part: 

{%- when 'quantity_selector' -%}
{% render 'product__info-block--quantity_selector',
block: block,
blockOrder: forloop.index,
sectionId: section.id,
product: product
%}

That means you should follow it and open the file "product__info-block--quantity_selector.liquid" from the snippets folder.

In general, though,h you can try in theme editor to use Shopify inspector

https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/theme-editor#preview-...

Now maybe your theme does not support all features but try with right click, while inspector is active, to choose a section, it should offer you "Edit code" and will open file for that section in code editor. But as you saw it could be just a large file but then search for render keyword, which would lead you to snippet. 

[swym · Accepted solution]

Hi @Shane_h,

The easiest way to do this would be to use a Chrome extension that searches your theme files for a match. The one I use is called “Shopify theme search (Fast)”. Here’s how it works:

First, I inspect the element whose code I want to find. I’m on the dawn theme, and I’d like to find the code for the input field in the quantity selector. The extension searches for a match within the theme files, so I’ll search for anything that contains “class="quantity__input"”.

After installing the extension, go to your theme files. You should see a search bar at the top of your screen. Here, enter the text you want to search for. After that, click “Search”. The extension will then highlight all files that contain a match for the text you find.

The next step would be to click on any of the files that contain a match. Since I’m looking for an element on the main product page, I’ll check the file “main-product.liquid” first. Once you click on one of the highlighted files, the extension will automatically find the match within the file.

As you can see, I’ve found a match for the text “ class="quantity__input" ”. To make sure it’s the correct element, I’ll make a small change. I’ll add the test class “x” to the element and save the changes. After that, I go back to the product page and refresh. Since the class got added, I can confirm that it’s the correct element!

I hope this helps! 

If my response helped you, please consider giving it a like (👍) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards, 

Matthew from Swym

[Shane_h]

thansk very much for this much appreciated