How can I disable CSS on a specific page in my theme file?

Store Design
, ,
1

Within my shopify theme file I have the following:

{% if
request.page_type == ‘blog’
or request.page_type == ‘collection’
or request.page_type == ‘list-collections’
or request.page_type == ‘search’
%}
{%- assign hide_footer = true -%}
{% endif %}

{% if settings.favicon != blank %}

{% endif %} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} – {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} – {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} – {{ shop.name }}{% endunless %}

{% if page_description %}

{% endif %}

{% include ‘social-meta-tags’ %}

{{ content_for_header }}

{% include ‘critical-css’ %}
{% include ‘load-css’ %}

These bolded include tags link 2 CSS files that are used for the main theme styles. The problem is the index page I’m working on is custom and uses its own styles I made which should not use any of the themes styles. Is there a way to include those files on all other pages EXCEPT the index page? Or to somehow disable them for the index page. The problem I have is that I’m using bootstrap for the index page only by using the import rule within that pages custom CSS file but the responsive styles in the two files above are overriding many of bootstraps styles.

2

Hello,

Please add this condition in theme.liquid file

{% if template.name != "index" %}
     {% include 'critical-css' %}
     {% include 'load-css' %}
{% endif %}

Thank you.