Re: Add to cart alignment

Solved

How can I fix add to cart alignment issues on my website?

MrGadgets
Excursionist
20 0 3

Hi,

I do know and understand that this topic has been covered a lot of times, but unfortunately my theme seems to differ a little to others.

In the long run I will go ahead and get a premium theme regardless to get some more needed features covered, but In my eyes the shop will need to prove itself first 😛

 

To my problem the add to cart alignment is shocking no matter where if its on the Homepage or collection page 😄

Screenshot_2.png

Thats one example not the worst one I myself get dissy going over the page 😄

 

when I check on the community Board I see that most people just simply add some code to :

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

Please see my screenshot I don't seem to have the selection and I tried copying the code in to the styles.css and styles-responsive.css which didn't help it unfortunately. 

Screenshot_1.png

Website to check for this problem: www.coolgadgets.site 

Please let me know how I can sort that problem to tick it of my to do list 😄

Thanks you everyone 🙂

@Anonymous 

Accepted Solution (1)
Sajeel
Shopify Partner
272 31 26

This is an accepted solution.

@MrGadgets  add this code in theme-style.css

 

.product-item .product-bottom {height:203px;
align-items: end;
display: grid;
}

View solution in original post

Replies 19 (19)

Dbuglabpvtltd
Shopify Partner
705 75 117

Hi @MrGadgets 
You can add that code in these files

Dbuglabpvtltd_0-1648167939576.png

 

banned
MrGadgets
Excursionist
20 0 3

Hi @Dbuglabpvtltd 

 

I went ahead and added this code:

.grid__item--collection-template {
margin-bottom: 30px;

.product-card__title {
    min-height: 50px;
    display: block;
}
form {
text-align: center;
}
.btn {
    margin-top: 10px;
}
}

which is the one I found to booth the categories as mentioned, but if you go back on my site:
www.coolgadgets.site you can see that they are still all over the place.

Am I using the wrong code or would there be another solution to the Problem.
Thank you,
Andre


Sajeel
Shopify Partner
272 31 26

@MrGadgets  there is wishlist button after add to cart button thats why your code is not working

Sajeel_0-1648183786361.png

 

MrGadgets
Excursionist
20 0 3

@Sajeel  would there still be a way around it since I actually would like to keep the wishlist function 

Sajeel
Shopify Partner
272 31 26

i think you need to show wishlist button without hover also then it will look nice and then you can align the text center

MrGadgets
Excursionist
20 0 3

okey thank you I will see that I check that out

MrGadgets
Excursionist
20 0 3

I still haven't been able to align the damn add to cart and its been really annoying. Please who could help me with that I'm really lost at this stage....

Website. www.coolgadgets.site

Sajeel
Shopify Partner
272 31 26

how you want to align them? add to cart is aligned perfectly the issues is there is a wishlist heart which appears on hover

Sajeel_0-1648786435101.png

 

MrGadgets
Excursionist
20 0 3

That's not were the issues is the problem is within the heights.

You see some show reviews some don't.

Some have color options some don't.

So if you look at it especially on the collection page you see its all over the place and I would like to have them all in a straight line.

See the Screenshot attached the first 2 line up perfectly.

The 3rd one got no color option so it sits higher.

The 4th one has reviews aswell so sits a bit lower.

Since they will all get reviews eventually the goal is to line the add to cart button all at the same height as the 4th one.

That would help to make the website look much cleaner...

Screenshot_9.png

Sajeel
Shopify Partner
272 31 26

This is an accepted solution.

@MrGadgets  add this code in theme-style.css

 

.product-item .product-bottom {height:203px;
align-items: end;
display: grid;
}
MrGadgets
Excursionist
20 0 3

That did the trick awesome thank you so much I really appreciate that a lot 🙂

Sajeel
Shopify Partner
272 31 26

Thanks

MrGadgets
Excursionist
20 0 3

@Sajeel 

 

Hey I just noticed that it created another problem only on the products with reviews it started overlapping now.Screenshot_10.png

im using the judge.me with the aliexpress review importer on that

MrGadgets
Excursionist
20 0 3

Sorted it 🙂

Sajeel
Shopify Partner
272 31 26

Let me check

Sajeel
Shopify Partner
272 31 26

@MrGadgets  it looks fine. on which device you are facing the issue?

Sajeel_0-1648793834001.png

 

 

MrGadgets
Excursionist
20 0 3

I just worked it out I had to go with a height of 260 rather then 203 that's why it was overlapping its perfect now and looks much cleaner thank you. 

Sajeel
Shopify Partner
272 31 26

perfect

Sajeel
Shopify Partner
272 31 26

on which devcie you are facing issue

Sajeel_1-1648793888698.png