How to change product titles to h3s on collection pages

Hi,

Just wondering if anyone can help me change product titles to h3s on collection pages (using Debut theme)???

I would have imagined changing the line below and adding

s would do the job, but it hasnt. [editing: collection.template.liquid]

- {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      

                    

                  

                  
     >>>>>      
  ### {{ 'homepage.onboarding.product_title' | t }}

                 

                  
                      $19.99
                  

                
              

1 Like

@HGSR_2020

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site full code it something is missing,
I will check out the issue and provide you a solution here.

1 Like

@HGSR_2020 - you have correct logic, but just check if you have one more title code in page, may be in some if else condition and add h3 in it too. If you can not find it then please add me to staff , I will check it, you have my email below.

1 Like

Hi Ketan,

Thanks for your response. Here is the full code for collection-template.liquid. Please let me know if you need anything else to assist :slightly_smiling_face:

{% case section.settings.grid %}
  {% when 2 %}
    {%- assign max_height = 530 -%}
  {% when 3 %}
    {%- assign max_height = 345 -%}
  {% when 4 %}
    {%- assign max_height = 250 -%}
  {% when 5 %}
    {%- assign max_height = 195 -%}
{% endcase %}

{% if section.settings.layout == 'grid' %}
  {%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
  {%- assign limit = 16 -%}
{% endif %}

{% paginate collection.products by limit %}

  

  
    {% if section.settings.layout == 'grid' %}
      {% case section.settings.grid %}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 3 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
      {% when 4 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
      {% when 5 %}
        {%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
      {% endcase %}

      

        {% for product in collection.products %}
          - {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
          

        {% else %}
          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
            - {% for i in (1..limit) %}
                  

                    

                      
                        

                            {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                            {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        

                          {{ 'homepage.onboarding.product_title' | t }}

                        
                            $19.99
                        

                      
                    

                  

                  {% endfor %}
              

            
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      

    {% else %}
      
        {% for product in collection.products %}
          - {% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
          

        {% else %}

          {% comment %}
          Add default products to help with onboarding for collections/all only.

          The onboarding styles and products are only loaded if the
          store has no products.
          {% endcomment %}
          {% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
            {% for i in (1..4) %}
              - {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      

                    

                  

                  
                    
  {{ 'homepage.onboarding.product_title' | t }}

                  

                  
                      $19.99
                  

                
              
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      

    {% endif %}

    {% if is_empty_collection %}
      
        

{{ 'collections.general.no_matches' | t }}

      

    {% endif %}

    {%- if paginate.pages > 1 -%}
      {% include 'pagination', paginate: paginate %}
    {%- endif -%}
  

{% endpaginate %}

{% if collection.description != blank %}
        
          
{{ collection.description | truncatewords: 90, "... Read More" }}

{{ collection.description }}

        

      {% endif %}

1 Like

Hello @HGSR_2020

Happy to help you on this issue

Could you please add me as staff so i can make changes to your collection template?

@HGSR_2020

great thanks

i need this snnipets file

product-card-grid
1 Like

Hi Ketan

Thanks - here it is. Would it be editing the 3 line from the bottom to add the h3s? What about the styling to remain the same?

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

  
    {{ product.title }}
  

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  

    

      

        
      

    

  

  

  {{ product.title }}

  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

1 Like

@HGSR_2020

great, thanks for the code

{% comment %}
    Renders a product card using "Grid" style
    Accepts:
    - max_height: {Number} Maximum height of the product's image (required)
    - product: {Object} Product Liquid object (required)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

  
    {{ product.title }}
  

  {% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
  {% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
  {%- assign preview_image = product.featured_media.preview_image -%}
  {%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

  {% unless preview_image == blank %}
    {% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
  {% endunless %}

  

    

      

        
      

    

  

  

  
### {{ product.title }} 

  {% include 'product-price-listing', product: product, show_vendor: show_vendor %}

Hello,

Need same help. I cant see the product-grid-card so not sure how to update mine

1 Like

@legendcrest

can you please add code and share store url

Here is the store URL: https://www.hollywoodmirrors.co.uk/collections/dressing-table-mirror

Unfortunately, im not sure which code to share with you. Is it the liquid code?

1 Like

@legendcrest

thanks ,can you please send collection code so i will update

Sir, could you please help me add product titles as h3 tags on my collection pages? Here is the store url: https://www.ecloudlight.com/collections/100g-qsfp28

Sir, could you please help me add product titles as h3 tags on my collection pages? Here is the store url: https://www.ecloudlight.com/collections/100g-qsfp28

{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% assign product_per_page = cart.attributes.pagination %}
{% else %}
{% assign product_per_page = section.settings.collection_results_per_page %}
{% endif %}

{% paginate collection.products by product_per_page %}

{% case section.settings.collection_results_per_row %}
{% when '1' %}
{%- assign grid_item_width = 'col-12' -%}
{%- assign rows = 'products-list' -%}

{% when '2' %}
{%- assign grid_item_width = 'col-6' -%}
{%- assign rows = 'products-grid' -%}

{% when '3' %}
{%- assign grid_item_width = 'col-6 col-md-4' -%}
{%- assign rows = 'products-grid' -%}

{% when '4' %}
{%- assign grid_item_width = 'col-6 col-md-4 col-lg-3 col4' -%}
{%- assign rows = 'products-grid' -%}

{% when '5' %}
{%- assign grid_item_width = 'col-6 col-md-4 col-lg-3 col5' -%}
{%- assign rows = 'products-grid' -%}
{% endcase %}
<div id="shopify-section-collection-template-default" class="shopify-section col-12 col-xl-9 col-main">
{% render 'collection-header' %}
{% render 'toolbar' %}
<div id="CollectionProductGrid">
<div data-section-id="{{ section.id }}" data-section-type="collection-template" id="main-collection-product-grid" data-id="{{ section.id }}">
<div class="product-collection {{ rows }} row">
{% if collection.products_count > 0 %} 
{% for product in collection.products %}
<div class="grid-item {{ grid_item_width }} {% if settings.product_image_border%}grid-item-border {% endif %}">
{% if settings.style_product_grid == 'style_product_grid_2' %}
{% render 'product-grid-item-style-2' with product as product, serial: forloop.index %}
{% elsif settings.style_product_grid == 'style_product_grid_3' %}
{% render 'product-grid-item-style-3' with product as product, serial: forloop.index %}
{% elsif settings.style_product_grid == 'style_product_grid_4' %}
{% render 'product-grid-item-style-4' with product as product, serial: forloop.index %}
{% elsif settings.style_product_grid == 'style_product_grid_6' %}
{% render 'product-grid-item-style-6' with product as product, serial: forloop.index %}
{% elsif settings.style_product_grid == 'style_product_grid_7' %}
{% render 'product-grid-item-style-7' with product as product, serial: forloop.index %}
{% else %} 
{% render 'product-grid-item' with product as product, serial: forloop.index %}
{% endif %}
</div>
{% endfor %}
{% else %}
<p class="col-12 text-center" {% if settings.enable_multilang %}data-translate="collections.general.no_matches"{% endif %}>
{{ 'collections.general.no_matches' | t }}
</p>
{% endif %}
</div>

{% if paginate.pages > 1 %}
<div class="padding">
{% render 'pagination-page' paginate: paginate %}
</div>
{% endif %}
</div>
</div>
</div>
{% endpaginate %}