Add a blank line when product title is only 1 line

[SimonP]

Hi guys,

Any idea on how I could add a blank line on my product titles when they are originally only on 1 line.

That would re-align all my product when titles are different.

(Or any other ideas to align the informations under the title)

Thanks for your help,

Simon

Store URL: la-vache-qui-livre.myshopify.com

PW: ildair

[IttantaTech]

@SimonP

can you please provide

product cart grid snippets code so i will update

[SimonP]

Hi @IttantaTech

Thanks for your quick answer

Here’s the product cart grid snippets code

{% comment %}
Renders a product card using “Grid” style
Accepts:

• max_height: {Number} Maximum height of the product’s image (required)
• product: {Object} Product Liquid object (required)
• show_vendor: {Boolean} Show the product’s vendor depending on the section setting (optional)

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

{{ product.title }}

{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign preview_image = product.featured_media.preview_image -%}
{%- assign img_url = preview_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{% unless preview_image == blank %}
{% include ‘image-style’, image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}

{{ product.title }}

{% include ‘product-price-listing’, product: product, show_vendor: show_vendor %}

[dmwwebartisan]

Hey @SimonP

Please add following code in your assets/theme.scss.liquid file.

.template-collection .product-card__title {
display: inline-block;
height:30px;
}

Hope this works for you.

Thanks!

[IttantaTech]

@SimonP

Thanks code can you please update

{% comment %}
Renders a product card using "Grid" style
Accepts:
- max_height: {Number} Maximum height of the product's image (required)
- product: {Object} Product Liquid object (required)
- show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

Usage:
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ product.title }}

{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign preview_image = product.featured_media.preview_image -%}
{%- assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% unless preview_image == blank %}
{% include 'image-style', image: preview_image, height: max_height, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

{{ product.title | truncate: 10 }}

{% include 'product-price-listing', product: product, show_vendor: show_vendor %}