Solved

How can I limit product title card text on my website?

Selvence
Excursionist
63 0 5

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 

 

Selvence_0-1616680808019.png

 

Accepted Solution (1)
KetanKumar
Shopify Partner
36855 3637 11980

This is an accepted solution.

@Selvence 

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 -%}
    <div class="product-recently-viewed-card-time" data-product-handle="{{product.handle}}">
      <button
        class="product-recently-viewed-card-remove"
        aria-label="close"
        data-remove-recently-viewed
      >
        {% include 'icon-remove' %}
      </button>
    </div>
    {%- 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 -%}
        <div
          class="
            productitem--swatches
            {% if settings.swatches_shape == 'square' and settings.swatches_option_style == 'variant_image' %}
              swatches-variant-images-square
            {% endif %}
          "
          data-swatches
        >
          <script type="application/json" data-swatch-data>
            {
              "hash": {{ to_hash | json }},
              "swatchOptionKey": {{ swatch_option_key | json }},
              "variants": {{ product.variants | json }}
            }
          </script>
          <form
            class="productitem--swatches-container"
            data-swatches-container
            aria-label="{{ 'general.accessibility.swatch_options' | t: swatch_trigger: settings.swatches_swatch_trigger, product_title: product.title }}"
          >
            {% for swatch_value in swatch_values %}
              {% assign swatch_value_downcased = swatch_value | downcase %}
              <label>
                <input
                  class="productitem--swatches-input"
                  type="radio"
                  tabindex="0"
                  name="swatch"
                  value="{{ swatch_value | escape }}"
                  aria-label="{{ swatch_value | escape }}"
                  {% if swatch_value_downcased == active_swatch_name %}checked{% endif %}
                >
                {% assign use_variant_images = false %}
                {% if settings.swatches_option_style == 'variant_image' %}
                  {% assign use_variant_images = true %}
                {% endif %}
                {% assign use_aspect_ratio = false %}
                {% if settings.swatches_shape == 'square' %}
                  {% assign use_aspect_ratio = true %}
                {% endif %}
                {%- capture swatch_styles -%}
                  {%
                    include 'swatch-styles',
                    color_name: swatch_value,
                    use_variant_images: use_variant_images,
                    swatch_product: product,
                    swatch_option_key: swatch_option_key,
                    swatch_size: settings.swatches_product_card_size,
                    use_aspect_ratio: use_aspect_ratio,
                  %}
                {%- endcapture -%}
                <div
                  class="productitem--swatches-swatch-wrapper"
                  data-swatch-tooltip="{{ swatch_value | escape }}"
                  data-swatch
                  style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */'}}"
                >
                  <div class="productitem--swatches-swatch">
                    <div
                      class="productitem--swatches-swatch-inner"
                      style="
                        {{ swatch_styles | split: '/* variables */' | first }}
                        {% comment %} {% if use_variant_images and settings.swatches_shape == 'square' %}border-radius: 0;{% endif %} {% endcomment %}
                      "
                    >
                    </div>
                  </div>
                </div>
              </label>
            {% endfor %}
          </form>
          <button
            class="productitem--swatches-count-wrapper"
            tabindex="0"
            data-swatch-count-wrapper
            aria-label="{{ 'general.accessibility.swatches_toggle' | t: swatch_trigger: settings.swatches_swatch_trigger }}"
          >
            <div class="productitem--swatches-count" data-swatch-count>+</div>
          </button>
        </div>
      {%- endif -%}
    {% endcapture %}
  {%- endif -%}

<li
  class="{{ classes | strip_newlines }}"
  data-product-item
  data-product-quickshop-url="{{ product_link }}"
  data-quickshop-hash="{{ to_hash }}"
  {% if recently_viewed %}
    data-recently-viewed-card
  {% endif %}
