Debutify theme, product page change price location

Store Design
, ,
1

Hi there.

I would like to change my price location on mobile to right over checkout button, (check pictures).

Is there a way to do that. Also I would like to move the “VALITSE KUVA” box a little bit up, to make more space for the price.

From here

1.PNG
1.PNG514×856 140 KB

To here

2.PNG
2.PNG656×827 66.2 KB

Thanks in advance!

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

https://muutukeltaiseksi.myshopify.com/

password: 1234

1 Like
4

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.

debutifytechsup_1-1676898316986.png
debutifytechsup_1-1676898316986.png1370×855 49.5 KB

If applied correctly, the price will appear above the add-to-cart button.

debutifytechsup_2-1676898370156.png
debutifytechsup_2-1676898370156.png507×367 14.2 KB

1 Like
5

Hi @Piirretty ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.scss->paste below code at the bottom of the file:

@media screen and (max-width: 1023px) {
    .product-single__meta-info {
        position: relative;
    }
    .product-single__meta-info .price-container-desktop {
        position: absolute;
        bottom: 55px;
    }
    [data-ph-fieldname="Valokuvasi"] {
        margin-top: 0 !important;
    }
    .product-single__add-to-cart {
        margin-top: 25px;
    }
}

I hope it would help you
Best regards,

Richard | PageFly

1 Like