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

Highlighted
New Member
3 0 0

Hi Steve, I'm having the same issue. The buy boxes are not at the same level. I'm trying to find where to add the code that you received from Romeoro to use in the Open Assets/theme.js.  but I cannot find the place to insert it. Maybe you can remember and help me?

function resizeElements() {    expo.cache.$productGridImages.css('height', 'auto').equalHeights();    expo.cache.$featuredGridImages.css('height', 'auto').equalHeights();    $('.grid-link__title').css('height', 'auto').equalHeights();          // Add this line to have equal heights for product titles.
  }

es 

0 Likes
Highlighted
New Member
29 0 0

Hi Maya

Sorry, just seen your message.

Ok, in the Assets>theme.js I searched for 'resizeElements' and it was right at the bottom.
Romero's line of text is literally the last line of text on my theme.js file. here's the screenshot with the line number on the left.

Line 1811 is the bottom of my file.
Hope that helps.

 

AddToCart1.jpg

0 Likes
Highlighted
New Member
2 0 0

@oscprofessional wondeirng if you can hep me with a similar issue to @SteveWinch5DS ?

 

I have added this code into the site on the product-card-liquid snippet:

 

<form method="post" action="/cart/add">
  <input name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
              {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                  {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                  {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
              {% endfor %}
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
 
It adds in the quantity selector and the submit button as well as the list of variant options - as you can see here.
 
New Picture (14).jpg
 
My first question is - how to I make the variants a list / drop down of options and remove where it says "default item"?
My second question is - how to align all the products to be the same height, so that the submit buttons all line up?
 
Thanks in advance
0 Likes
Highlighted
Tourist
6 0 1

Hi, I have the add to cart button on my collections pages, but when an item sells out it still allows the customer to add the item to their cart (from the collections page, not the product page). How can I change it so if the item is out of stock it changes the add to cart button to a grey sold out or just make the button unavailable. I have searched the the answer but can't find it. 

Link for example 

 

Thank you

0 Likes
Highlighted
Tourist
21 0 2

@Katrina_Rudd - Did you find a solution? I'm encountering the same issue.

 

Also, I was using the "Upsell Now" app which created a pop up when pressing add to cart. This doesn't seem to work anymore (on either collections page or product page), any suggestions?

 

Thanks

0 Likes
Highlighted
Highlighted
Tourist
21 0 2

@Katrina_Rudd Thank you!

 

@Romeoro Do you know how I can apply your code to the "We also recommend" section at the bottom of a product page? It works fine on the collection pages, but not in the recommended section. Thanks.

0 Likes
Highlighted
Tourist
5 0 3

May I see your website please ? Btw, where are you from ?

0 Likes
Highlighted
Tourist
21 0 2

@Romeoro is there a way I can contact you directly? Discord perhaps? 

0 Likes
Highlighted