Solved

Aligning add to cart buttons on collection page debut

Aisaacs90
Excursionist
20 0 5

Hi everybody,

I need help to fix 3 things that can be seen on the image attached

Untitled.png

 

  • Separate quantity box from add to cart button
  • Center add to cart buttons
  • Align text box so when products title has many words it maintains aligned

The store URL is

https://freezyec.com/collections/guarniciones

I'd really appreciate some help.

Regards,

Accepted Solution (1)

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Aisaacs90 

Thanks for post.

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

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

.product-card__title {
    min-height: 50px;
    display: block;
}
form {
text-align: center;
}
.btn {
    margin-top: 10px;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 75 (75)

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @Aisaacs90 

add code assets/theme.scss.liquid bottom of the file

.product-card .product-card {height: 232px;}
.product-card .btn {justify-content: center;display: flex; margin: 18px auto;}

@media screen and (max-width: 749px){
.product-card .product-card {height: 180px;}
}

I Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aisaacs90
Excursionist
20 0 5

Thanks for the reply, but your solution didn't work thou.

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@Aisaacs90 

Thanks for post.

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

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

.product-card__title {
    min-height: 50px;
    display: block;
}
form {
text-align: center;
}
.btn {
    margin-top: 10px;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Aisaacs90
Excursionist
20 0 5

This was perfect, it solved the 3 problems I had.

I'm really grateful!

Aisaacs90
Excursionist
20 0 5

Hi,

If I also want to apply the same changes (text boxs aligned, add to cart button centered and spaced between quantity and button) to the collection shown on homepage what would I need to change in the coding?

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @Aisaacs90 

add code assets/theme.scss.liquid bottom of the file

@media only screen and (min-width: 750px){
.btn {margin-bottom: 20px !important; margin-top: 20px;}
}

form {
text-align: center;
}

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aisaacs90
Excursionist
20 0 5

Hi @dmwwebartisan 

Thanks for answering!

Your code helped me, only thing missing is that the offer sign is misalingning the text boxs and add to cart buttons in some items.

Know how to fix this?

Untitled.png

Aisaacs90
Excursionist
20 0 5

I just checked on mobile and the spacing issue remains in there @dmwwebartisan 

Untitled1.png

 

dmwwebartisan
Shopify Partner
12282 2546 3694

HI @Aisaacs90 

Please try this code . add code assets/theme.scss.liquid bottom of the file

@media only screen and (max-width:768px) {
.grid__item--collection-template .product-card__title {
min-height: 22px;
display: block;
}
.btn {margin-bottom: 20px !important; margin-top: 20px;} }

Hope this will work for you.


Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aisaacs90
Excursionist
20 0 5

Hi @dmwwebartisan 

It solved the mobile issue.

Only thing remaining is that because of the discount red label and when product's name is large, some items tend to move a bit and are not aligned.

It happens on computer and cellphone screen.

Untitled.png

dmwwebartisan
Shopify Partner
12282 2546 3694

Hey @Aisaacs90 

add code assets/theme.scss.liquid bottom of the file

#Collection.grid-view-item {max-height: 265px;}
@media only screen and (max-width:768px) { 
#Collection.grid-view-item {max-height: 180px;} 
}

Hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aisaacs90
Excursionist
20 0 5

@dmwwebartisan unfortunately it didn't work 😞

Do I have to delete any of the previous codes you provided me?

I have copied them all at the end as you said me, but the last one didn't make any change.

KetanKumar
Shopify Partner
36839 3635 11972

@Aisaacs90 

Thanks for details 

We have checked for this issue in real system and browserstack but it is working ok. In which system configuration or browser you are checking?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Aisaacs90
Excursionist
20 0 5

@KetanKumar thanks for your concern!

I'm using google chrome (desktop) and mobile on android.

The remaining problem is that it is not aligned.

dmwwebartisan
Shopify Partner
12282 2546 3694

Hello @Aisaacs90 

Please try this 

Hey @Aisaacs90 

add code assets/theme.scss.liquid bottom of the file

#Collection .grid-view-item {max-height: 265px;}
@media only screen and (max-width:768px) { 
#Collection .grid-view-item {max-height: 180px;} 
}

Hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Aisaacs90
Excursionist
20 0 5

@dmwwebartisan it didn't work either.

It is still not aligned.

I think it is mostly because of the discount red label.

beckyh
Excursionist
10 0 3

Amazing! This makes the button centred but it is still touching the product image below, how do I change this?

KetanKumar
Shopify Partner
36839 3635 11972

@beckyh 

store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
itshipped
Visitor
2 0 1

Hello,

I'm hoping you can also help me with my alignment issues. I've tried all of the codes in the last 6-7 pages, but for some reason I just cannot figure out how to fix it!

The URL is www.itshipped.com and here's a screenshot of the issue:

itshipped_0-1634161468797.png

 

Can you help me to make the "shop now" buttons all aligned? I realize the first image on the left is too large - I have it re-sized but forgot to upload the new image I guess. Besides the image size though, the length of the descriptive text is messing up the height of the overall block. Could we auto-cutoff the text after a certain amount of characters and have it add "[...]" at the end to force all of the descriptions to be the same size?

Same issue is happening further down. The product titles are sometimes really long, which is causing the red "sale" icons to all be off:

itshipped_1-1634161657963.png

 

Thank you for any help you can provide!!

KetanKumar
Shopify Partner
36839 3635 11972

@itshipped 

yes please confirm this look?

KetanKumar_0-1634186293762.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
ITFranklins
Visitor
1 0 1

@KetanKumar You seem to be the man to talk too. Would you mind doing the same for me as well? www.franklinswine.com is the url 🙂   alignment.png

KetanKumar
Shopify Partner
36839 3635 11972

@ITFranklins 

sorry for that issue 

yes please try this code

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

.product-collection__more-info.mb-3 {
    display: none;
}
.product-collection__title h4 a {
    height: 36px;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nashthemash
Excursionist
12 0 5

Hi i can't seem to find Asset->/theme.css Capture.JPG


Campionk
Shopify Partner
37 0 4
Are you using the ' Debut' theme?
Nashthemash
Excursionist
12 0 5

Turbo-portland

Campionk
Shopify Partner
37 0 4

Add it to the styles.scss.liquid file. The code may not be the same though on a different theme. Would be helpful to share your url

Nashthemash
Excursionist
12 0 5

www.angelsbeauty.ae

pass :- fathu

tried pasting the code but didnt align it check screenshot please

 

Capture.JPG

KetanKumar
Shopify Partner
36839 3635 11972

@Aisaacs90 

Thanks for post again

i have check whole site all good can you please provide screenshot further issue

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Aisaacs90
Excursionist
20 0 5

Hi @KetanKumar 

The problemas are,

1- The "offer" red label misalings the text boxs and the add to cart button, I need everything to maintain aligned

Untitled.png

2- On mobile the texts box and add to cart buttons are to close to the image that is below

Untitled1.png

I really need to fix both issues.

Thanks in advance.

Url is https://freezyec.com/

 

 

theoliostore
Visitor
2 0 1

Hi could you help me centre the add to cart button as seen in screen shot 

 

Screen Shot 2021-01-09 at 15.01.31.png

KetanKumar
Shopify Partner
36839 3635 11972

@theoliostore 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Campionk
Shopify Partner
37 0 4

Hard to say without seeing your site URL, but try adding this code to the bottom of your theme.css.liquid file:

form {

text-align: center;

}

Riamcaba
Visitor
3 0 0

Hello! I have the same problem with the grid, it is not aligned. I think it’s a descriptive text issue. I would like to fix the position of the add to cart button leaving enough space for the longer texts to fit and the grid to stay aligned. I've tried this code, but it doesn't work for me. I put it in theme.css because even though I use the simple theme I don't get the theme.css.liquid

 

I'd really appreciate the help

the store URL is https://elstresreis.com/

 

thanks in advance

KetanKumar
Shopify Partner
36839 3635 11972

@Riamcaba 

Thanks for post 

sorry your store is password protect

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Riamcaba
Visitor
3 0 0

Sooo many thanks for responding!!!!! I really appreciate that!!!

the password is: editingkey

 

KetanKumar
Shopify Partner
36839 3635 11972

@Riamcaba 

Thanks for details 

do you mean like this?

KetanKumar_0-1605761985886.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Riamcaba
Visitor
3 0 0

Yes! exactly like this! but only with the prices aligned like the add to cart button.

How can I achieve this result?

Many thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@Riamcaba 

Yes, both are done some backend code can you please send PM

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Campionk
Shopify Partner
37 0 4

Did this get solved? I'm having the same issue.

KetanKumar
Shopify Partner
36839 3635 11972

@Campionk 

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Campionk
Shopify Partner
37 0 4

Hi @KetanKumar!

www.bellavirtuorganics.com is the site. I'd like all the shop now buttons to be aligned on the collection pages and the featured collection on the homepage. Thanks for taking a look!

collectioncollection

KetanKumar
Shopify Partner
36839 3635 11972

@Campionk 

Thanks for the details 

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

.product-card__title {
height: 60px;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Campionk
Shopify Partner
37 0 4
Thank you so much!!!! I've spent hours trying to figure this out 😞
KetanKumar
Shopify Partner
36839 3635 11972

@Campionk 

Thanks for your feedback and support 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Campionk
Shopify Partner
37 0 4

Hi again,

 

This turned out to only be a partial fix. While the buttons are now aligned, the 'add to cart' button no longer adds a product to the cart, instead, it goes to the product page. Any ideas why? 

Thanks in advance

tareksidani
Tourist
7 0 3

@KetanKumar 

Hi I'm trying to align the acc to cart buttons for my website using your solution but with no luck.

Can you please help? I've removed the buttons now until I can align them properly.

web url is toyboxuae.com 

Add To Cart.png

Campionk
Shopify Partner
37 0 4

I can try to help, but I need you to re-add the buttons in order to figure it out.

tareksidani
Tourist
7 0 3

@Campionk thank you very much, just added them back.

Campionk
Shopify Partner
37 0 4

I'd try this...Add this code to the bottom of your theme.css.liquid file

 

.product-card {

min-height: 385px

}

form {

    padding-bottom: 30px;

    text-align: center;

}

@media screen and (max-width: 749px){

.product-card .product-card {min-height: 350px;}

}