How to Make Product Titles in Grid Collection H4 Titles

Solved
john_93
Tourist
6 0 0

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: 

 

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h1>{{ section.title | escape }}</h1>
</div>
{% 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 -%}

<ul class="grid grid--uniform grid--view-items">
{% for product in collection.products limit: product_limit %}
<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 %}

{% for i in (1..product_limit) %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
<div class="grid-view-item product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="#">

</a>
<div class="grid-view-item__image-wrapper">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{{'homepage.onboarding.product_title'| t}}
{% include 'product-price' %}
</div>
</li>
{% endfor %}
{% endfor %}
</ul>

{% if section.settings.show_view_all %}
<hr class="hr--invisible" aria-hidden="true" />
<div class="text-center">
<a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
{{ 'collections.general.view_all' | t }}
</a>
</div>
{% endif %}

</div>

 

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

 

Thank you! 

0 Likes
JHKCreate
Shopify Partner
2052 334 448

Shouldn't you change this?

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h4>{{ section.title | escape }}</h4>
</div>
{% endif %}

 

Cheers!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
0 Likes
john_93
Tourist
6 0 0

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: 

john_93_0-1613722039245.png

 

Any other ideas? Thanks alot for your reply though.  

Cheers!

0 Likes
SagarSukhanandi
Tourist
148 25 42

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

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
0 Likes
john_93
Tourist
6 0 0

Hello @SagarSukhanandi

 

Thank you for your reply. 

 

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

 

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h4 class="h2">{{ section.settings.title | escape }}</h4>
</div>
{% endif %}

<div class="custom-content">
{%- 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 %}

<div class="custom__item custom__item--{{ block.type }} custom__item--{{ block.id }} {{ block_width_mobile }} {{ block_width }}{% if block.settings.alignment %} align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}"{% if block.type == 'image' %} id="{{ img_wrapper_id }}"{% endif %}>
{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="custom__image lazyload js"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">
</div>
<noscript>
{% 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' }}
</noscript>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
<div class="medium-up--text-{{ block.settings.align_text }}">
{% if block.settings.title != blank %}
<h4 class="h3">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte-setting rte">{{ block.settings.text }}</div>
{% endif %}
</div>
{% when 'video' %}
<div class="video-wrapper">
{% 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 %}
</div>
{% 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 %}
<div class="grid-view-item">
<a class="grid-view-item__link" href="#">
<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">
{{ 1999 | money }}
</div>
</a>
</div>
{% 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 -%}
<ul class="list--inline custom__linklist">
{%- for link in linklists[custom_linklist].links -%}
<li class="custom__linklist-item">
<a href="{{ link.url }}" class="custom__linklist-link">
{{ link.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>

0 Likes
SagarSukhanandi
Tourist
148 25 42

@john_93 Please replace code with below

<div class="page-width">
{% if section.settings.title != blank %}
<div class="section-header text-center">
<h4 class="h2">{{ section.settings.title | escape }}</h4>
</div>
{% endif %}

<div class="custom-content">
{%- 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 %}

<div class="custom__item custom__item--{{ block.type }} custom__item--{{ block.id }} {{ block_width_mobile }} {{ block_width }}{% if block.settings.alignment %} align--{{ block.settings.alignment }}{% endif %}" {{ block.shopify_attributes }}>
<div class="custom__item-inner custom__item-inner--{{ block.type }}"{% if block.type == 'image' %} id="{{ img_wrapper_id }}"{% endif %}>
{% case block.type %}
{% when 'image' %}
{% if block.settings.image != blank %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div style="padding-top:{{ 1 | divided_by: block.settings.image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="custom__image lazyload js"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.image.alt | escape }}">
</div>
<noscript>
{% 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' }}
</noscript>
{% else %}
{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
{% when 'text' %}
<div class="medium-up--text-{{ block.settings.align_text }}">
{% if block.settings.title != blank %}
<h4 class="h3">{{ block.settings.title | escape }}</h4>
{% endif %}
{% if block.settings.text != blank %}
<div class="rte-setting rte">{{ block.settings.text }}</div>
{% endif %}
</div>
{% when 'video' %}
<div class="video-wrapper">
{% 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 %}
</div>
{% 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 %}
<div class="grid-view-item">
<a class="grid-view-item__link" href="#">
<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>-->
<h4 class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</h4>
<div class="grid-view-item__meta">
{{ 1999 | money }}
</div>
</a>
</div>
{% 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 -%}
<ul class="list--inline custom__linklist">
{%- for link in linklists[custom_linklist].links -%}
<li class="custom__linklist-item">
<a href="{{ link.url }}" class="custom__linklist-link">
{{ link.title | escape }}
</a>
</li>
{%- endfor -%}
</ul>
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
0 Likes
john_93
Tourist
6 0 0

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! 

 

0 Likes
SagarSukhanandi
Tourist
148 25 42

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

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
john_93
Tourist
6 0 0

I am sorry.. 

 

0 Likes
SagarSukhanandi
Tourist
148 25 42

This is an accepted solution.

@john_93 You can verify it's done.

SagarSukhanandi_0-1613745350419.png

 

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