Hello there everyone!
password: 1234
I would like to change my price location on product page to be on top of the “add to cart” button, and also would like to move that “valitse kuvasi” box a bit more upwards, to make some space for the price.
I would like to get this on both mobile and desktop views!
Looking forward to fixing this, and thanks in advance!
Picture to showcase the problem.
you need to do that from the admin
go to the product.liquid and find the class for price move it upward in html code
if it’s complicated PM me with details
Hey @Piirretty,
On your Shopify Admin > Online store, click on the three dots and “Edit code”. The code editor will open, and you will need to search for the file product-template.liquid file inside of the Snippets folder.
When the file is opened, search for the following code
{{ product_price }}
Move this code to line 599 of the file (If you are using versions 4.10.2/4.10.3), above the class “product-single__add-to-cart”.
Please find the screenshot as a reference.
If applied correctly, the price will appear above the add-to-cart button.
In the theme editor > theme settings > custom style/script, you can add the following CSS to add margin above the price so it will add space between the “Valitse Kuva” button.
.price-container-desktop{
margin-top:16px;
}
hey @Piirretty ,
Instead of adding the code on top of the class “product-single__add-to-cart”, please add it inside. Please see the screenshot as a reference:
I’m unsure if the app you are using adds the code automatically when live or if it was manually added to your theme files.
If it was manually added, you will see a code with an id equal to “photouploadapp”, therefore add the product price code below this id.
After changing the position, if it’s still appearing above the wrong button, paste the CSS code below to your theme settings > custom style/script:
.product-single__add-to-cart {display: flex!important;flex-direction: column!important;}
div#photouploadapp {order: 1!important;}
.price-container-desktop {order: 2!important;}
.btn--add-to-cart{order:3!important;}
If inserted correctly, it should look like this:
