'index' word is unknown when I use the following code {% if template.name == 'index' %}

Store Design
,
1

Hello,

I’m trying to change the header design only on my homepage.

I’ve tried using the code : {% if template.name == ‘index’ %} but I get an error message telling me “CssSyntaxError: Unknown word (7:2)”.

It’s like index somehow doesn’t refer to the homepage.

I use the theme Refresh.

How can I fix this ?

Thanks for your help !

1 Like
2

Hi @Justie

the code must be same like this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
{% if template == 'index' %}

{% endif %}
  • And Save.
3

You’re probably doing this inside your xxxx.css asset.
These files are not processed by Liquid and you wouldn’t be able to do it this way anyway – even if it was xxxx.css.liquid, assets are compiled once for all site pages and ignore variables like template.

You could do this in layouts/theme.liquid as suggested in another reply, but I do not recommend it because every edit to the theme code will make updating to a newer version of the theme more complex.

Ideally, you should be able to create a CSS rule which will work either in section “Custom CSS” setting or in Theme Settings “Custom CSS”.

If this does not work for your particular task (header may have elements which are not inside section element) , you should be able to paste your CSS code wrapped with .. into a “Custom Liquid” section added to index template – this way it will only run on your homepage.