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

Highlighted
Shopify Partner
8 0 1

Sorry Brydon, I got your name wrong...my bad.

 

 


@Brydon_McClusk1 wrote:

Hey William!

 

Glad to see you using Shopify, it's a great platform! That's a great idea, and I'd be happy to help you achieve that! :)

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme, and select Customize theme
  • Click the . . . on the top left-right (see below) and hit Edit code

  • Seach for product-grid-item.liquid (or something similar!)
  • Find <div class="product-item--price">, and add the following code before, or after, the closing </div> tag depending on if you want the button and quantity selector above or below the price
<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> 
  • Hit Save, and you're good! You can't preview the changes to the code unless you save it first :)

 

Best of luck with your store and I hope I was able to help! All the best William :D


 

0 Likes
Highlighted
New Member
30 0 0

Hi Deannav
That's awesome, just added it, all works fine! 
My only quibble (and not to do with your code) is that the quantity box and button are not level. (See image below)

I think this could be sorted by editing the product descriptions, but I was wondering if there's a bit of code that would level them all off in one hit? 

 

Uneven Surfaces.jpg

 

Cheers

Steve

0 Likes

@SteveWinch5DS,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
30 0 0

Hi Pallavi
Here's the URL > https://five-dollar-shake-wholesale.myshopify.com/
Any Collection / Category page will show the misalignment of the Add To Cart buttons / Quantity Boxes.
Just having them all in a straight line would be nice. But it looks to me like it's due to the length of product description causing the issues.

I may have to edit those for it to work as I want it! :)

Thanks

Steve

0 Likes
Highlighted

@SteveWinch5DS,

Your site is password protected

 

You can use css...

Put height to product title so that it will in one line

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
30 0 0

Can you give an example of the code I'd need in CSS to make this work please?!

I dont mind having a play around with the code, just looking for pointers! :)

Thanks

0 Likes
Highlighted

Hello @SteveWinch5DS ,
Add this code at the bottom of Theme -> edit code -> asset -> theme.scss.css

.list-view-item__price-column form #quantity {
    width: 60px;
    height: 45px;
}
.list-view-item__price-column form input {
    float: left;
    width: 50%;
    margin: 0 6px;
    height: 40px;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
30 0 0

Hi, thanks for that.

I don't have a theme.scss.css in my asset section.

I DO have theme.scss.liquid... I added it in there.

 

But this happened...  it moved all the 'Cart' buttons down onto the top of the image below (depending on length of product description)

Uneven Buttons2.jpg

 

Have I added the code to the wrong place? Thanks

 

*EDIT* PS I like that the Qty box is smaller and next tot he cart button... they're just too low down now.
The gap between the product description and button needs to be smaller if possible! Thanks

0 Likes
Highlighted
Tourist
5 0 3

There is a JavaScript function (equalHeights) built into the theme.  We can use this to set the product title heights to be that of the largest height.  (e.g. If the longest title is 5 lines, all other product titles will be set to the height of 5 lines.)

Open Assets/theme.js.  Look for the section of code below and add in the indicated line.

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

example 

2 Likes
Highlighted
New Member
30 0 0

Hi Romeoro

 

That's great. Sorry I'd missed your reply and just got around to trying it! 
Worked perfectly, thanks! 

 

Steve

0 Likes