Shopify themes, liquid, logos, and UX
Hi,
I'm looking to add "Add to Cart" button for each product on my collection pages. And I would like the button to appear on the product photo when hovering over it.
Is there somebody who could help me with this?
My site is www.mariseger.com which uses Brooklyn theme.
Thanks!
thanks for post are you able to code try this or if you any issue let me know
Just follow the steps for a theme for Add to cart button on collection pages.
<form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>
It's amazing how simple this shopify platform is. It's just navigating around the different, what seems like, "component" files and sorting the mess of code in the browser that makes it more difficult.
Thanks for this solution!
it's my pleasure to help us
Hi,
This code works, however the buttons are all uneven in height from one another. Is there a code to adjust the text boxes above the add to cart buttons, making them uniform throughout. This would be one way to solve it. Or if there is another way to have the buttons on the same plane as one another I would love to know. Any help would be appreciated.
Thanks
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.
How did you sort the issue? I am having a similar issue and my buttons are appearing on the right side of the products instead of under the products?
Hi, I resolved my issue by adding the following code at the bottom of the assets/theme.scss.liquid file.
.template-collection #CollectionSection .grid-product__title{ display: block !important; min-height: 175px; }
My buttons were appearing below, however were staggered and uneven. Not sure if this code with solve your issue but it doesn’t hurt to try.
Can you tell me how you sorted it out, I'm having the same issue and need help?
I suppose you’re referring to the uneven buttons. I resolved my issue by adding the following code at the bottom of the assets/theme.scss.liquid file.
.template-collection #CollectionSection .grid-product__title{ display: block !important; min-height: 175px; }
Hi, so I used the code you provided for mine as well but the button doesn't align in the center underneath the products right. They are more towards the left instead of being centered, how do I center all of them? Also when the customer click on the "add to cart button" I want it to say "added" so they'll know it's been added to there cart and instead of it taking you straight to the checkout page I want it to stay on that same page so that the customers can continue shopping?
Can you Message me on here?
Yes I finally got it, this has definitely helped, thank you so much!
Hello! I need some help with aligment. Looks like this and I don t know how to fix it.
Hey Alexa, try this and let me know if it worked for you. Go to edit code -> Snippets -> Product-Grid-Item.liquid. Copy & paste this code on line #124:
</a><form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>
sorry for that issue
can you please share store url
Hi, when i use the code:
<form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>
It appears to the left of the products:
My URL is: gbs-new.myshopify.com/?key=cf1cbe6423e23cd7eb7467b1c1a0b73ec617c6e12ba27f5f74aa3d167e8889e8
Can you help?
All okay, the code is great, it just needs to be put in the right part of the product-grid-item.liquid code. for me it was below this code around line 100:
<span class="icon-fallback-text">
<span class="icon icon-plus grid-product__price-min" aria-hidden="true"></span>
<span class="fallback-text">+</span>
</span>
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
</span>
Do you have a fixed issue?
Yes, issue all fixed thanks
great thanks for update
can you please share store url
try this
From Shopify Admin select Online Store and click on Themes Choose your main theme Click the . . . on the top left-right (see below) and hit Edit code Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.
<form method="post" action="/cart/add"> <input type="hidden" name="id" value="{{ product.variants.first.id }}" /> <input min="1" type="number" id="quantity" name="quantity" value="1"/> <input type="submit" value="Add to cart" class="btn" /> </form>
Hi I am having a few issues with the code. Firstly the - 1 + part of the add to cart is not central on either mobile or web version. Also it is putting the brand/tag text underneath. How do I sort both please?
I have managed to remove the tag text, I just need to centralise the -1+ part.
Also do you know how once added it can stay on the page rather than keep going to the cart page, and making users go back.
Maybe with a prompt to say 'Added'
Hey this breaks my page, I'm using a 3 collumn layout could you help?
Hi @sms_3000, check out this YouTube tutorial for a simple guide on adding an "Add to Cart" button to your Shopify collection pages: https://www.youtube.com/watch?v=s98l1bUZe6k
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024