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
16366 2440 3188

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;
}
Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...

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
16366 2440 3188

This is an accepted solution.

Add this css

.grid-uniform p.grid-link__title {
    min-height: 40px !important;
}
Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...

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
16366 2440 3188

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;
}
Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
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
16366 2440 3188

This is an accepted solution.

Add this css

.grid-uniform p.grid-link__title {
    min-height: 40px !important;
}
Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...
mecanic
Tourist
6 0 1

@oscprofessional thank you very much!!! 

oscprofessional
Shopify Partner
16366 2440 3188

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

Hire us | Pass Core Web Vital | B2B Wholesale Experts | Claim Your Free Website Review |
Connect with Us: WhatsApp | Skype: oscprofessionals-87 | Email: pallavi@oscprofessionals.com |
Custom Shopify SolutionsPrivate Apps, Theme Customization & SEO | Digital Marketing |
OSCP Apps: Discount Suite | Wholesale App | Bundle & Upsell | Shipping Discount | and more...