Adding an "Add to Cart" Button to Collection Pages in Debut Theme

Highlighted
New Member
2 0 0
Thanks for your feedback!
Free plan only allow customers instanly add product without variants.
Our app has a paid plan to support the customers could instant select variants and add to cart from collection page. Please upgrade to Standard plan to use this feature.
0 Likes
Highlighted
New Member
2 0 0

This was great advice and worked for me, thanks! An FYI for anyone struggling with the qty/cart buttons taking them to the product page, you could try to place the form code below the closing

</div>

tag. Doing that worked for me because the qty/cart buttons are then outside of the hover link to the product page.

0 Likes
Highlighted
Tourist
4 0 0

Here is what I've figured out from all my research and trial and error with all of this. If you need fancy bells and whistles with variants then I think others have handled that earlier in this feed. My goal was to get a simple Add to Cart button on my collections pages and not have it go to the cart with every click. 

I'm using the Prestige theme and, having gone through this thread a number of times to try and figure out what is what, it can't be stress enough that where you place the code is going to change from theme to theme. So these would be my steps for the Prestige theme:

1. Go to edit code

2. In product.item.liquid paste the form code at the end of the ProductItem_Wrapper div.

<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>

I commented out the quantity line because I just wanted the button.

I had to inspect the object on my live site to see how my theme had named and placed the product items in the collections page. Then there was a whole lot of going through possible snippet files to find the right one and put it in the right location.

3. TO KEEP IT ON THE PAGE:

I followed this example/tutorial [https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...] and even though it had instructions for the Debut theme it worked for mine. It's very straight forward. Of note: you need to load the jquery library in the theme.liquid file (this help was in the comments section and without it you'd see no changes and you'd keep going to the cart)

Add: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Right above: {% render 'ajaxify-cart' %}

4. In theme.scss.liquid make any styling changes

input.btn (I wanted to style the Add to Cart button to look like all the other buttons on the site)

p.ajaxified-cart-feedback.success (to change the Added to cart/View cart or  message from the default green to match theme colours)

Hope this helps someone and save some frustration with half answers and simply saying "Works for me" without saying what worked and how. Good luck!

0 Likes
Highlighted
New Member
1 0 0

Hi William! Thank you for raising this question.

Brydon, I attempted your direction to my homepage (under grid section). However, when I click the - or + to add my desired quantity to cart, it brings me to the product page.

  1. How can I choose my quantity and add to cart while staying on the same page?
  2. Also, how can I align the information to be centralized under each product picture?

Thank you in advance!

image.png

0 Likes
Highlighted
New Member
1 0 0

Hi, were you able to fix this?

I can't figure out how to get a gap below 'add to cart' and have been searching these threads for ages.

Any help would be really appreciated!

Thanks

Screenshot 2020-06-12 at 18.55.46.png

0 Likes
Highlighted
Tourist
4 0 0

It looks like you need to change your CSS to add padding around the button or to the bottom of your button.

0 Likes
Highlighted
Shopify Partner
492 61 79

Please check out https://www.bhavnagaris.com/  we have done all the customization on minimal theme based on various thread. 

For the gap you need to check the padding in CSS. Best way is to check out in the browsers under dev tools, especially Edge browser gives you entire source of CSS from where a particular element is taking its properties.

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution

Skype : lokendra.panwar1
0 Likes
Highlighted
Excursionist
29 1 23

FYI I ended up buying the Canopy theme for this (and several other features that make a much more ‚premium’ feel than Debut. Devs are fairly responsive and open to feedback/suggestions so this theme is still evolving, which is nice

https://themes.shopify.com/themes/canopy/styles/kiln

ours just went online on https://www.tylkozdroweprodukty.pl

 

0 Likes
Highlighted
New Member
2 0 0

HI Steve,

 

Thanks for your advice, but I couldn't locate resizeElements in the theme.js file.

Is there any other way to achieve this?

 

Kind regards.

 

0 Likes
Highlighted
New Member
2 0 0

@Romeoro 

Hi Romeoro,

Thanks for your code.  Could you please advise me where to put this code?

Many thanks, 

Kind regards.

B

0 Likes