Why are my 'Add to Cart' buttons misaligned on product pages?

Store Design
1

Hey everone, my Shopify store seems to have dis-aligned the “Add to Cart” buttons on my product pages for both mobile and desktop.

I believe this may be due to photo size? I can not seem to get things fixed. Any help will be appreciated.

www.bookstorebrew.com

Attached are photos for reference.

2

Hi Mateo1998,

Is it not just the fact that some of your product titles are longer than others?

You could add some ‘height’ to the class of the title in your css file so that they all line up again?

Or you could remove the ‘add to cart’ button from the ‘collection’ page… Would somebody actually purchase a book without going to the product page and finding out more information anyway?

3

At one point all of the buttons were aligned even with the longer titles.

We have not tried adding height, but that will be the next option.

We’d like to keep the Add to Cart button on the collection page if possible, simply to reduce the amount of clicks it takes to go from collection to checkout, but we are willing to consider this if there are no other options.

4

@Mateo1998 what theme are you using?

5

Currently “Minimal”

6

I know adding the ‘add to cart’ button is one less click to get to checkout but id be asking myself “would a customer purchase a book with only seeing an image, price and title”?

I just took a look at the minimal theme and they dont have any add to cart buttons on the demo.

Was the button added in the theme customizer or did you add it ass code yourself?

7

A shopify user helped us add it 6 months ago, we ourselves are very inexperienced with editing code.

8

I figured it must have been added as code afterwards.

You have two choices:

  1. take them off

  2. use css to line them up

Personally id do option 1

9

Thank you for your input, how exactly would we take them off in the coding? Would it be in the templates or sections?

10

It will be in the template.

Make a back up of the theme first before you do anything just to be on the safe side.

1 Like
11

We can’t seem to find the section of coding to remove it.

12

@Mateo1998

Problem
This type of issue is present in most of the free themes and it’s more complex than it meet the eyes. Essentially what happens is that the cells height are dynamic, they will adapt accordingly to the title’s height:

diego_ezfy_0-1638824261874.png
diego_ezfy_0-1638824261874.png1262×315 169 KB

Ideally, a Javascript script to see the tallest cell and force the other cells to follow its height would be the appropriate solution. This is how most premium themes handle it. Naturally this is also more complex to develop.

As a quick fix, I’d suggest adding ellipsis to the title whenever they’re longer than 1 line. It would look something like this:

diego_ezfy_0-1638824705682.png
diego_ezfy_0-1638824705682.png1274×583 543 KB

Solution
To add the code:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > timber.scss.liquid and paste this at the bottom of the file:
.grid-link__title {
    display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical;  
  overflow: hidden !important;
}

.grid__item {
    margin-bottom: 20px !important;
}

.grid__item form{
    text-align: center !important;
}

Kind regards,
Diego