Solved

How to Make Product Titles in Grid Collection H4 Titles

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! 

Accepted Solution (1)
SagarSukhanandi
Shopify Partner
279 58 71

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

View solution in original post

Replies 14 (14)

JHKCreate
Shopify Expert
3571 639 916

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

Learn more about us: jhkcreate.com
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!

SagarSukhanandi
Shopify Partner
279 58 71

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

SagarSukhanandi
Shopify Partner
279 58 71

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

 

SagarSukhanandi
Shopify Partner
279 58 71

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

 

SagarSukhanandi
Shopify Partner
279 58 71

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

@SagarSukhanandi 

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

SagarSukhanandi
Shopify Partner
279 58 71

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

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
lykkefish
Visitor
2 0 0

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

lykkefish_0-1658211549508.png

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
Shopify Partner
279 58 71

Hi @lykkefish 

It will be the same for all products or different? 

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
lykkefish
Visitor
2 0 0

different for all products