how to modify shopify simple theme code

New Member
5 0 0

I am trying to understand the logic flow of shopify themes.  I am using the shopify free them 'simple'.  I am a programmer and hav knowledge of html, javascript, css, etc and a basic understanding of the liquify language
What i am try to accomplish is modify the main page of the thems that displays product collections.  The default is 3 on the first row and 4 collections on the 2nd row.
I want to change to display only 1 or 2 collections on the main page.
I think i have figured out the home page is basically the theme.liquid is the home page.  There is a section within theme.liquid with the code {{ content_for_layout }}
I assume that is what generates the section that displays the collections.
Finally, my question.  Where do i go to edit the code contained in {{ content_for_layout }}?
I know i can do it using the control panel, but i need to find where to modify the actual code.

0 Likes
New Member
4 0 0

Before you start editing your code, try this first to see if this change will work for what you want, as it might be much simipler.  I am not running the simple theme, but I'm guessing your's will be very similiar to this.

Click the Online store link (Step 1).  Once that loads, click the Customize button (Step 2).

 

0 Likes
New Member
4 0 0

Next make sure you are on your home page (Step 3).  Then click the name of the catrgory you want to make changes to (Step 4), in my image the category is titled "New Products."

0 Likes
New Member
4 0 0

This will open something like the image below.  Change how many products you want in your row, and how many rows you want in each product category.  This might be the fastest and easiest fix to what it sounds like you're looking to accomplish.

0 Likes
New Member
5 0 0

 

<font color="#000000" face="Calibri" size="3">Mike,
  Thank you for the feedback.</font>

<font color="#000000" face="Calibri" size="3">The process you suggested does in fact allow me to modify the section to change the rows and items per row.
But, what I am actually trying to find out is what code got modified.</font>

<font color="#000000" face="Calibri" size="3">In other words, what *.liquidfy page got changed when I made that change using the admin panel.</font>

<font color="#000000" face="Calibri" size="3">Then I can look at the code and decide if I want to do any manual editing in the future.</font>

<font face="Calibri"><font size="3"><font color="#000000">As I explained in my original post, I am trying to understand the logic and structure of the themes so that I can customize code when necessary.  </font></font></font>

<font color="#000000" face="Calibri" size="3">I am a programmer but new to shopify structure using themes.</font>

<font face="Calibri"><font size="3"><font color="#000000">I have not been able to find any documentation or tutorials that explain the relationship of the .liquidfy coding pages with the actual logic and structure.  Most are based on using the Admin panel to do the changes similar to the process you described.  </font></font></font>

<font color="#000000" face="Calibri" size="3">If you have any suggestions for tutorials that explain it at the coding level, please let me know.</font>

<font color="#b00000" face="Calibri" size="3">Thanks again</font>,

Tom S

0 Likes
Highlighted
Astronaut
765 79 153

theme.liquid is actually on every page of the site, whatever you want to include on every page would go in there, such as your navigation and footer. The home page would be index.liquid. On your theme.liquid you will see this {{ content_for_layout }} somewhere in that code. That loads whatever Template you happen to be on. So if you're on the home page, index.liquid is loaded. If you're on a product page, product.liquid is loaded, etc. Here's a link I recommend to everyone starting in liquid, it's a little basic but it'll get you started:

https://www.skillshare.com/classes/Shopify-Essentials-for-Web-Developers-From-Store-Setup-to-Custom-...

the course is free, you just have to make a skillshare account, definitely some stuff worth learning in there.

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
0 Likes
New Member
5 0 0

Ninthony,

  Thank you for the explanation.  That helps my understanding.  I decided i may be trying to look at the structure based on programming logic rathern than starting to adapt to the shopify structure.  I will look at that video.

Thanks again
Tom S.

0 Likes