Shopify - Collection page product quantity

[Dabou]

Hello guys, i would like to move the quantity of products to the right of the title products and display only the numbers inside (), so it would be 

Products (5)

I would like to edit directly into the main code without adding extra code.

Thank you.

[StephensWorld · Accepted solution]

There are 3 steps to complete this, provided that you're using Dawn Version 12.0.0. You can check your theme version by going into the theme editor and then clicking the three dots next to the theme name.

Note: make a duplicate copy of your theme before making any edits, in case you break things. 

STEP 1: Hide the existing product count from the product grid. 

Admin > Online Store > Themes > click into "customize" next to your theme > navigate into a collection page > click into "product grid" from the left-hand side > then on the right-hand side, scroll down to the "custom css" section > add the following coding and save changes.

.product-count {
  display: none;
}

STEP 2: Replace collection banner coding.

Admin > Online Store > Themes > Click the "..." button next to your theme > select "edit coding" > click into the section called "main-collection-banner.liquid" > delete everything in this template > paste the following and save changes. 

{% 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 -%}

<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-hero__inner page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    <div class="collection-hero__text-wrapper">
      <h1 class="collection-hero__title">
        <span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
        {{- collection.title | escape -}}

              &nbsp;
              <span id="ProductCountDesktop">
                {%- if collection.results_count -%}
                  ({{
                    'templates.search.results_with_count'
                    | t: terms: collection.terms, count: collection.results_count
                  }})
                {%- elsif collection.products_count == collection.all_products_count -%}
                  ({{ 'products.facets.product_count_simple' | t: count: collection.products_count }})
                {%- else -%}
                  ({{
                    'products.facets.product_count'
                    | t: product_count: collection.products_count, count: collection.all_products_count
                  }})
                {%- endif -%}
              </span>
        
      </h1>

      {%- if section.settings.show_collection_description -%}
        <div class="collection-hero__description rte">{{ collection.description }}</div>
      {%- endif -%}
    </div>

    {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-hero__image-container media gradient">
        <img
          srcset="
            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
            {%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
            {%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {{ collection.image | image_url }} {{ collection.image.width }}w
          "
          src="{{ collection.image | image_url: width: 750 }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt=""
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
        >
      </div>
    {%- endif -%}
  </div>
</div>

{% 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": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    }
  ]
}
{% endschema %}

STEP 3: Remove the words "product" and "products" from the facets. 

Admin > Online Store > Themes > click the "..." button next to your theme > select "edit default theme content" > in the search bar put in "{{ count }} product" > remove the words "product" and "products" from the "Products: Facets product count simple" section > save changes. 

Let me know if the above works. It should end up looking like this: 

Cheers,

Stephen

[StephensWorld]

The coding you'd need to edit - and where to place the coding - is going to depend on which Shopify theme (and version) you're using. If you're using a premium theme, then whoever helps would probably need access to your store to tell you what to do (unless they have an exact copy of the version you're using, which is unlikely). If you're using a free theme, then you should post a link to your store and then clarify which theme (and version) you're using ... and you might get an answer on here.  

If you're using a premium/paid theme, then your best bet is to hire a coder to handle this for you from the Partners directory: https://www.shopify.com/partners/directory/services/store-setup/customize-theme

I'd quote $100 CAD, if you want to hire me to help with this. You can reach me via email **Edited by Community Moderator**

[Dabou]

Hey im using Dawn theme, my store is Dazzilia.com, i don't know which version exactly, but im using the latest one before 13.0.0 

[StephensWorld · Accepted solution]

There are 3 steps to complete this, provided that you're using Dawn Version 12.0.0. You can check your theme version by going into the theme editor and then clicking the three dots next to the theme name.

Note: make a duplicate copy of your theme before making any edits, in case you break things. 

STEP 1: Hide the existing product count from the product grid. 

Admin > Online Store > Themes > click into "customize" next to your theme > navigate into a collection page > click into "product grid" from the left-hand side > then on the right-hand side, scroll down to the "custom css" section > add the following coding and save changes.

.product-count {
  display: none;
}

STEP 2: Replace collection banner coding.

Admin > Online Store > Themes > Click the "..." button next to your theme > select "edit coding" > click into the section called "main-collection-banner.liquid" > delete everything in this template > paste the following and save changes. 

{% 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 -%}

<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-hero__inner page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    <div class="collection-hero__text-wrapper">
      <h1 class="collection-hero__title">
        <span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
        {{- collection.title | escape -}}

              &nbsp;
              <span id="ProductCountDesktop">
                {%- if collection.results_count -%}
                  ({{
                    'templates.search.results_with_count'
                    | t: terms: collection.terms, count: collection.results_count
                  }})
                {%- elsif collection.products_count == collection.all_products_count -%}
                  ({{ 'products.facets.product_count_simple' | t: count: collection.products_count }})
                {%- else -%}
                  ({{
                    'products.facets.product_count'
                    | t: product_count: collection.products_count, count: collection.all_products_count
                  }})
                {%- endif -%}
              </span>
        
      </h1>

      {%- if section.settings.show_collection_description -%}
        <div class="collection-hero__description rte">{{ collection.description }}</div>
      {%- endif -%}
    </div>

    {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-hero__image-container media gradient">
        <img
          srcset="
            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
            {%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
            {%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {{ collection.image | image_url }} {{ collection.image.width }}w
          "
          src="{{ collection.image | image_url: width: 750 }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt=""
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
        >
      </div>
    {%- endif -%}
  </div>
</div>

{% 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": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    }
  ]
}
{% endschema %}

STEP 3: Remove the words "product" and "products" from the facets. 

Admin > Online Store > Themes > click the "..." button next to your theme > select "edit default theme content" > in the search bar put in "{{ count }} product" > remove the words "product" and "products" from the "Products: Facets product count simple" section > save changes. 

Let me know if the above works. It should end up looking like this: 

Cheers,

Stephen

[Dabou]

Hey Stephen, it worked, but how can i remove the extra space, also the number in the right still shows

[Dabou]

@StephensWorld I was able to remove the the number in the right, but i found out that if i remove the tag selected the parenthesis around the number will disappear

[Dabou]

@StephensWorld hey, would you help fixing the remaining parts ?

[StephensWorld]

If you're referring to removing the brackets -- in your original post, you had wanted the product count in brackets, which is how it shows in your first screenshot. 

If you're just referring to the spacing, between the collection name, and when the item count starts -- I did try reducing the spacing but I couldn't figure it out. If I don't add a space then the brackets are touching the title name, but when I add a single space, it appears to add a very large space. So it's either touching or larger space (like you have it in your screenshot) ... and I think it looks a lot better with the space than touching. 

How it looks after doing my edits is as good as I can get it. If you need further editing done, you'd have to hire a professional coder unfortunately. 

[Dabou]

@StephensWorld I mean about the brackets, and yes i want them, but for example if i change any filter setting in the collections page the brackets will disappear (i believe they're not staying on page refreshes).

[StephensWorld · Accepted solution]

Try replacing your "main-collection-banner.liquid" file with the following coding (brackets have been removed from the hard-coding): 

{% 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 -%}

<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
  <div class="collection-hero__inner page-width {% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    <div class="collection-hero__text-wrapper">
      <h1 class="collection-hero__title">
        <span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
        {{- collection.title | escape -}}

              &nbsp;
              <span id="ProductCountDesktop">
                {%- if collection.results_count -%}
                  {{
                    'templates.search.results_with_count'
                    | t: terms: collection.terms, count: collection.results_count
                  }}
                {%- elsif collection.products_count == collection.all_products_count -%}
                  {{ 'products.facets.product_count_simple' | t: count: collection.products_count }}
                {%- else -%}
                  {{
                    'products.facets.product_count'
                    | t: product_count: collection.products_count, count: collection.all_products_count
                  }}
                {%- endif -%}
              </span>
        
      </h1>

      {%- if section.settings.show_collection_description -%}
        <div class="collection-hero__description rte">{{ collection.description }}</div>
      {%- endif -%}
    </div>

    {%- if section.settings.show_collection_image and collection.image -%}
      <div class="collection-hero__image-container media gradient">
        <img
          srcset="
            {%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
            {%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
            {%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
            {%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
            {%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
            {%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
            {{ collection.image | image_url }} {{ collection.image.width }}w
          "
          src="{{ collection.image | image_url: width: 750 }}"
          sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
          alt=""
          width="{{ collection.image.width }}"
          height="{{ collection.image.height }}"
        >
      </div>
    {%- endif -%}
  </div>
</div>

{% 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": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label",
      "default": "background-1"
    }
  ]
}
{% endschema %}

... and then go back into the "default theme content" settings, and add some brackets around the "{{ count }}" values, like this:

[Dabou]

Thank you, it worked.