How can I remove the collection title from my Ride theme pages?

Store Design
1

My website is www.nowyouknowitsvegan.com

I want to remove collection title from pages as I am adding an image displaying the same title so currently I’ve got two titles.

thanks

my theme is Ride

1 Like
2

Hey @NYKIVSweets

Here is how you can hide the title from the collection page on the Ride theme go to Online Store → Find your published theme → Actions - > Edit code

Search for the following file: main-collection-banner.liquid

Delete the code inside and replace it with the following one:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (max-width: 749px) {
    .collection-hero--with-image .collection-hero__inner {
      padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
    }
  }
{%- endstyle -%}

  

    

    {% comment %}
    
    
      # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
      
      
	 {% endcomment %}
      {%- if section.settings.show_collection_description -%}
        {{ collection.description }}

      {%- endif -%}
    

    {%- if section.settings.show_collection_image and collection.image -%}
      
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    }
  ]
}
{% endschema %}

Let me know if that works.

If you want to understand what i did codewise, i simply added a comment to this section

{% comment %}
    
    
      # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
      
      
	 {% endcomment %}
3

@NYKIVSweets

can you please provide screenshot

4

Please provide screenshot where you want to change .

Thank you.

5

This worked thank you so much, the only thing is on desktop the collection image is no longer centred but on mobile it is.

6

@NYKIVSweets

Replace the file with the following code:

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}

{%- style -%}
  @media screen and (max-width: 749px) {
    .collection-hero--with-image .collection-hero__inner {
      padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
    }
  }
{%- endstyle -%}

  

        {% comment %}
    

    
    
      # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
      
      
	 {% endcomment %}
      {%- if section.settings.show_collection_description -%}
        {{ collection.description }}

      {%- endif -%}
    

    {%- if section.settings.show_collection_image and collection.image -%}
      
        
      

    {%- endif -%}
  

{% schema %}
{
  "name": "t:sections.main-collection-banner.name",
  "class": "section",
  "settings": [
    {
      "type": "paragraph",
      "content": "t:sections.main-collection-banner.settings.paragraph.content"
    },
    {
      "type": "checkbox",
      "id": "show_collection_description",
      "default": true,
      "label": "t:sections.main-collection-banner.settings.show_collection_description.label"
    },
    {
      "type": "checkbox",
      "id": "show_collection_image",
      "default": false,
      "label": "t:sections.main-collection-banner.settings.show_collection_image.label",
      "info": "t:sections.main-collection-banner.settings.show_collection_image.info"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label"
    }
  ]
}
{% endschema %}