Im using the sense theme. I go to inspect on my website then I go to my product liquid code but I cant find the code from the inspect in my liquid code. Why do you think this his happening. None of it is there. A reply would be great. I’m watching the attached video but cant follow allow until I can find my code in the liquid.
Hi instadiamond. I am going to ‘edit code’ however I can’t match whats on the website inspect to whats in my Shopify liquid code. as a result I cant follow the tutorial
It’s very hard to search for specific elements in Shopify’s code editor. I suggest you set up a local development environment with VS Code. That’s what most developers do, including myself.
Hi MAJC,
Great to see you’re looking to learn more about how your theme’s product page code is working. As people have mentioned here already, Liquid is a server rendering templating language/ API so what you see when you inspect a rendered product page is not going to match what you’ll find in a main-product.liquid section.
Elements such as the product title are written in Liquid as product.title within a h1 tag in the themes code and then each iteration of a product page will substitute in the actual name of the product. You can see this line of Dawn (which shares the same codebase as sense) where the product.title object is contained.
Something else you need to look out for is that a section like the the main product section may not contain all the code of a product page, instead they’ll often include additional snippets for particular components such as a variant picker or buy buttons - an example of that would be this line where an additional snippet file called “product-variant-picker” will be rendered inside the section when a product page is loaded. This means that any page or section can pull from multiple files, so when you’re comparing between a rendered page and the code within a theme, you may need to look at multiple theme files. In the “product-variant-picker” example, you can see the code for this in the “product-variant-picker” snippet file in the themes /snippet directory here.
Hope this helps you locate specific code that you’re looking for, and unblocks you with following the tutorial you posted.