Solved

How to change product titles to h3s on collection pages

HGSR_2020
Excursionist
19 0 10

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 <h3>s would do the job, but it hasnt. [editing: collection.template.liquid]

              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
   >>>>>      <div class="list-view-item__title"><H3>{{ 'homepage.onboarding.product_title' | t }}</H3></div>
                 </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
Accepted Solution (1)
KetanKumar
Shopify Partner
36835 3635 11966

This is an accepted solution.

@HGSR_2020 

great thanks 

i need this snnipets file 

product-card-grid
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 13 (13)

KetanKumar
Shopify Partner
36835 3635 11966

@HGSR_2020 

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

Welcome to the Shopify community!😊
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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HGSR_2020
Excursionist
19 0 10

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 🙂

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

<div data-section-id="{{ section.id }}" data-section-type="collection-template">
  <header class="collection-header">
    {%- assign is_filter_by_available = false -%}
    {%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
      {%- assign is_filter_by_available = true -%}
    {%- endif -%}

    {% if section.settings.show_collection_image and collection.image %}
      <div class="collection-hero">
        <div class="collection-hero__image ratio-container lazyload js"
             data-bgset="{% include 'bgset', image: collection.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             data-image-loading-animation
        ></div>
        <noscript>
          <div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
        </noscript>
        <div class="collection-hero__title-wrapper">
        <h1 class="collection-hero__title page-width">
              {{ collection.title }}
          </h1>
          
        </div>
      </div>
      {% if is_filter_by_available == false and section.settings.sort_enable == false %}
        <div class="page-width">
          <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
        </div>
      {% endif %}
    
    {% else %}
      <div class="page-width">
        <div class="section-header text-center">
          <h1>
              {{ collection.title }}
          </h1>
 
          {% if is_filter_by_available == false and section.settings.sort_enable == false %}
            <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
          {% endif %}
        </div>
      </div>
    {% endif %}

    {% if is_filter_by_available or section.settings.sort_enable %}
      <div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
        <div class="page-width">
          <div class="filters-toolbar">
            <div class="filters-toolbar__item-wrapper">
              {% if section.settings.tags_enable %}
                {% unless collection.all_tags.size == 0 %}
                  <div class="filters-toolbar__item-child">
                    <label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
                    <div class="filters-toolbar__input-wrapper select-group">
                      <select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message" data-select-input>
                        <option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
                        {% for tag in collection.all_tags %}
                          {%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
                          <option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
                        {% endfor %}
                      </select>
                      {% include 'icon-chevron-down' %}
                    </div>
                  </div>
                {% endunless %}
              {% endif %}

              {% if section.settings.sort_enable %}
                <div class="filters-toolbar__item-child">
                  {%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
                  <label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
                  <div class="filters-toolbar__input-wrapper select-group">
                    <select name="sort_by" id="SortBy"
                      class="filters-toolbar__input hidden"
                      aria-describedby="a11y-refresh-page-message a11y-selection-message"
                      data-default-sortby="{{ collection.default_sort_by }}"
                      data-select-input
                    >
                      {%- for option in collection.sort_options -%}
                        <option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
                      {%- endfor -%}
                    </select>
                    {% include 'icon-chevron-down' %}
                  </div>
                </div>
              {% endif %}
            </div>

            <div class="filters-toolbar__item filters-toolbar__item--count">
              <span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
            </div>
          </div>
        </div>
      </div>
    {% endif %}
  </header>

  <div class="page-width" id="Collection">
    {% 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 %}

      <ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
        {% for product in collection.products %}
          <li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
            {% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% 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 %}
            <li class="grid__item">
              <div class="grid grid--uniform">
                {% for i in (1..limit) %}
                  <div class="grid__item {{ grid_item_width }}">
                    <div class="grid-view-item">
                      <a href="#" class="grid-view-item__link">
                        <div class="grid-view-item__image">
                          {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
                          {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                        </div>
                        <div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                        <div class="grid-view-item__meta">
                          <span class="product-price__price">$19.99</span>
                        </div>
                      </a>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </li>
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% else %}
      <ul class="list-view-items">
        {% for product in collection.products %}
          <li class="list-view-item">
            {% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
          </li>
        {% 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) %}
              <li class="list-view-item">
                <a href="#" class="list-view-item__link">
                  <div class="list-view-item__image-column">
                    <div class="list-view-item__image-wrapper">
                      <div class="list-view-item__image">
                        {% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
                        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
                      </div>
                    </div>
                  </div>

                  <div class="list-view-item__title-column">
                    <div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
                  </div>

                  <div class="list-view-item__price-column">
                    <span class="product-price__price">$19.99</span>
                  </div>
                </a>
              </li>
            {% endfor %}
          {% else %}
            {%- assign is_empty_collection = true -%}
          {% endif %}
        {% endfor %}
      </ul>
    {% endif %}

    {% if is_empty_collection %}
      <div class="grid__item small--text-center">
        <p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
      </div>
    {% endif %}

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

{% endpaginate %}

{% if collection.description != blank %}
        <div class="rte collection-description page-width">
          <div id="truncated">{{ collection.description | truncatewords: 90, "... <a class='read-more-collection'>Read More</a>" }}</div>
<div id="fullDescription" style="display: none">{{ collection.description }}</div>
        </div>
      {% endif %}

<style>
  .read-more-collection:hover{cursor:pointer}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
  var jq224 = jQuery.noConflict(true);
  jq224('#truncated').on('click', function(){
    jq224('#truncated').fadeOut(300, function(){ 
      jq224('#fullDescription').fadeIn(500);
    })
  });
</script>

 

SagarSukhanandi
Shopify Partner
279 58 69

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?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on sagar.sukhanandi@gmail.com regarding any help
KetanKumar
Shopify Partner
36835 3635 11966

This is an accepted solution.

@HGSR_2020 

great thanks 

i need this snnipets file 

product-card-grid
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
HGSR_2020
Excursionist
19 0 10

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 %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

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

  <div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

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

</div>

 

KetanKumar
Shopify Partner
36835 3635 11966

@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 %}
<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
  <a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">
    <span class="visually-hidden">{{ product.title }}</span>
  </a>

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

  <div class="product-card__image-with-placeholder-wrapper" data-image-loading-animation>
    <div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
      <div style="padding-top:{% unless preview_image == blank %}{{ 1 | divided_by: preview_image.aspect_ratio | times: 100 }}%{% else %}100%{% endunless %};">
        <img id="{{ img_id }}"
              class="grid-view-item__image lazyload"
              alt="{{ preview_image.alt }}"
              data-src="{{ img_url }}"
              data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
              data-aspectratio="{{ preview_image.aspect_ratio }}"
              data-sizes="auto"
              data-image>
      </div>
    </div>
  </div>

  <noscript>
    {% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
    <img class="grid-view-item__image" src="{{ preview_image | img_url: image_size, scale: 2 }}" alt="{{ preview_image.alt }}" style="max-width: {{ max_height | times: preview_image.aspect_ratio }}px;">
  </noscript>

  <div class="grid-view-item__title product-card__title" aria-hidden="true">
<h3>{{ product.title }} </h3>
</div>

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

</div>

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
legendcrest
Tourist
5 0 4

Hello,

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

KetanKumar
Shopify Partner
36835 3635 11966

@legendcrest 

can you please add code and share store url

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
legendcrest
Tourist
5 0 4

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?

KetanKumar
Shopify Partner
36835 3635 11966

@legendcrest 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
GeorgeRussel
New Member
5 0 0

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

GeorgeRussel
New Member
5 0 0

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

suyash1
Shopify Partner
8989 1117 1466

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Paranormal story video created using AI