Is it possible to apply a code to only the home page? (i.e. font, banner and button colors)?

Shopify Discussion
1

Hi - I have added codes to my base.css and it is making changes to all of my pages. Is it possible to apply a code to only make edits to my home page only?

2

This highly depends on what the goal is , without better specifics it’s all guesswork.

For OS2.0 themes to make CSS style change use a custom-liquid block/section for the page template you want to only have those changes.

custom liquid settings accept html so wrap any CSS in the appropriate tags.

3

Yes you can do this, For example

{% if template.name == "index" %} 
 {% style %}
   .yourClass{
      background-color: red;
    }
 {% endstyle %}
{% endif %}

add your css code in above style tags, and then add this code snippet in your theme.liquid file in tag.

2 Likes
4

Hi @Ankita31

Regarding your issue, we like to recommend this solution:

  1. Go to Online Store → Theme → Edit Code
  2. Go to theme.liquid
  3. Locate and add the following code below:
{% if request.page_type == "index" %} 
 {% style %}
   .yourClass{
      background-color: red;
    }
 {% endstyle %}
{% endif %}

Try it and let me know

5

Yes @Ankita31 , you can add custom code for home page
Follow below steps:

  1. Go to Online Store → Theme → Edit Code
  2. Go to theme.liquid
  3. Add the following code below in tag:
{% if request.page_type == "index" %} 
 {% style %}
   .yourcssClass{
      color: blue;
    }
 {% endstyle %}
{% endif %}

Let me know if helpful, Have a good day..!!

1 Like