>
  <div class="productitem" data-product-item-content>
    {{ recently_viewed_header }}
    <a
      class="productitem--image-link"
      href="{{ product.url | within: collection }}"
      tabindex="-1"
      data-product-page-link
    >
      <figure class="productitem--image" data-product-item-image>
        {% if initial_image %}
          {% if product_grid_show_second_image and product.media.size > 1 %}
            {% assign second_image = product.media[1].preview_image.src %}
            {%
              include 'rimg',
              img: second_image,
              size: '512x',
              lazy: true,
              class: 'productitem--image-alternate',
              canvas: true
            %}
          {% endif %}
          {%
            include 'rimg',
            img: initial_image
            size: '512x',
            lazy: true,
            class: 'productitem--image-primary',
            canvas: true
          %}
        {% else %}
          {% if product %}
            {{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
          {% else %}
            {%- capture index -%}
              {%- cycle '1', '2', '3', '4', '5', '6' -%}
            {%- endcapture -%}
            {{ 'product-' | append: index | placeholder_svg_tag: 'placeholder--image' }}
          {% endif %}
        {% endif %}

        {%
          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
        %}
      </figure>
    </a>

    {%- 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  -%}

    <div class="productitem--info">
      {{ product_item_swatches }}

      {% if emphasize_price %}
        {{ product_item_price }}
      {% endif %}

      <h2 class="productitem--title">
        <a href="{{ product_link }}" data-product-page-link>
          {{ product.title | truncate: 20 }}
        </a>
      </h2>

      {% if settings.product_show_vendor and product.vendor != blank %}
        <span class="productitem--vendor">
          {{ product_vendor | link_to_vendor }}
        </span>
      {% endif %}

      {% unless emphasize_price %}
        {{ product_item_price }}
      {% endunless %}

      {% if product_ratings_reviews and product_ratings_star_display == "all" %}
        <div class="productitem--ratings">
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
            <span class="spr-badge">
              <span class="spr-starrating spr-badge-starrating">
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
              </span>
            </span>
          </span>
        </div>
      {% endif %}

      {% if product_description %}
        <div class="productitem--description">
          <p>{{ product_description | truncate: 150 }}</p>

          {% if product_description_size > 150 and product_link %}
            <a
              href="{{ product_link }}"
              class="productitem--link"
              data-product-page-link
            >
              {{ 'product.buttons.view_details' | t }}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>

    {% 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 %}

        <div class="productitem--actions" data-product-actions>
          {% if section.settings.grid_list %}
            <div class="productitem--listview-price">
              {{ product_item_price }}
            </div>

            <div class="productitem--listview-badge">
              {%
                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
              %}
            </div>
          {% endif %}

          {% if quick_shop_display != 'disabled' %}
            <div
              class="
                productitem--action
                quickshop-button
                {% if quick_shop_display == 'desktop' %}productitem-action--desktop{% endif %}
              "
            >
              <button
                class="{{ quick_shop_classes }}"
                data-quickshop-full
                {% if settings.gallery_thumbnail_position == 'left' %}data-thumbs-left{% endif %}
                type="button"
              >
                {{ quick_shop_text }}
              </button>
            </div>
          {% endif %}

          {% if atc_display != 'disabled' %}
            <div
              class="
                productitem--action
                atc--button
                {% if atc_display == 'desktop' %}productitem-action--desktop{% endif %}
              "
            >
              <button
                class="{{ quick_buy_classes }}"
                type="button"
                aria-label="{{ quick_buy_text }}"
                {% unless has_variants %}
                  data-quick-buy
                {% else %}
                  data-quickshop-slim
                {% endunless %}
                data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                {% unless product_available %}disabled{% endunless %}
              >
                <span class="atc-button--text">
                  {{ quick_buy_text }}
                </span>
                <span class="atc-button--icon">
                  {%- include 'icon-spinner' -%}
                </span>
              </button>
            </div>
          {% endif %}

        </div>
      {% endif %}
    {% endunless %}
  </div>

  {% if atc_display != 'disabled' %}
    <script type="application/json" data-quick-buy-settings>
      {
        "cart_redirection": {{ settings.quickshop_product_cart_redirect | json }},
        "money_format": {{ shop.money_format | strip_html | json }}
      }
    </script>
  {% endif %}
</li>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 10 (10)

JHKCreate
Shopify Expert
3571 638 921

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!

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

dmwwebartisan
Shopify Partner
12310 2550 3705

@Selvence 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Selvence
Excursionist
63 0 5

I inserted it at the bottom as posted and nothing happens. Help

 

Selvence_0-1616712869752.pngSelvence_1-1616712887323.png

 

KetanKumar
Shopify Partner
36855 3637 11980

@Selvence 

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 }}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Selvence
Excursionist
63 0 5

