lining up add to cart buttons on "you may like" in product pages

Adrian99
New Member
4 0 0

Hi, 

I am using the Debut theme...

I managed to find the code to change to put add to cart buttons on all the products in the collection pages through the community pages... Then I worked out how to put them all in a line (with lots of trial and error)... 

Now I have another issue.... When you go to the actual products... The "you may like suggestion" products have the add to cart buttons not in line... see pic below 

It looks untidy and I just want to put them all in a straight line to clean it up.. 

can anyone assist please 

Thanks 

Adrian 

Adrian99_0-1625118959732.png

 

0 Likes
IonStorm
Excursionist
37 0 3

Maybe a min-height on the descriptions to ensure the buttons all line up. What solution did you use to fix the collection page? Do you have a link to the store?

0 Likes
Adrian99
New Member
4 0 0

Hi, 

I did this to get the add to cart buttons.. 

Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.

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

 Then I put this in theme.css to line those ones up 

#shopify-section-collection-template .page-width .grid .grid__item{
position: relative;
min-height: 459px !important;
}

#shopify-section-collection-template .page-width .grid .grid__item form {
position: absolute;
bottom: 0px;
margin-bottom: 100px ;
}

@media only screen and (max-width: 428px) {
#shopify-section-collection-template .page-width .grid .grid__item {
min-height: 380px !important;
}
}
@media only screen and (min-width: 429px) and (max-width: 999px) {
#shopify-section-collection-template .page-width .grid .grid__item{
min-height: 410px !important;
}

Page is still under construction but its ozrockstop.com.au  

 

0 Likes
IonStorm
Excursionist
37 0 3

Okay I see the difference between each page. The collection page has the buttons attached to the very bottom of each product using absolute positioning. That might be kind of hard to do for the recommended section if you're not great with CSS. 

A half-assed way is to just add min-height:[somenumber]px; to the class "grid-view-item" or "product-card" depending on which one is the best choice (hard to tell without taking a deep dive into the code). If you pick a number that's just big enough it will go past the longest product title so the buttons are all in line. It's kinda hacky.

Adrian99
New Member
4 0 0

Can you put that in laymans terms ?

put what where?... Im am just winging it with this code stuff - I got lucky today with the other stuff 

0 Likes