What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Product page "add to cart" button - how to make it left aligned?

Solved

Product page "add to cart" button - how to make it left aligned?

mecanic
Tourist
6 0 1

Hello, recently i added button "add to cart" and after centering it, the add to cart button in product page is also centered. I need it to stay on the left and "add to cart" button in collection page to stay in the centre

Any possible way to solve this? 
Also, would be great to align all "add to cart" buttons on the collection page  

Please help Untitled.pngUntitled1.png

Accepted Solutions (3)
oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-product-template .product-single .grid__item.post-large--one-half form {
    text-align: left !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Kinjaldavra
Shopify Partner
2303 570 1426

This is an accepted solution.

@mecanic  for add to cart button" alignment

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 


#shopify-section-product-recommendations .product-recommendations .grid-uniform  .grid__item .grid-link__title{
	  min-height: 40px !important;
}

 

 

 

View solution in original post

oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Add this css

.grid-uniform p.grid-link__title {
    min-height: 40px !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

View solution in original post

Replies 10 (10)

Kinjaldavra
Shopify Partner
2303 570 1426

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

mecanic
Tourist
6 0 1

Hello,

www.mecanictools.lt

pass: awttad

oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-product-template .product-single .grid__item.post-large--one-half form {
    text-align: left !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
mecanic
Tourist
6 0 1

Worked perfectly, thanks!

Perhaps you have a solution for "add to cart button" alignment?  

Kulvindar
Visitor
2 0 0

Hello there,

I am experiencing an issue with the alignment of the "Add to Cart" button. It is not centered. Please refer to the attached screenshot.

 

Kulvindar_0-1695501733592.png

 

Kinjaldavra
Shopify Partner
2303 570 1426

This is an accepted solution.

@mecanic  for add to cart button" alignment

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

 


#shopify-section-product-recommendations .product-recommendations .grid-uniform  .grid__item .grid-link__title{
	  min-height: 40px !important;
}

 

 

 

mecanic
Tourist
6 0 1

@oscprofessional 

thanks for solution.
any possible way to align all "add to cart" buttons? 

 

oscprofessional
Shopify Partner
16116 2410 3126

This is an accepted solution.

Add this css

.grid-uniform p.grid-link__title {
    min-height: 40px !important;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free
mecanic
Tourist
6 0 1

@oscprofessional thank you very much!!! 

oscprofessional
Shopify Partner
16116 2410 3126

Hello,
Please share your site url.
So that I can check and let you know the exact solution here.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free