Liquid, JavaScript, themes, sales channels
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!
Solved! Go to the solution
This is an accepted solution.
@john_93 You can verify it's done.
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!
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!
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
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>
@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>
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!
@john_93 Not able to login with this password. Could you please share store email and password to login?
I am sorry..
This is an accepted solution.
@john_93 You can verify it's done.
Beautiful!!! You are a star!!! Really Really Appreciate that help.
@john_93 Thank you so much for your great words. It will be great if you will like and accept all my solutions
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?
Hi @lykkefish
It will be the same for all products or different?
different for all products
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024