Solved

Shopify - Collection page product quantity

Dabou
Explorer
118 2 16

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.

Dabou_0-1706942992021.png

 

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Accepted Solutions (2)
StephensWorld
Shopify Expert
1178 129 296

This is an 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. 

 

theme version.png

 

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;
}

 

 

 

hide product count.png

 

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. 

 

edit facets.png

 

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

 

final result.png

 

Cheers,

Stephen

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

View solution in original post

StephensWorld
Shopify Expert
1178 129 296

This is an 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:

 

facets.png

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

View solution in original post

Replies 10 (10)

StephensWorld
Shopify Expert
1178 129 296

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**

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

Dabou
Explorer
118 2 16

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 

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
StephensWorld
Shopify Expert
1178 129 296

This is an 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. 

 

theme version.png

 

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;
}

 

 

 

hide product count.png

 

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. 

 

edit facets.png

 

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

 

final result.png

 

Cheers,

Stephen

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

Dabou
Explorer
118 2 16

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

 

Dabou_0-1707012307378.png

 

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Dabou
Explorer
118 2 16

@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_0-1707088721498.png

 

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
Dabou
Explorer
118 2 16

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

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
StephensWorld
Shopify Expert
1178 129 296

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. 

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

Dabou
Explorer
118 2 16

@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).

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579
StephensWorld
Shopify Expert
1178 129 296

This is an 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:

 

facets.png

★ Did my post help? If yes, then please like and accept solution. ★

Hire me for your Shopify project @ stephens.world | support@stephensworld.ca

Dabou
Explorer
118 2 16

Thank you, it worked.

Website: Dazzilia.com

Rate my website
https://community.shopify.com/c/shopify-design/rate-my-website/td-p/2439579