How can I move the product price under the variant on my website?

Store Design

Topic summary

A user wants to reposition the product price on their store so it appears below the variant selector (or above the quantity field when no variants exist). Currently, the price displays on the same line as the product heading, creating confusion—especially after adding Afterpay code.

Two solutions proposed:

  • CSS approach: Add custom CSS to the theme.css file to reorder elements using flexbox properties (flex-direction: column-reverse), moving the price below the product title

  • Template modification: Edit the product-template.liquid file in the Sections folder to restructure the HTML markup, placing the price element directly below the variant section

Both methods require editing theme code files. The user included a screenshot and product page link showing the current layout issue.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I just want the price of my products to be under the variant (as shown in image) if someone can help please? Or if there is no variant just above the amount wanting…

I’m not sure why it is on the same line as the heading, and now that I have added afterpay code, it is extremely confusing as it is in the same line as the heading and price but before the price.

Added the link if that helps.

https://thefairtraderstore.com.au/collections/planters/products/kubu-rattan-straight-round-baskets

Thanks

Screenshot 2023-07-12 at 1.59.23 pm.png
Screenshot 2023-07-12 at 1.59.23 pm.png2584×784 138 KB

2

Hi @media_by_bec
In this case if you want to move the price to below the Size, You must change the theme code.
but you can try to use this code to move the price to below the Product Title

You can try follow this path:
Themes => edit code => asset => theme.css
and add this code to bottom of the file theme.css

.product-section .product__details .product__headline {
flex-direction: column-reverse;
gap: 10px;
justify-content: flex-start;
}
.product__align-left .product__price {
align-items: flex-start;
}
3

Hello @media_by_bec ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → product-template.liquid file

Modify the code so that the price appears below the variant section like this example


  

  {{ product.price | money }}

# {{ product.title }}

Save and preview

Hope this can help. Let us know if you need any further support.

Transcy