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

Store Design

Topic summary

A user seeks to reposition the “Add to Cart” button on their Shopify product page to appear directly below the price and above the short description.

Initial Solutions Provided:

  • GemPages suggested adding custom code to the theme.liquid file before the </body> tag
  • harivishwakarma offered an alternative CSS solution for the base.css file

Implementation & Follow-up Issues:

  • The GemPages code initially worked successfully
  • However, the user discovered it doesn’t function properly on variable product pages (products with variants)
  • Additional request: align variation options to the left instead of center

Current Status:

  • GemPages acknowledged the issue and explained the standard product page element order
  • Provided additional code snippet to address left-alignment for variants
  • The conversation appears ongoing as the complete solution for variable products may still need verification

Note: Some code snippets in the thread appear corrupted or reversed in the original text.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
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

2

Hello @surewaydm ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1677641900267.png
GemPages_0-1677641900267.png400Ă—193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1677641932340.png
GemPages_1-1677641932340.png1699Ă—891 69.8 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

1 Like
3

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,

4

@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

5

@harivishwakarma I do not have a base.css file

6

Go to theme.liquid file paste below code above tag

[details=Show More]
**

Show More

.product-form__item.product-form__item–quantity.gutter-ele-top.gutter-ele-bottom.flex {

Show More

flex-wrap: wrap !important;

Show More

}

Show More

.qty-box.qty-box–single.flex.flex-align-ver.flex-align-space-between {

Show More

width: 20%;

Show More

order: 2;

Show More

}

Show More

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 {

Show More

order: 1;

Show More

width: 80%;

Show More

margin-bottom: 23px;

Show More

}

Show More
7

@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?

8

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

Kind & Best regards,
GemPages Support Team

1 Like