How can I adjust the text size on my Taste theme collection banner?

I’m running the Shopify theme Taste. We have various product collections and each one has a collection banner at the top with text and an image. At the moment, the text is too big and takes up too much room. I’m having trouble adjusting/reducing the size of the text.

Could someone please let me know where/how I can edit this.

Thanks,

Owen

Hi @OwenMoroni ,

This should be an option in the theme editor, but anyway, you can add this option yourself just following the instruction below.

  1. In your Admin page, go to Online store > Themes
  2. Choose the theme you want to edit then click Actions > Edit code.
  3. Open the main-collection-banner.liquid under the Section folder.
  4. Replace the code with code below.
{% 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 -%}

  

    

      # 
        {{ 'sections.collection_template.title' | t }}: 
        {{- collection.title | escape -}}
      

      {%- 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": "select",
      "id": "title_size",
      "options": [
        {
          "value": "h0",
          "label": "Large text"
        },
        {
          "value": "h1",
          "label": "Medium text"
        },
        {
          "value": "h2",
          "label": "Small text"
        }
      ],
      "default": "h1",
      "label": "Title size"
    },
    {
      "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 %}

You can then adjust the title size in the theme editor.

Go to your theme editor.

  1. In your Admin page, go to Online store > Themes

  2. Choose the theme you want to edit then click Customize.

  3. Go to Collections then default collection.

  4. Click the Collection banner word on your left hand side.

  5. The section settings on the right hand side should open, you can now change the Title size.

Hi @made4Uo - appreciate the help but I’m not looking to change the title size, I want to change the text body size. I’ve attached a screenshot to show which part I mean. If you have a solution that would be much appreciated.

https://monosnap.com/file/9s630HLOBwKIgt74XqEmi1rnwZdS8R