How to change Add to Cart Button Position/ Place it under Price

Solved

How to change Add to Cart Button Position/ Place it under Price

surewaydm
Shopify Partner
24 3 1

Hi, I want to position the Add to Cart button right below price and above short description on product details page. Could someone look into it any tell me what can I do? 

 

https://www.surewaydm.com/products/silver-hoop-earrings-for-women-serpenti-inspired

 

Thanks in advance

Accepted Solutions (2)

GemPages
Shopify Partner
5624 1261 1231

This is an accepted solution.

Hello @surewaydm ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1677641900267.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1677641932340.png

  <style>
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs {
          display: flex;
          flex-direction: column;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > div {
          order: 0;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > .pg__short-desc {
          order: 2;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > forrm.product-form {
          order: 1;
      }
      
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > div.product-single__sub {
          order: 4;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > div.product-single__sub-info {
          order: 3;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > hr {
          order: 3;
      }
  </style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

GemPages
Shopify Partner
5624 1261 1231

This is an accepted solution.

Hello @surewaydm ,

 

In the usual order of product pages, information will be displayed in the order Product Name > Review > Price > Product Version (if available) > Product Quantity > Add to cart button, In the usual order of product pages, information will be displayed in the order Product Name > Review > Price > Product Version (if available) > Product Quantity > Add to cart button

with align left to variant, You can add this code 

<style>
.product-single.pg.product-single-layout2 .gutter-ele-top-tbs.pg__option {
    text-align: left;
    align-content: flex-start;
}
</style>

Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

View solution in original post

Replies 7 (7)

GemPages
Shopify Partner
5624 1261 1231

This is an accepted solution.

Hello @surewaydm ,

 

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

GemPages_0-1677641900267.png

2. Open your theme.liquid file, paste the below code before </body>

GemPages_1-1677641932340.png

  <style>
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs {
          display: flex;
          flex-direction: column;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > div {
          order: 0;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > .pg__short-desc {
          order: 2;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > forrm.product-form {
          order: 1;
      }
      
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > div.product-single__sub {
          order: 4;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > div.product-single__sub-info {
          order: 3;
      }
      .product-single.pg.product-single-layout2 .gutter-ele-top-tbs > hr {
          order: 3;
      }
  </style>

I hope the above is useful to you.


Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
surewaydm
Shopify Partner
24 3 1

@GemPages 

This code worked like a charm. I did not check how the product page will look on different devices but I hope it would look as good.

 

Thanks for your help

surewaydm
Shopify Partner
24 3 1

@GemPages I just noticed that for the variable product pages, the button is not going under the price.

I would also like to have the variation options to be aligned to the left rather than center.

Can you help with that?

GemPages
Shopify Partner
5624 1261 1231

This is an accepted solution.

Hello @surewaydm ,

 

In the usual order of product pages, information will be displayed in the order Product Name > Review > Price > Product Version (if available) > Product Quantity > Add to cart button, In the usual order of product pages, information will be displayed in the order Product Name > Review > Price > Product Version (if available) > Product Quantity > Add to cart button

with align left to variant, You can add this code 

<style>
.product-single.pg.product-single-layout2 .gutter-ele-top-tbs.pg__option {
    text-align: left;
    align-content: flex-start;
}
</style>

Kind & Best regards, 
GemPages Support Team

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

harivishwakarma
Shopify Partner
322 46 55

Hallo @surewaydm 

You can add code by following these steps to change

1. Go to Online Store -> Theme -> Edit code > assets > base.css

paste below code at bottom(base.css)


.product-form__item.product-form__item--quantity.gutter-ele-top.gutter-ele-bottom.flex {
flex-wrap: wrap !important;
}
.qty-box.qty-box--single.flex.flex-align-ver.flex-align-space-between {
width: 20%;
order: 2;
}
button.button.button--one-line.add-cart-btn.button--single-cart.button--cart.flex.flex-align-ver.flex-align-hoz.add-cart-btn--state.por.button--single-cart-main.button--single {
order: 1;
width: 80%;
margin-bottom: 23px;
}

 

If you require any further information, feel free to contact me.

Best regards,

banned
surewaydm
Shopify Partner
24 3 1

@harivishwakarma I do not have a base.css file

harivishwakarma
Shopify Partner
322 46 55

Go to theme.liquid file paste below code above </head> tag

 

Click to expand...
<style>
.product-form__item.product-form__item--quantity.gutter-ele-top.gutter-ele-bottom.flex {
flex-wrap: wrap !important;
}
.qty-box.qty-box--single.flex.flex-align-ver.flex-align-space-between {
width: 20%;
order: 2;
}
button.button.button--one-line.add-cart-btn.button--single-cart.button--cart.flex.flex-align-ver.flex-align-hoz.add-cart-btn--state.por.button--single-cart-main.button--single {
order: 1;
width: 80%;
margin-bottom: 23px;
}
</style>
banned