I think we are getting somewhere. When inserting

{{ product.title | truncate: 50 }}

into

Selvence_0-1616763576416.png

on the very last line of the code, I get this:

Selvence_1-1616763636574.png

- Still needs work

 

 

KetanKumar
Shopify Partner
36855 3637 11980

@Selvence 

if possible to share product-grid-item code so i will update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Selvence
Excursionist
63 0 5

product-grid-item.liquid

 

{% 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 -%}
    <div class="product-recently-viewed-card-time" data-product-handle="{{product.handle}}">
      <button
        class="product-recently-viewed-card-remove"
        aria-label="close"
        data-remove-recently-viewed
      >
        {% include 'icon-remove' %}
      </button>
    </div>
    {%- 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 -%}
        <div
          class="
            productitem--swatches
            {% if settings.swatches_shape == 'square' and settings.swatches_option_style == 'variant_image' %}
              swatches-variant-images-square
            {% endif %}
          "
          data-swatches
        >
          <script type="application/json" data-swatch-data>
            {
              "hash": {{ to_hash | json }},
              "swatchOptionKey": {{ swatch_option_key | json }},
              "variants": {{ product.variants | json }}
            }
          </script>
          <form
            class="productitem--swatches-container"
            data-swatches-container
            aria-label="{{ 'general.accessibility.swatch_options' | t: swatch_trigger: settings.swatches_swatch_trigger, product_title: product.title }}"
          >
            {% for swatch_value in swatch_values %}
              {% assign swatch_value_downcased = swatch_value | downcase %}
              <label>
                <input
                  class="productitem--swatches-input"
                  type="radio"
                  tabindex="0"
                  name="swatch"
                  value="{{ swatch_value | escape }}"
                  aria-label="{{ swatch_value | escape }}"
                  {% if swatch_value_downcased == active_swatch_name %}checked{% endif %}
                >
                {% assign use_variant_images = false %}
                {% if settings.swatches_option_style == 'variant_image' %}
                  {% assign use_variant_images = true %}
                {% endif %}
                {% assign use_aspect_ratio = false %}
                {% if settings.swatches_shape == 'square' %}
                  {% assign use_aspect_ratio = true %}
                {% endif %}
                {%- capture swatch_styles -%}
                  {%
                    include 'swatch-styles',
                    color_name: swatch_value,
                    use_variant_images: use_variant_images,
                    swatch_product: product,
                    swatch_option_key: swatch_option_key,
                    swatch_size: settings.swatches_product_card_size,
                    use_aspect_ratio: use_aspect_ratio,
                  %}
                {%- endcapture -%}
                <div
                  class="productitem--swatches-swatch-wrapper"
                  data-swatch-tooltip="{{ swatch_value | escape }}"
                  data-swatch
                  style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */'}}"
                >
                  <div class="productitem--swatches-swatch">
                    <div
                      class="productitem--swatches-swatch-inner"
                      style="
                        {{ swatch_styles | split: '/* variables */' | first }}
                        {% comment %} {% if use_variant_images and settings.swatches_shape == 'square' %}border-radius: 0;{% endif %} {% endcomment %}
                      "
                    >
                    </div>
                  </div>
                </div>
              </label>
            {% endfor %}
          </form>
          <button
            class="productitem--swatches-count-wrapper"
            tabindex="0"
            data-swatch-count-wrapper
            aria-label="{{ 'general.accessibility.swatches_toggle' | t: swatch_trigger: settings.swatches_swatch_trigger }}"
          >
            <div class="productitem--swatches-count" data-swatch-count>+</div>
          </button>
        </div>
      {%- endif -%}
    {% endcapture %}
  {%- endif -%}

<li
  class="{{ classes | strip_newlines }}"
  data-product-item
  data-product-quickshop-url="{{ product_link }}"
  data-quickshop-hash="{{ to_hash }}"
  {% if recently_viewed %}
    data-recently-viewed-card
  {% endif %}
