Add to Cart button align for all products in a row

Store Design
1

Hi,

Now the add to cart is not aligned after I added some review ratings for some products. Does anyone how to make Add to cart lower for all the products? like making the no review rating product down a little bit. thanks

add to cart not align.JPG
add to cart not align.JPG1574×583 108 KB

The below is my current code in product cart grid liquid.

{% unless grid_image_width %}
{%- assign grid_image_width = ‘600x600’ -%}
{% endunless %}

{{ product.featured_image.alt }} {% if product.images.size > 1 %} {{ product.images[1] | escape }} {% endif %}
{{ product.title }}
{% if section.settings.show_vendor %}
{{ product.vendor }}
{% endif %}
{% include 'product-price', variant: product %}
{% if product.variants.size == 1 %} <button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit"
{% unless current_variant.available %}

{{ ‘products.product.add_to_cart’ | t }}
{% endunless %}

{% else %}

{% endif %}
1 Like
2

@DELONG_HUANG

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

3

Add minimum height using css on this class

.grid-view-item__meta{ min-height:100px;}
1 Like
4 
.grid-view-item__meta{ min-height:100px;}

hi,

which line should I add this? at the bottom? thanks

my store URL is www.minidrago.com

5

hi,

store is www.minidrago.com

6

@DELONG_HUANG

thanks can you please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
a.grid-view-item__link.has-secondary {
    min-height: 420px;
}
@media only screen and (max-width: 749px) {
a.grid-view-item__link.has-secondary {
    min-height: 220px;
}
}
7

Hi Team,

I too have similar issue. Add to cart button is not aligned properly in our site. URL is : Munnota.com

The URL is localised but you can check Add to cart button in English. I tried above code, but it did not work. Kindly help to resolve the issue.

Munnota_0-1618493178571.png
Munnota_0-1618493178571.png1260×689 250 KB

1 Like
8

@Munnota

Sorry you are facing this issue, it would be my pleasure to help you.

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

Please share your site URL,
I will check out the issue and provide you a solution here.

9

@KetanKumar Thanks for the reply. Here is the URL: munnota.com

10

@Munnota

thanks for URL

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.product-card {min-height: 330px;}
.product-card + form {
    margin-bottom: 40px;
}
11

Hi Ketan,

Does this work for all similar themed stored? I tried with my website also but doesn’t seem to change the spacing. I’m trying to get the “add to cart” to be aligned across all of the products.

www.lilaandfox.com.au

Thanks!