Shopify themes, liquid, logos, and UX
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
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>
Solved! Go to the solution
This is an accepted solution.
Add minimum height using css on this class
.grid-view-item__meta{ min-height:100px;}
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.
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;
}
}
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.
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.
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;
}
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.
Thanks!
This is an accepted solution.
Add minimum height using css on this class
.grid-view-item__meta{ min-height:100px;}
@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
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024