Aligning add to cart buttons on collection page debut

Solved
Highlighted
Excursionist
19 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,

1 Like
Highlighted
Shopify Partner
3129 681 833

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
9213 1178 3242

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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
19 0 5

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

0 Likes
Highlighted
Excursionist
19 0 5

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

I'm really grateful!

0 Likes
Highlighted
Excursionist
19 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?

1 Like
Highlighted
Shopify Partner
3129 681 833

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.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Excursionist
19 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

0 Likes
Highlighted
Excursionist
19 0 5

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

Untitled1.png

 

0 Likes
Highlighted
Shopify Partner
9213 1178 3242

@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 Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes