Add to Cart button align for all products in a row

Solved
DELONG_HUANG
Excursionist
49 0 6

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

 

 

 

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

{% unless grid_image_width %}
{%- assign grid_image_width = '600x600' -%}
{% endunless %}
<div class="grid-view-item{% unless product.available %} product-price--sold-out grid-view-item--sold-out{% endunless %}">
<a class="grid-view-item__link {% if product.images.size > 1 %} has-secondary{% endif %}" href="{{ product.url | within: collection }}">
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: grid_image_width }}" alt="{{ product.featured_image.alt }}">
{% if product.images.size > 1 %}
<img class="secondary" src="{{ product.images[1] | img_url: grid_image_width }}" alt="{{ product.images[1] | escape }}">
{% endif %}
<div class="h4 grid-view-item__title">{{ product.title }}</div>
{% if section.settings.show_vendor %}
<div class="grid-view-item__vendor">{{ product.vendor }}</div>
{% endif %}
<div class="grid-view-item__meta">
{% include 'product-price', variant: product %}
</div>
</a>
</div>

<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
<span id="AddToCartText-{{ section.id }}">
{% unless current_variant.available %}

{{ 'products.product.add_to_cart' | t }}
{% endunless %}
</span>
{% else %}

<input type="submit" value="See More Options" class="btn product-form__cart-submit" />

 

{% endif %}

 

</form>
</div>

 

 

KetanKumar
Shopify Partner
20524 2121 7737

@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.

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

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
0 Likes
AnishDua
Shopify Partner
57 6 9

This is an accepted solution.

Add  minimum height using css on this class

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

 

If helpful then please Like and Accept Solution.
Email: flyhighdua@gmail.com | Skype : @anish_20079
DELONG_HUANG
Excursionist
49 0 6

@AnishDua wrote:

Add  minimum height using css on this class

 

.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

0 Likes
DELONG_HUANG
Excursionist
49 0 6

hi,

 

store is www.minidrago.com

0 Likes
KetanKumar
Shopify Partner
20524 2121 7737

@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;
}
}

 

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
0 Likes
Munnota
New Member
2 0 1

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

 

KetanKumar
Shopify Partner
20524 2121 7737

@Munnota 

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

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

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

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
0 Likes
Munnota
New Member
2 0 1

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

 

0 Likes
KetanKumar
Shopify Partner
20524 2121 7737

@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;
}

 

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
0 Likes