Limit the number of characters of the product title on a collection page

Store Design
1

Hello!

I’ve been trying to fix this with the help of older posts. But i’m not sure how to properly change this. I am using Superstore theme, which contains a bit of different coding.

https://www.bendyxl.nl

Can anyone help me and show me where to enter the code for example:

{{ product.title  | truncate: 30}}

I’m afraid i will change it the wrong way..

2

@reggiepijls

Open snippet->product-grid-item.liquid and find {{ product.title }}

now change this code with below:

{{ product.title  | truncate: 30}}
3

@reggiepijls

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

4

@reggiepijls

It’s difficult you to find the code. Where to put it. and it difficult to us to explain about it.

So let me help you to add this code.

Thank you.

5

Store URL = https://www.bendyxl.nl

6

@reggiepijls

To find the right place and add the code.

We need the collaboration access for that.

7

Hello there,
i have implemented in Dawn

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find snippets/card-product.liquid.
{{ card_product.title | truncate: 30}}

Screenshot:-Screenshot by Lightshot
Screenshot:-Screenshot by Lightshot

8

Hi,

The card_product snippet isn’t available in my theme..

How can i allow collaboration access?

9

How do i start collab access?

10

Hi, thank you!!

11

Hi @reggiepijls ,

I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )

I will love to help you with your concern.

It would be difficult to give you the exact solution without checking the backend code.

Can we get backend access to your store? if you want we can continue the conversation via DM or personal chat.

If you have any concerns feel free to ask me!

Regards,
Ani

12

Hello @reggiepijls ,
Greetings!!

Open snippet->product-grid-item.liquid and fine {{ product.title }}

now change this code with below: https://nimb.ws/pXx4Y8

{{ product.title  | truncate: 30}}

Note: you can change 30 with any number which means they show 30 characters of the title.
Output : https://prnt.sc/y5XtShe7j4sM

If it is helpful then please like and accept it as a solution!

13

harshshah9720_0-1665176783533.png
harshshah9720_0-1665176783533.png1625×719 69.9 KB

{% comment %}
Renders a product card

Accepts:

  • card_product: {Object} Product Liquid object (optional)
  • media_aspect_ratio: {String} Size of the product image card. Values are “square” and “portrait”. Default is “square” (optional)
  • show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
  • show_vendor: {Boolean} Show the product vendor. Default: false
  • show_rating: {Boolean} Show the product rating. Default: false
  • extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
  • lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
  • show_quick_add: {Boolean} Show the quick add button.
  • section_id: {String} The ID of the section that contains this card.

Usage:
{% render ‘card-product’, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == nil
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {{ card_product.featured_media.alt | escape }} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != nil and show_secondary_image -%}
<img
srcset=“{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w”
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}

{{ card_product.title | escape }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}

{{ block.settings.description | escape }}

{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}

{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}

({{ card_product.metafields.reviews.rating_count }}) {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}

{%- endif -%}

{% render ‘price’, product: card_product, price_class: ‘’ %}

{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%} {%- if card_product.variants.size == 1 -%} {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%} {%- if card_product.selected_or_first_available_variant.available -%} {{ 'products.product.add_to_cart' | t }} {%- else -%} {{ 'products.product.sold_out' | t }} {%- endif -%} {{ 'products.product.sold_out' | t }}
{%- endform -%} {%- else -%} {{ 'products.product.choose_options' | t }}
{% render 'icon-close' %}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%} {{ 'products.product.sold_out' | t }} {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%} {{ 'products.product.on_sale' | t }} {%- endif -%}
{%- else -%}

{{ 'onboarding.product_title' | t }}

{%- if show_vendor -%} {{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%} {% render 'price' %}
{%- endif -%}

here is the complete code

14

Thank you. This worked for ‘Debut’ theme.

15

Do you have a solution for the Refresh theme too? Doesn’t work for me