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

[Bruno123]

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!

[PeanutButter]

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.

[Bruno123]

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]

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

[Bruno123]

You are right sorry, let me share screenshots:

It looks like this with the button added:

And without the button it looks like this:

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

[PeanutButter]

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.  

[Bruno123]

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

[mike1231]

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?