How to edit the liquid files properly?

Tourist
7 1 1

I want to add more detail to the Products listing screen. But in the past I had a hard time finding the correct liquid file to edit. If I have some page I want to change, how do I locate what liquid file to edit? Without just going through all the likely ones until I find it. My first guess in this case is product-card-list.liquid . Is there a way or App where you can jump from a page into the code behind it?

1 Like
Shopify Expert
2181 367 456

Basically bellow is file structure in shopify

1. Product page:

>> Template->product.liquid, section->product-template.liquid

 

2. collection page

>>Template->collection.liquid, collection-template.liquid,snippet->product-grid.liquid,snippet->product-list.liquid.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
Astronaut
1011 131 240

It can definitely be tricky to find where to edit stuff at first when you start working in Shopify. So, all your main files are going to be your template files.

 

index.liquid <--- Home Page

product.liquid <--- Product page

collection.liquid <--- collection page

cart.liquid <--- cart page

 

You say, hey that's pretty straight forward. Until you open index.liquid and the only thing you see in there is:

 

{{ content_for_index }}

Well wtf is that? Where do I edit that file? How do I edit the content_for_index. Well, actually that's shopify output that basically renders everything that you put on your index page from your visual editor (Customize Button). All of the things you can either type into the customize editor or drag and drop into the homepage are going to be "Sections" -- A good way to find out which section you need to edit is to go to your live site, right click it and click "inspect". This will open your DevTools. You'll be looking for the outermost HTML element with an id that says something like:

 

<div id="shopify-section-collection-rows">

Well, you can more than likely find a "collection-rows.liquid" file in your sections folder. That will probably be the one you need to edit. 

 

Other times you will open your collection.liquid or product.liquid and see something that says:

 

{% include 'collection-template' %}

or

{% include 'product-template' %}

tags that start and end with {% something inside here %} <-- is shopify logic. Double curly is output  --> {{ something_here }}. Anything that says:

 

{% include 'something' %}

Is referring to a Snippet file. So in your snippet folder there would be a "something.liquid" or "product-template.liquid". It's just a matter of knowing where to look. If you think you found the right file, type something into it and then refresh your screen and see if what you typed shows up and you'll know you're in the right place. You do this kind of modular approach to keep your code more manageable and not have to edit one giant piece of code. You may also see: {% section 'header' %} <-- That's a static section file. In your theme.liquid you may see something like:

 

  {% section 'header' %}

  <main class="wrapper main-content{% if template.name == blank %} main-content--no-template{% endif %}" role="main">

    {{ content_for_layout }}

  </main>

  {% section 'footer' %}

 {{ content_for_layout }} <-- Hmm, that looks familiar. Thats saying basically if you're on your product page, it's going to show you your product.liquid, if you're on your home page it's going to show {{ content_for_index }}, if you're on your collection page it's going to show you your collection.liquid. Your header and footer will remain static throughout your whole site. Anything in theme.liquid will appear throughout the whole site, so the {{ content_for_layout }} outputs whatever page you happen to be on. 

 

A little confusing but I hope I helped you understand how it works a little better. Feel free to message me if you have any questions. (you will have to enable messaging in your account)

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
1 Like