Aligning add to cart buttons on collection page debut

Solved
Aisaacs90
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,

Replies 68 (68)
KetanKumar
Shopify Partner
24919 2495 9027

@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
New Member
1 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
24919 2495 9027

@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
New Member
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
24919 2495 9027

@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
mantel
New Member
2 0 2

Hello! 

It's been so helpful to read your suggestions! Thank you so much!

I have a problem because I think I made a mistake while copying the codes. My collection page doesn't have de number "1" for adding to cart, so it doesn't work. But my main page does. 

Would you help me to add the numer 1 to the collection pages, please? And if it's possible I would love to delete the option "add to cart" directly from main page (but still have it on collection pages). 

my URL: mantelyservilleta.com 

Thank you so much. 

S.

KetanKumar
Shopify Partner
24919 2495 9027

@mantel 

yes please try this code

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

.product-card + form {
    margin-bottom: 30px;
}

 

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
mantel
New Member
2 0 2
Hello!
Thank you.
I cannot find the file asset->theme.css, just “theme.cds.liquid” and “theme.js”

KetanKumar
Shopify Partner
24919 2495 9027

@mantel 

can you please check your theme allow this file

theme.css

i can see

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