Solved

Add to Cart button align for all products in a row

DELONG_HUANG
Excursionist
49 0 7

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>

 

 

Accepted Solution (1)

AnishDua
Shopify Partner
57 6 10

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

View solution in original post

Replies 10 (10)

KetanKumar
Shopify Partner
36839 3635 11972

@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
DELONG_HUANG
Excursionist
49 0 7

hi,

 

store is www.minidrago.com

KetanKumar
Shopify Partner
36839 3635 11972

@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
Munnota
Visitor
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
36839 3635 11972

@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
Munnota
Visitor
2 0 1

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

 

KetanKumar
Shopify Partner
36839 3635 11972

@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
lilaandfox
Tourist
3 0 2

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!

AnishDua
Shopify Partner
57 6 10

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 7

@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