I’ trying to make title limit in our product grid but unfortunately unable to do that , currently we using Yanka Theme purchase from themeforest
You can use this to set character limit
{{ product.title | truncate: 20 }}
Or this to set word limit:
{{ product.title | truncatewords: 5 }}
Change numbers as you require
Thank you for your reply I’m trying to do that but this code is not available in my theme, else I can do it my self ,
Hi @Mirakia_Inc
Try this and see if it works. Before you proceed, make sure to create a copy of the live theme and then try these.
Modifying the template file directly:
- From your Shopify admin dashboard, go to “Online Store” and select “Themes.”
- Find the Yanka theme and click on “Actions” > “Edit Code.”
- In the “Sections” or “Templates” directory, look for the file responsible for rendering the product grid. It might be named something like product-grid.liquid or collection-grid-item.liquid.
- Open the file and search for the code that displays the product title. It may look like
{{ product.title }}
or similar. - To limit the title length, you can use the truncate filter. Modify the code to something like
{{ product.title | truncate: 20 }}
, where 50 represents the character limit for the title. Adjust the number as per your preference as suggested by kgbfashionista.
In addition, I would suggest you to refer the theme documentation or reaching out to the theme developer if under support period. If not, we will be happy to look into it and customize it for you.
Thanks for your reply
I have found that directory "product-grid.liquid " but there is no such code available as we check see the below code
{%- capture url_images_size -%}{%- if external_size != empty? -%}{{ external_size }}{%- else -%}800x{%- endif -%}{%- endcapture -%}
{%- assign product_meta = product.metafields.description -%}
{%- comment -%} Price to show. {%- endcomment -%}
{%- assign sale_on = false -%}
{%- assign shownewicon = false -%}
{%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
{%- assign sale_on = true -%}
{%- endif -%}
{%- comment -%} Main Image URL. {%- endcomment -%}
{%- assign main_url_image = product.featured_image -%}
{%- assign hover_url_image = “” -%}
{%- if product.images[1] -%}{%- if product.images[1].src contains “hover” or product_meta.hover == ‘true’ -%}
{%- assign hover_url_image = product.images[1].src -%}
{%- assign hover_url_image_alt = product.images[1].alt -%}
{%- endif -%}{%- endif -%}
{%- comment -%}
date_difference = 60 * 60 * 24 * day counter, this is new product period in seconds
{%- endcomment -%}
{%- assign date_now = ‘now’ | date: “%s” -%}
{%- assign date_published = product.published_at | date: “%s” -%}
{%- assign date_difference = date_now | minus: date_published -%}
{%- assign date_limit = 86400 | times: settings.new_product_period -%}
{%- if settings.show_unavailable_variants -%}
{%- assign pr_variant = product.variants | first -%}
{%- else -%}
{%- assign pr_variant = product.selected_or_first_available_variant -%}
{%- endif -%}
{%- assign pid = product.id | append:“” -%}
{%- assign wl = customer.metafields.wishlist -%}
{%- unless wl == blank -%}
{%- if wl[pid] == blank -%}
{%- assign wl_text = false -%}
{%- else -%}
{%- assign wl_text = true -%}
{%- endif -%}
{%- else -%}
{%- assign wl_text = false -%}
{%- endunless -%}
{%- capture wishlist_button -%}
{%- assign ch_wishlist = false -%}
{%- if settings.product_item_show_wishlist and settings.show_wishlist -%}
{%- assign ch_wishlist = true -%}
{%- endif -%}
{%- if ch_wishlist or template.suffix == “wishlist” -%}
{%- if settings.enable_growave_wishlist and settings.enable_growave -%}
{% include “growave_app_snippet” fromfile: “product-grid-item” %}
{%- else -%}
<a href=“{{ product.url | within: collection }}”
data-productid=“{{ product.id }}”
data-add=“{{ “wishlist.buttons_text.tooltip_add” | t }}”
data-remove=“{{ “wishlist.buttons_text.tooltip_remove” | t }}”
data-prpage-add=“{{ “wishlist.buttons_text.page_text_add” | t }}”
data-prpage-rem=“{{ “wishlist.buttons_text.page_text_remove” | t }}”
data-tooltip=“{% if template.suffix == “wishlist” %}{{ “wishlist.buttons_text.tooltip_remove” | t }}{% else %}{{ “wishlist.buttons_text.tooltip_add” | t }}{% endif %}”
data-tposition=“left”
data-type=“wishlist”
data-action=“{% if template.suffix == “wishlist” %}wk-remove{% else %}wk-add{% endif %}”
class=“wk-app-btn tt-btn-wishlist wlbutton-js{% if template.suffix == “wishlist” %} wk-delete-icon{% endif %}”>
{% if template.suffix == “wishlist” %}
{% include “svg-delete-icon” %}
{% else %}
{% include “svg-wishlist” %}
{% include “svg-wishlist_active” %}
{{ “wishlist.buttons_text.page_text_add” | t }}
{% endif %}
{%- endif -%}
{%- endif -%}
{%- endcapture -%}
{%- capture compare_button -%}
{% if settings.product_item_show_compare and settings.show_compare and template.suffix != “wishlist” and settings.catalogue_mode == false %}
<a href=“{{ product.url | within: collection }}”
class=“wk-app-btn pt-btn-compare compare-js”
data-action=“wk-add”
data-add=“{{ “compare.buttons_text.tooltip_add” | t }}”
data-remove=“{{ “compare.buttons_text.tooltip_remove” | t }}”
data-prpage-add=“{{ “compare.buttons_text.page_text_add” | t }}”
data-prpage-rem=“{{ “compare.buttons_text.page_text_remove” | t }}”
data-tooltip=“{{ “compare.buttons_text.tooltip_add” | t }}”
data-tposition=“left”
data-compareid=“{{ pr_variant.id }}”>
{% include “svg-compare” %}
{% include “svg-compare_active” %}
{{ ‘compare.buttons_text.page_text_add’ | t }}
{% endif %}
{%- endcapture -%}
{% assign compare_button = compare_button | strip %}
{%- case settings.products_design -%}
{%- when ‘type2’ -%}
{%- include “product-grid-item-design-2” -%}
{%- else -%}
{%- include “product-grid-item-design-1” -%}
{%- endcase -%}
Thanks
Hey @Mirakia_Inc
Thanks for your response. In that code review will be required and customization will be required to made. It is possible that the the customization is coming from some other code file.
If you have an active developer or agency who support your website, I would suggest reaching out to them or we can help you at MakkPress.
You can reach out to us here - https://experts.shopify.com/makkpress-technologies
We will be happy to help.
I am almost sure this is not the whole code from there, as I could not even see the price, let alone the title of the product.