Add to cart button redirects to cart page and changes web page design

Bruno123
New Member
4 0 0

Hello, 

I wanted to know how to add correctly the "Add to cart button" for every product without changing the design of the page, when I add the button using the following 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 adds the button but messes up the design and it also redirects to the cart page instead of just adding directly the products to the cart.

Anyone knows how to fix this problem?

Thanks!

Replies 7 (7)

PeanutButter
Shopify Partner
385 67 181

Add this inside your form to stay in the same page when adding to cart:

<input type="hidden" name="return_to" value="back" />

So the final code for your from would be:

<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="hidden" name="return_to" value="back" />
  <input type="submit" value="Add to cart" class="btn" />
</form>

If you would like the add to cart without page reload the you would have to Ajaxify your cart

About the add to cart button messing up your design, solution for that depends in the theme you are using.  Can you share and URL where you have added this form?

If my post has helped you, please Like.  If my post solved your issue, please mark as Accepted.

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Bruno123
New Member
4 0 0

The redirect problem was solved! Thanks a lot! 

 

About the design problem the URL is: https://mx-comp-store.myshopify.com/

 

I do not know what I need to change for the add to cart button to not mess my design.

PeanutButter
Shopify Partner
385 67 181

Your site is protected by user/pass so I cannot see the add to cart button to propose a solution

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Bruno123
New Member
4 0 0

You are right sorry, let me share screenshots:

 

It looks like this with the button added:

Bruno123_0-1615935372710.png

 

And without the button it looks like this:

 

Bruno123_1-1615935411042.png

 

So i would like the same design and just the button next to the price for example.

 

PeanutButter
Shopify Partner
385 67 181

I would need to access your store to propose fix, it is not possible to check what is wrong via screenshots.   You can send login credentials via PM or I could request collaborator access.  

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Bruno123
New Member
4 0 0

How can I send you a PM, I can not find the option to do it in your profile. 

mike1231
Shopify Partner
9 0 0

I got to show the quantity and add to cart.

How can I make the circle item in center..

The price, product, title and the quantity in the box?

For the quantity in the box it is like full width how can I edit that box?