How to Make Product Titles in Grid Collection H4 Titles

john_93 · February 18, 2021, 4:06pm

Hello, I would like to get the Product titles on all the collection pages on this site: https://toolboxtools.co.uk/ to be H4 Titles, but with the same formating as at present.

The collection.liquid file is:

{% if section.settings.title != blank %}

{% endif %}

{%- assign collection = collections[section.settings.collection] -%}

{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{%- assign grid_item_width = ‘medium-up–one-half’ -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-third’ -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-quarter’ -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{%- assign grid_item_width = ‘small–one-half medium-up–one-fifth’ -%}
{% endcase %}

{%- assign product_limit = section.settings.grid | times: section.settings.rows -%}

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

{% for i in (1..product_limit) %}

{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %} {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
{{'homepage.onboarding.product_title'| t}} {% include 'product-price' %}

{% if section.settings.show_view_all %}

{% endif %}

Be glad of any help on this one! up against a brick wall!

Thank you!

JHKCreate · February 18, 2021, 6:49pm

Shouldn’t you change this?


{% if section.settings.title != blank %}

#### {{ section.title | escape }}

{% endif %}

Cheers!

john_93 · February 19, 2021, 8:08am

Hello @JHKCreate ,

Thank you for your reply.

Nope, that’s not changed anything! It really baffles me…

I just want the product titles to be h4’s and they just will not work…

Want this text to be h4:

Any other ideas? Thanks alot for your reply though.

Cheers!

SagarSukhanandi · February 19, 2021, 1:15pm

Hello @john_93 , Happy to help you on this issue

Can you please share code from file Sections - > custom-content.liquid

On this file you will be able to find div with class “h4 grid-view-item__title” you just need to replace div with h4 tag.

If you need help with code edit then please share login details for you store

john_93 · February 19, 2021, 1:25pm

Hello @SagarSukhanandi ,

Thank you for your reply.

Here is that code: (Fairly confident editing code, but this one just stumping me what to put!!

{% if section.settings.title != blank %}

{% endif %}

{%- assign block_width_mobile = '' -%}

{% for block in section.blocks %}
{% case block.settings.width %}
{% when ‘25%’ %}
{%- assign max_height = 250 -%}
{%- assign block_width = ‘medium-up–one-quarter’ -%}
{%- assign block_width_mobile = ‘small–one-half’ -%}
{% when ‘33%’ %}
{%- assign max_height = 345 -%}
{%- assign block_width = ‘medium-up–one-third’ -%}
{%- assign block_width_mobile = ‘small–one-half’ -%}
{% when ‘50%’ %}
{%- assign max_height = 530 -%}
{%- assign block_width = ‘medium-up–one-half’ -%}
{%- assign block_width_mobile = ‘small–one-half’ -%}
{% when ‘66%’ %}
{%- assign max_height = 720 -%}
{%- assign block_width = ‘two-thirds’ -%}
{% when ‘75%’ %}
{%- assign max_height = 810 -%}
{%- assign block_width = ‘three-quarters’ -%}
{% when ‘100%’ %}
{%- assign max_height = 1090 -%}
{%- assign block_width = ‘one-whole’ -%}
{% endcase %}

{%- if block.type == ‘blog’ or block.type == ‘article’ -%}
{%- assign block_width_mobile = ‘small–one-whole’ -%}
{%- endif -%}

{% if block.type == ‘image’ %}
{% capture img_id %}CustomImage–{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}
{% capture img_wrapper_id %}CustomImageWrapper–{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}

{% unless block.settings.image == blank %}
{% include ‘image-style’, image: block.settings.image, height: max_height, wrapper_id: img_wrapper_id, img_id: img_id %}
{% endunless %}
{% endif %}

{% case block.type %} {% when 'image' %} {% if block.settings.image != blank %} {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% capture image_size %}{{ max_height }}x{% endcapture %} {{ block.settings.image | img_url: image_size, scale: 2, crop: 'top' | img_tag: block.settings.image.alt, 'custom__image' }} {% else %} {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %} {% when 'text' %}

{% if block.settings.title != blank %}

{% endif %} {% if block.settings.text != blank %}

{% endif %}

{% when 'video' %}

{% if block.settings.video_url == blank %} {% else %} {% if block.settings.video_url.type == "youtube" %} {% endif %} {% if block.settings.video_url.type == "vimeo" %} {% endif %} {% endif %}

{% when 'product' %} {%- assign product = all_products[block.settings.product] -%} {% if product.title.size > 0 %} {% include 'product-card-grid', max_height: max_height, product: product %} {% else %} {% comment %} No product yet. Show onboarding one. {% endcomment %}

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

{% endif %} {% when 'collection' %} {%- assign collection = collections[block.settings.collection] -%} {% include 'collection-grid-item', collection: collection %} {% when 'html' %} {% if block.settings.code != blank %} {{ block.settings.code }} {% endif %} {%- when 'link_list' -%} {%- assign custom_linklist = block.settings.menu -%}

{{ link.title | escape }}

SagarSukhanandi · February 19, 2021, 1:31pm

@john_93 Please replace code with below


{% if section.settings.title != blank %}

#### {{ section.settings.title | escape }}

{% endif %}

{%- assign block_width_mobile = '' -%}

{% for block in section.blocks %}
{% case block.settings.width %}
{% when '25%' %}
{%- assign max_height = 250 -%}
{%- assign block_width = 'medium-up--one-quarter' -%}
{%- assign block_width_mobile = 'small--one-half' -%}
{% when '33%' %}
{%- assign max_height = 345 -%}
{%- assign block_width = 'medium-up--one-third' -%}
{%- assign block_width_mobile = 'small--one-half' -%}
{% when '50%' %}
{%- assign max_height = 530 -%}
{%- assign block_width = 'medium-up--one-half' -%}
{%- assign block_width_mobile = 'small--one-half' -%}
{% when '66%' %}
{%- assign max_height = 720 -%}
{%- assign block_width = 'two-thirds' -%}
{% when '75%' %}
{%- assign max_height = 810 -%}
{%- assign block_width = 'three-quarters' -%}
{% when '100%' %}
{%- assign max_height = 1090 -%}
{%- assign block_width = 'one-whole' -%}
{% endcase %}

{%- if block.type == 'blog' or block.type == 'article' -%}
{%- assign block_width_mobile = 'small--one-whole' -%}
{%- endif -%}

{% if block.type == 'image' %}
{% capture img_id %}CustomImage--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}
{% capture img_wrapper_id %}CustomImageWrapper--{{ forloop.index }}-{{ block.settings.image.id }}{% endcapture %}

{% unless block.settings.image == blank %}
{% include 'image-style', image: block.settings.image, height: max_height, wrapper_id: img_wrapper_id, img_id: img_id %}
{% endunless %}
{% endif %}

{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}

{% if block.settings.title != blank %}
#### {{ block.settings.title | escape }}
{% endif %}
{% if block.settings.text != blank %}
{{ block.settings.text }}

{% endif %}

{% when 'video' %}

{% if block.settings.video_url == blank %}
<iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen=""></iframe>
{% else %}
{% if block.settings.video_url.type == "youtube" %}
<iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen=""></iframe>
{% endif %}
{% if block.settings.video_url.type == "vimeo" %}
<iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen=""></iframe>
{% endif %}
{% endif %}

{% when 'product' %}
{%- assign product = all_products[block.settings.product] -%}
{% if product.title.size > 0 %}
{% include 'product-card-grid', max_height: max_height, product: product %}
{% else %}
{% comment %}
No product yet. Show onboarding one.
{% endcomment %}

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

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

{{ 1999 | money }}

{% endif %}
{% when 'collection' %}
{%- assign collection = collections[block.settings.collection] -%}
{% include 'collection-grid-item', collection: collection %}
{% when 'html' %}
{% if block.settings.code != blank %}
{{ block.settings.code }}
{% endif %}
{%- when 'link_list' -%}
{%- assign custom_linklist = block.settings.menu -%}

{%- for link in linklists[custom_linklist].links -%}
- {{ link.title | escape }}

{%- endfor -%}

john_93 · February 19, 2021, 1:47pm

Hello @SagarSukhanandi ,

Not sure what I am doing wrong…

Care to have a look?

https://toolboxtools.co.uk/admin

temp pswd:

Thanks for your help so far though!

SagarSukhanandi · February 19, 2021, 2:10pm

@john_93 Not able to login with this password. Could you please share store email and password to login?

john_93 · February 19, 2021, 2:16pm

I am sorry..

SagarSukhanandi · February 19, 2021, 2:36pm

@john_93 You can verify it’s done.

john_93 · February 19, 2021, 2:45pm

@SagarSukhanandi

Beautiful!!! You are a star!!! Really Really Appreciate that help.

SagarSukhanandi · February 19, 2021, 2:47pm

@john_93 Thank you so much for your great words. It will be great if you will like and accept all my solutions

lykkefish · July 19, 2022, 6:20am

Hi there, I would like to add an additional title below the products in the product grid view page like the one in https://toolboxtools.co.uk/collections/ox-bricklaying-tools

the current theme i’m using is the Modular theme.

website: lykkefish1.myshopify.com

password: yeugla

Which code should I add and on which section?

SagarSukhanandi · July 19, 2022, 6:26am

Hi @lykkefish

It will be the same for all products or different?

lykkefish · July 19, 2022, 9:19am

different for all products

Topic		Replies	Views
How to change product titles to h3s on collection pages Store Design collection-page	13	6	October 11, 2022
Why are product titles duplicating in my e-commerce store code? Technical Q&A	7	73	July 2, 2022
How can I set the product title as H3 tag on a collection page? Store Design	0	3	September 22, 2022
Product title on Collection Page in Simple Theme Store Design	4	0	December 20, 2021
Swap product section with the text section Technical Q&A	15	1	March 2, 2022

How to Make Product Titles in Grid Collection H4 Titles

{{ section.title | escape }}

{{ section.settings.title | escape }}

{{ block.settings.title | escape }}

Related topics