Hello,
I want to reduce the amount of title card text on my product title. Currently, seven lines of the title are showing - I would like to reduce that to two. Thanks for the help!
Website: selvence.com
Hi @Selvence
Please add the following code to your theme.css file at the very end:
h2.productitem--title {
text-transform: uppercase;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1rem;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
min-height: 25px;
margin-bottom: 5px;
}
Let me know if that works for you and don’t forget to like/mark as a solution if that works for you!
Please add the following CSS code to your theme.css bottom of the file.
h2.productitem--title {
text-transform: uppercase;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1rem;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
min-height: 25px;
margin-bottom: 5px;
}
Thanks!
sorry for this issue can you just add this code on your product-gird-item or product-card it is added to your product listing file if do not able can you please just share
{{ product.title | truncate: 50 }}
Please add the following code at the bottom of your assets/theme.css file.
h2.productitem--title {
line-height: 1.5em;
height: 3em;
overflow: hidden;
width: 100%;
display: block;
}
Hope this helps.
Thanks!
I think we are getting somewhere. When inserting
{{ product.title | truncate: 50 }}
into
on the very last line of the code, I get this:
- Still needs work
if possible to share product-grid-item code so i will update
1 Like
product-grid-item.liquid
{% comment %}
product {Object}
Required to show product information
{% endcomment %}
{% assign product_grid_show_second_image = settings.product_grid_show_second_image %}
{% assign emphasize_price = settings.product_grid_emphasize_price %}
{% assign quick_shop_display = settings.product_grid_show_quickshop %}
{% assign atc_display = settings.product_grid_show_atc %}
{% assign product_ratings_reviews = settings.product_ratings_reviews %}
{% assign product_ratings_star_display = settings.product_ratings_star_display %}
{% assign money_format = shop.money_format | strip_html %}
{% if product %}
{% assign compare_at_price = product.compare_at_price %}
{% assign compare_at_price_varies = product.compare_at_price_varies %}
{% assign price = product.price %}
{% assign price_varies = product.price_varies %}
{% assign product_available = product.available %}
{% assign product_title = product.title %}
{% assign product_vendor = product.vendor %}
{% assign product_link = product.url | within: collection %}
{% assign product_description = product.description | strip_html %}
{% assign product_description_size = product.description | strip_html | size %}
{% if recently_viewed == true %}
{%- capture recently_viewed_header -%}
{%- endcapture -%}
{% endif %}
{% else %}
{% assign onboarding = true %}
{% assign compare_at_price = 1999 %}
{% assign compare_at_price_varies = false %}
{% assign price = 1999 %}
{% assign price_varies = false %}
{% assign product_available = true %}
{% assign product_title = 'onboarding.product.title' | t %}
{% assign product_vendor = 'onboarding.product.vendor' | t %}
{% assign product_link = '#' %}
{% endif %}
{% assign on_sale = false %}
{% if compare_at_price > price %}
{% assign on_sale = true %}
{% endif %}
{% assign has_variants = false %}
{% unless product.has_only_default_variant %}
{% assign has_variants = true %}
{% endunless %}
{%
include 'consistent-savings',
variants: product.variants,
on_sale: on_sale
%}
{%- capture classes -%}
productgrid--item
imagestyle--{% if settings.product_grid_image_crop and settings.product_grid_image_style != 'natural' %}cropped-{% endif %}{{ settings.product_grid_image_style }}
{% unless product.featured_image %}imagestyle--no-image{% endunless %}
{% if on_sale %}productitem--sale{% endif %}
{% if emphasize_price %}productitem--emphasis{% endif %}
{% if recently_viewed %}product-recently-viewed-card{% endif %}
{% if atc_display == 'always' or quick_shop_display == 'always' %}show-actions--mobile{% endif %}
{%- endcapture -%}
{% capture to_hash %}
{{ shop.money_format | strip_html }}
{{ settings | json }}
{{ 'product.buttons.add_to_cart' | t }}
{{ 'product.buttons.sold_out' | t }}
{{ product | json }}
{% endcapture %}
{% assign to_hash = to_hash | replace: ' ', '' | sha256 %}
{%- assign show_swatches = false -%}
{% assign initial_image = product.featured_media.preview_image.src %}
{%- if settings.swatches_enable and recently_viewed != true -%}
{% comment %} Check if product should show swatches {% endcomment %}
{%- for option in product.options_with_values -%}
{%- assign swatch_trigger = settings.swatches_swatch_trigger | strip | downcase -%}
{%- assign option_name = option.name | downcase -%}
{%- if option_name == swatch_trigger -%}
{%- assign show_swatches = true -%}
{%- assign swatch_values = option.values -%}
{%- assign swatch_values_count = option.values.size -%}
{%- assign swatch_option_key = 'option' | append: forloop.index -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{% if section.settings.filter_style == 'groups' and current_tags and show_swatches %}
{% comment %} We are filtered by tags, so check and see if it's filtering by swatch {% endcomment %}
{% for tag in current_tags %}
{% assign tag_group = tag | split: '_' | first | downcase %}
{% if tag_group == swatch_trigger %}
{% assign active_swatch_name = tag | split: '_' | last | downcase %}
{% comment %} Filter variants by swatch (for ex. where color == blue). Can't use | where due to case sensitivity {% endcomment %}
{% for variant in product.variants %}
{% assign option_value = variant[swatch_option_key] | downcase %}
{% if option_value == active_swatch_name %}
{% if variant.image %}
{% assign initial_image = variant.image %}
{% endif %}
{% break %}
{% endif %}
{% endfor %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% capture product_item_swatches %}
{%- if show_swatches -%}
{%- endif -%}
{% endcapture %}
{%- endif -%}
- {{ recently_viewed_header }}
{%- capture product_item_price -%}
{%
include 'product-price',
class_root: 'productitem',
price: price,
price_varies: price_varies,
compare_at_price: compare_at_price,
compare_at_price_varies: compare_at_price_varies,
on_sale: on_sale,
emphasize_price: emphasize_price,
show_original: consistent_saved
%}
{%- endcapture -%}
{{ product_item_swatches }}
{% if emphasize_price %}
{{ product_item_price }}
{% endif %}
##
{{ product_title }}
{% if settings.product_show_vendor and product.vendor != blank %}
{{ product_vendor | link_to_vendor }}
{% endif %}
{% unless emphasize_price %}
{{ product_item_price }}
{% endunless %}
{% if product_ratings_reviews and product_ratings_star_display == "all" %}
{% endif %}
{% if product_description %}
{{ product_description | truncate: 150 }}
{% if product_description_size > 150 and product_link %}
{{ 'product.buttons.view_details' | t }}
{% endif %}
{% endif %}
{% unless recently_viewed %}
{% if quick_shop_display != 'disabled' or atc_display != 'disabled' %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = 'product.buttons.quick_shop' | t %}
{% assign quick_buy_text = 'product.buttons.add_to_cart' | t %}
{% assign quick_shop_classes = 'productitem--action-trigger button-secondary' %}
{% assign quick_buy_classes = 'productitem--action-trigger productitem--action-atc button-primary' %}
{% if has_variants %}
{% assign quick_buy_text = 'product.buttons.choose_options' | t %}
{% endif %}
{% unless product_available %}
{% assign quick_buy_text = 'product.buttons.sold_out' | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ' disabled' %}
{% endunless %}
{% if section.settings.grid_list %}
{{ product_item_price }}
{%
include 'product-badge',
class_root: 'productitem',
product_available: product_available,
on_sale: on_sale,
price: price,
compare_at_price: compare_at_price,
show_saved: consistent_saved
%}
{% endif %}
{% if quick_shop_display != 'disabled' %}
{% endif %}
{% if atc_display != 'disabled' %}
{% endif %}
{% endif %}
{% endunless %}
{% if atc_display != 'disabled' %}
{% endif %}
thanks for code can you please try this
{% comment %}
@param product {Object}
Required to show product information
{% endcomment %}
{% assign product_grid_show_second_image = settings.product_grid_show_second_image %}
{% assign emphasize_price = settings.product_grid_emphasize_price %}
{% assign quick_shop_display = settings.product_grid_show_quickshop %}
{% assign atc_display = settings.product_grid_show_atc %}
{% assign product_ratings_reviews = settings.product_ratings_reviews %}
{% assign product_ratings_star_display = settings.product_ratings_star_display %}
{% assign money_format = shop.money_format | strip_html %}
{% if product %}
{% assign compare_at_price = product.compare_at_price %}
{% assign compare_at_price_varies = product.compare_at_price_varies %}
{% assign price = product.price %}
{% assign price_varies = product.price_varies %}
{% assign product_available = product.available %}
{% assign product_title = product.title %}
{% assign product_vendor = product.vendor %}
{% assign product_link = product.url | within: collection %}
{% assign product_description = product.description | strip_html %}
{% assign product_description_size = product.description | strip_html | size %}
{% if recently_viewed == true %}
{%- capture recently_viewed_header -%}
{%- endcapture -%}
{% endif %}
{% else %}
{% assign onboarding = true %}
{% assign compare_at_price = 1999 %}
{% assign compare_at_price_varies = false %}
{% assign price = 1999 %}
{% assign price_varies = false %}
{% assign product_available = true %}
{% assign product_title = 'onboarding.product.title' | t %}
{% assign product_vendor = 'onboarding.product.vendor' | t %}
{% assign product_link = '#' %}
{% endif %}
{% assign on_sale = false %}
{% if compare_at_price > price %}
{% assign on_sale = true %}
{% endif %}
{% assign has_variants = false %}
{% unless product.has_only_default_variant %}
{% assign has_variants = true %}
{% endunless %}
{%
include 'consistent-savings',
variants: product.variants,
on_sale: on_sale
%}
{%- capture classes -%}
productgrid--item
imagestyle--{% if settings.product_grid_image_crop and settings.product_grid_image_style != 'natural' %}cropped-{% endif %}{{ settings.product_grid_image_style }}
{% unless product.featured_image %}imagestyle--no-image{% endunless %}
{% if on_sale %}productitem--sale{% endif %}
{% if emphasize_price %}productitem--emphasis{% endif %}
{% if recently_viewed %}product-recently-viewed-card{% endif %}
{% if atc_display == 'always' or quick_shop_display == 'always' %}show-actions--mobile{% endif %}
{%- endcapture -%}
{% capture to_hash %}
{{ shop.money_format | strip_html }}
{{ settings | json }}
{{ 'product.buttons.add_to_cart' | t }}
{{ 'product.buttons.sold_out' | t }}
{{ product | json }}
{% endcapture %}
{% assign to_hash = to_hash | replace: ' ', '' | sha256 %}
{%- assign show_swatches = false -%}
{% assign initial_image = product.featured_media.preview_image.src %}
{%- if settings.swatches_enable and recently_viewed != true -%}
{% comment %} Check if product should show swatches {% endcomment %}
{%- for option in product.options_with_values -%}
{%- assign swatch_trigger = settings.swatches_swatch_trigger | strip | downcase -%}
{%- assign option_name = option.name | downcase -%}
{%- if option_name == swatch_trigger -%}
{%- assign show_swatches = true -%}
{%- assign swatch_values = option.values -%}
{%- assign swatch_values_count = option.values.size -%}
{%- assign swatch_option_key = 'option' | append: forloop.index -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}
{% if section.settings.filter_style == 'groups' and current_tags and show_swatches %}
{% comment %} We are filtered by tags, so check and see if it's filtering by swatch {% endcomment %}
{% for tag in current_tags %}
{% assign tag_group = tag | split: '_' | first | downcase %}
{% if tag_group == swatch_trigger %}
{% assign active_swatch_name = tag | split: '_' | last | downcase %}
{% comment %} Filter variants by swatch (for ex. where color == blue). Can't use | where due to case sensitivity {% endcomment %}
{% for variant in product.variants %}
{% assign option_value = variant[swatch_option_key] | downcase %}
{% if option_value == active_swatch_name %}
{% if variant.image %}
{% assign initial_image = variant.image %}
{% endif %}
{% break %}
{% endif %}
{% endfor %}
{% break %}
{% endif %}
{% endfor %}
{% endif %}
{% capture product_item_swatches %}
{%- if show_swatches -%}
{%- endif -%}
{% endcapture %}
{%- endif -%}
- {{ recently_viewed_header }}
{%- capture product_item_price -%}
{%
include 'product-price',
class_root: 'productitem',
price: price,
price_varies: price_varies,
compare_at_price: compare_at_price,
compare_at_price_varies: compare_at_price_varies,
on_sale: on_sale,
emphasize_price: emphasize_price,
show_original: consistent_saved
%}
{%- endcapture -%}
{{ product_item_swatches }}
{% if emphasize_price %}
{{ product_item_price }}
{% endif %}
##
{{ product.title | truncate: 20 }}
{% if settings.product_show_vendor and product.vendor != blank %}
{{ product_vendor | link_to_vendor }}
{% endif %}
{% unless emphasize_price %}
{{ product_item_price }}
{% endunless %}
{% if product_ratings_reviews and product_ratings_star_display == "all" %}
{% endif %}
{% if product_description %}
{{ product_description | truncate: 150 }}
{% if product_description_size > 150 and product_link %}
{{ 'product.buttons.view_details' | t }}
{% endif %}
{% endif %}
{% unless recently_viewed %}
{% if quick_shop_display != 'disabled' or atc_display != 'disabled' %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = 'product.buttons.quick_shop' | t %}
{% assign quick_buy_text = 'product.buttons.add_to_cart' | t %}
{% assign quick_shop_classes = 'productitem--action-trigger button-secondary' %}
{% assign quick_buy_classes = 'productitem--action-trigger productitem--action-atc button-primary' %}
{% if has_variants %}
{% assign quick_buy_text = 'product.buttons.choose_options' | t %}
{% endif %}
{% unless product_available %}
{% assign quick_buy_text = 'product.buttons.sold_out' | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ' disabled' %}
{% endunless %}
{% if section.settings.grid_list %}
{{ product_item_price }}
{%
include 'product-badge',
class_root: 'productitem',
product_available: product_available,
on_sale: on_sale,
price: price,
compare_at_price: compare_at_price,
show_saved: consistent_saved
%}
{% endif %}
{% if quick_shop_display != 'disabled' %}
{% endif %}
{% if atc_display != 'disabled' %}
{% endif %}
{% endif %}
{% endunless %}
{% if atc_display != 'disabled' %}
{% endif %}
1 Like
This is another solution to a related problem. I wanted to limit the product title but on the Buy Button. An online search found this posted question, so wanted to post my solution here in case anyone else has the same issue. Within the Buy Button code, add this snippet to shorten the h1 title of your product (you can play with the width if you want):
"title": {
"text-overflow": "ellipsis",
"overflow": "hidden",
"white-space": "nowrap",
"width": "220"
},