Sometimes in Shopify you might want to have a certain piece of content or a specific design element on only the homepage of your Shopify store, or on every page except the homepage of your Shopify store. You can do this by putting some conditional statements in your code using Shopify’s Liquid templating language.
Let’s say we wanted to add some kind of home feature image thing to the homepage only. I won’t write out all the code for the feature image here, but if that content was going to be in a div with a class of home-feature then the code to make it display only on the homepage would look something like this:
{% if template == 'index' %}
<div class="home-feature">
home feature image markup/content would go here...
</div>
{% endif %}
On the other hand, what if you wanted certain content to show up on every page except the homepage? Say for instance if you wanted to add a navigation sidebar to all the interior pages of your Shopify website. You could do that using the code below:
{% if template != 'index' %}
<div class="sidebar-nav">
sidebar navigation markup/content would go here...
</div>
{% endif %}
You could also use a Shopify snippet include to do the same type of thing. Let’s start with displaying a particular snippet only on the homepage:
{% if template == 'index' %}
{% include 'home-feature' %}
{% endif %}
Or, to include a snippet only on pages other than the homepage:
{% if template != 'index' %}
{% include 'sidebar-nav' %}
{% endif %}
If you’re not familiar with snippets in Shopify, they work like this: Within your theme, you can have a directory called /snippets. In that directory, you can save files with a .liquid file extension. Each file should basically contain a snippet that you might want to use in various places on your website. For instance, if you made a snippet that contained markup/code for the home page feature image we talked about above, you could save that snippet as a file called home-feature.liquid.
Then, when you use the include statement as shown above, you would just call the part of the filename that comes before the .liquid file extension. So, for example, in the code above where we did an include of ‘sidebar-nav’, that means the code contained in the file sidebar-nav.liquid would be inserted wherever it’s called. Similarly, the example that includes ‘home-feature’ would call the snippet with the filename of home-feature.liquid.