>
  <div class="productitem" data-product-item-content>
    {{ recently_viewed_header }}
    <a
      class="productitem--image-link"
      href="{{ product.url | within: collection }}"
      tabindex="-1"
      data-product-page-link
    >
      <figure class="productitem--image" data-product-item-image>
        {% if initial_image %}
          {% if product_grid_show_second_image and product.media.size > 1 %}
            {% assign second_image = product.media[1].preview_image.src %}
            {%
              include 'rimg',
              img: second_image,
              size: '512x',
              lazy: true,
              class: 'productitem--image-alternate',
              canvas: true
            %}
          {% endif %}
          {%
            include 'rimg',
            img: initial_image
            size: '512x',
            lazy: true,
            class: 'productitem--image-primary',
            canvas: true
          %}
        {% else %}
          {% if product %}
            {{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
          {% else %}
            {%- capture index -%}
              {%- cycle '1', '2', '3', '4', '5', '6' -%}
            {%- endcapture -%}
            {{ 'product-' | append: index | placeholder_svg_tag: 'placeholder--image' }}
          {% endif %}
        {% endif %}

        {%
          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
        %}
      </figure>
    </a>

    {%- 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  -%}

    <div class="productitem--info">
      {{ product_item_swatches }}

      {% if emphasize_price %}
        {{ product_item_price }}
      {% endif %}

      <h2 class="productitem--title">
        <a href="{{ product_link }}" data-product-page-link>
          {{ product_title }}
        </a>
      </h2>

      {% if settings.product_show_vendor and product.vendor != blank %}
        <span class="productitem--vendor">
          {{ product_vendor | link_to_vendor }}
        </span>
      {% endif %}

      {% unless emphasize_price %}
        {{ product_item_price }}
      {% endunless %}

      {% if product_ratings_reviews and product_ratings_star_display == "all" %}
        <div class="productitem--ratings">
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
            <span class="spr-badge">
              <span class="spr-starrating spr-badge-starrating">
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
              </span>
            </span>
          </span>
        </div>
      {% endif %}

      {% if product_description %}
        <div class="productitem--description">
          <p>{{ product_description | truncate: 150 }}</p>

          {% if product_description_size > 150 and product_link %}
            <a
              href="{{ product_link }}"
              class="productitem--link"
              data-product-page-link
            >
              {{ 'product.buttons.view_details' | t }}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>

    {% 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 %}

        <div class="productitem--actions" data-product-actions>
          {% if section.settings.grid_list %}
            <div class="productitem--listview-price">
              {{ product_item_price }}
            </div>

            <div class="productitem--listview-badge">
              {%
                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
              %}
            </div>
          {% endif %}

          {% if quick_shop_display != 'disabled' %}
            <div
              class="
                productitem--action
                quickshop-button
                {% if quick_shop_display == 'desktop' %}productitem-action--desktop{% endif %}
              "
            >
              <button
                class="{{ quick_shop_classes }}"
                data-quickshop-full
                {% if settings.gallery_thumbnail_position == 'left' %}data-thumbs-left{% endif %}
                type="button"
              >
                {{ quick_shop_text }}
              </button>
            </div>
          {% endif %}

          {% if atc_display != 'disabled' %}
            <div
              class="
                productitem--action
                atc--button
                {% if atc_display == 'desktop' %}productitem-action--desktop{% endif %}
              "
            >
              <button
                class="{{ quick_buy_classes }}"
                type="button"
                aria-label="{{ quick_buy_text }}"
                {% unless has_variants %}
                  data-quick-buy
                {% else %}
                  data-quickshop-slim
                {% endunless %}
                data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                {% unless product_available %}disabled{% endunless %}
              >
                <span class="atc-button--text">
                  {{ quick_buy_text }}
                </span>
                <span class="atc-button--icon">
                  {%- include 'icon-spinner' -%}
                </span>
              </button>
            </div>
          {% endif %}

        </div>
      {% endif %}
    {% endunless %}
  </div>

  {% if atc_display != 'disabled' %}
    <script type="application/json" data-quick-buy-settings>
      {
        "cart_redirection": {{ settings.quickshop_product_cart_redirect | json }},
        "money_format": {{ shop.money_format | strip_html | json }}
      }
    </script>
  {% endif %}
</li>
KetanKumar
Shopify Partner
36855 3637 11980

This is an accepted solution.

@Selvence 

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 -%}
    <div class="product-recently-viewed-card-time" data-product-handle="{{product.handle}}">
      <button
        class="product-recently-viewed-card-remove"
        aria-label="close"
        data-remove-recently-viewed
      >
        {% include 'icon-remove' %}
      </button>
    </div>
    {%- 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 -%}
        <div
          class="
            productitem--swatches
            {% if settings.swatches_shape == 'square' and settings.swatches_option_style == 'variant_image' %}
              swatches-variant-images-square
            {% endif %}
          "
          data-swatches
        >
          <script type="application/json" data-swatch-data>
            {
              "hash": {{ to_hash | json }},
              "swatchOptionKey": {{ swatch_option_key | json }},
              "variants": {{ product.variants | json }}
            }
          </script>
          <form
            class="productitem--swatches-container"
            data-swatches-container
            aria-label="{{ 'general.accessibility.swatch_options' | t: swatch_trigger: settings.swatches_swatch_trigger, product_title: product.title }}"
          >
            {% for swatch_value in swatch_values %}
              {% assign swatch_value_downcased = swatch_value | downcase %}
              <label>
                <input
                  class="productitem--swatches-input"
                  type="radio"
                  tabindex="0"
                  name="swatch"
                  value="{{ swatch_value | escape }}"
                  aria-label="{{ swatch_value | escape }}"
                  {% if swatch_value_downcased == active_swatch_name %}checked{% endif %}
                >
                {% assign use_variant_images = false %}
                {% if settings.swatches_option_style == 'variant_image' %}
                  {% assign use_variant_images = true %}
                {% endif %}
                {% assign use_aspect_ratio = false %}
                {% if settings.swatches_shape == 'square' %}
                  {% assign use_aspect_ratio = true %}
                {% endif %}
                {%- capture swatch_styles -%}
                  {%
                    include 'swatch-styles',
                    color_name: swatch_value,
                    use_variant_images: use_variant_images,
                    swatch_product: product,
                    swatch_option_key: swatch_option_key,
                    swatch_size: settings.swatches_product_card_size,
                    use_aspect_ratio: use_aspect_ratio,
                  %}
                {%- endcapture -%}
                <div
                  class="productitem--swatches-swatch-wrapper"
                  data-swatch-tooltip="{{ swatch_value | escape }}"
                  data-swatch
                  style="{{ swatch_styles | split: '/* variables */' | last | remove: '/* variables */'}}"
                >
                  <div class="productitem--swatches-swatch">
                    <div
                      class="productitem--swatches-swatch-inner"
                      style="
                        {{ swatch_styles | split: '/* variables */' | first }}
                        {% comment %} {% if use_variant_images and settings.swatches_shape == 'square' %}border-radius: 0;{% endif %} {% endcomment %}
                      "
                    >
                    </div>
                  </div>
                </div>
              </label>
            {% endfor %}
          </form>
          <button
            class="productitem--swatches-count-wrapper"
            tabindex="0"
            data-swatch-count-wrapper
            aria-label="{{ 'general.accessibility.swatches_toggle' | t: swatch_trigger: settings.swatches_swatch_trigger }}"
          >
            <div class="productitem--swatches-count" data-swatch-count>+</div>
          </button>
        </div>
      {%- endif -%}
    {% endcapture %}
  {%- endif -%}

<li
  class="{{ classes | strip_newlines }}"
  data-product-item
  data-product-quickshop-url="{{ product_link }}"
  data-quickshop-hash="{{ to_hash }}"
  {% if recently_viewed %}
    data-recently-viewed-card
  {% endif %}
>
  <div class="productitem" data-product-item-content>
    {{ recently_viewed_header }}
    <a
      class="productitem--image-link"
      href="{{ product.url | within: collection }}"
      tabindex="-1"
      data-product-page-link
    >
      <figure class="productitem--image" data-product-item-image>
        {% if initial_image %}
          {% if product_grid_show_second_image and product.media.size > 1 %}
            {% assign second_image = product.media[1].preview_image.src %}
            {%
              include 'rimg',
              img: second_image,
              size: '512x',
              lazy: true,
              class: 'productitem--image-alternate',
              canvas: true
            %}
          {% endif %}
          {%
            include 'rimg',
            img: initial_image
            size: '512x',
            lazy: true,
            class: 'productitem--image-primary',
            canvas: true
          %}
        {% else %}
          {% if product %}
            {{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
          {% else %}
            {%- capture index -%}
              {%- cycle '1', '2', '3', '4', '5', '6' -%}
            {%- endcapture -%}
            {{ 'product-' | append: index | placeholder_svg_tag: 'placeholder--image' }}
          {% endif %}
        {% endif %}

        {%
          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
        %}
      </figure>
    </a>

    {%- 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  -%}

    <div class="productitem--info">
      {{ product_item_swatches }}

      {% if emphasize_price %}
        {{ product_item_price }}
      {% endif %}

      <h2 class="productitem--title">
        <a href="{{ product_link }}" data-product-page-link>
          {{ product.title | truncate: 20 }}
        </a>
      </h2>

      {% if settings.product_show_vendor and product.vendor != blank %}
        <span class="productitem--vendor">
          {{ product_vendor | link_to_vendor }}
        </span>
      {% endif %}

      {% unless emphasize_price %}
        {{ product_item_price }}
      {% endunless %}

      {% if product_ratings_reviews and product_ratings_star_display == "all" %}
        <div class="productitem--ratings">
          <span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
            <span class="spr-badge">
              <span class="spr-starrating spr-badge-starrating">
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
                <i class="spr-icon spr-icon-star-empty"></i>
              </span>
            </span>
          </span>
        </div>
      {% endif %}

      {% if product_description %}
        <div class="productitem--description">
          <p>{{ product_description | truncate: 150 }}</p>

          {% if product_description_size > 150 and product_link %}
            <a
              href="{{ product_link }}"
              class="productitem--link"
              data-product-page-link
            >
              {{ 'product.buttons.view_details' | t }}
            </a>
          {% endif %}
        </div>
      {% endif %}
    </div>

    {% 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 %}

        <div class="productitem--actions" data-product-actions>
          {% if section.settings.grid_list %}
            <div class="productitem--listview-price">
              {{ product_item_price }}
            </div>

            <div class="productitem--listview-badge">
              {%
                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
              %}
            </div>
          {% endif %}

          {% if quick_shop_display != 'disabled' %}
            <div
              class="
                productitem--action
                quickshop-button
                {% if quick_shop_display == 'desktop' %}productitem-action--desktop{% endif %}
              "
            >
              <button
                class="{{ quick_shop_classes }}"
                data-quickshop-full
                {% if settings.gallery_thumbnail_position == 'left' %}data-thumbs-left{% endif %}
                type="button"
              >
                {{ quick_shop_text }}
              </button>
            </div>
          {% endif %}

          {% if atc_display != 'disabled' %}
            <div
              class="
                productitem--action
                atc--button
                {% if atc_display == 'desktop' %}productitem-action--desktop{% endif %}
              "
            >
              <button
                class="{{ quick_buy_classes }}"
                type="button"
                aria-label="{{ quick_buy_text }}"
                {% unless has_variants %}
                  data-quick-buy
                {% else %}
                  data-quickshop-slim
                {% endunless %}
                data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                {% unless product_available %}disabled{% endunless %}
              >
                <span class="atc-button--text">
                  {{ quick_buy_text }}
                </span>
                <span class="atc-button--icon">
                  {%- include 'icon-spinner' -%}
                </span>
              </button>
            </div>
          {% endif %}

        </div>
      {% endif %}
    {% endunless %}
  </div>

  {% if atc_display != 'disabled' %}
    <script type="application/json" data-quick-buy-settings>
      {
        "cart_redirection": {{ settings.quickshop_product_cart_redirect | json }},
        "money_format": {{ shop.money_format | strip_html | json }}
      }
    </script>
  {% endif %}
</li>
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

dmwwebartisan
Shopify Partner
12310 2550 3705

@Selvence 

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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

DavidR2D2
Excursionist
13 0 12

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"
      },