Align price next to product tile

[loubacc]

Hey guys, how would I be able to align the price next to the product title on the product page? It needs to be for mobile only.

Here's an example:

[BSSCommerce-HDL]

Hi @loubacc, Can you kindly share your store link (with the password protected, if any) with us? We will check it and suggest you a solution if possible.

[loubacc]

Hello! The link is trevillo.com. There is no password on it. Just 1 product where I want the price next to the title on the product page.

[BSSCommerce-HDL]

Hi @loubacc, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
span.price-item.price-item--regular {
    position: absolute !important;
    top: 15px;
    right: 0px;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSS-TekLabs]

Hi @loubacc,

Could you kindly provide us with your store URL and, if applicable, the password, so that our team can offer you the necessary support?

[BSS-TekLabs]

Hi @loubacc,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (max-width: 749px) {
    .product__info-container {
        position: relative;    
    }
    
    .price__container span.price-item {
        position: absolute;
        top: 15px;
        right: 0;
    }

    .product__tax.caption {
        position: absolute;
        top: 55px;
        right: 0;
    }

    .price.price--large.price--show-badge {
        height: 0;
    }
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[loubacc]

Thankyou! this works! But is there a way to align the title and price on the same height?

Example:

[BSS-TekLabs]

Hi @loubacc,

You replace the code snippet earlier with this code

@media screen and (max-width: 749px) {
    .product__info-container {
        position: relative;    
    }
    
    .price__container span.price-item {
        position: absolute;
        /* You can adjust this value to your preference */
        top: 13px;
        right: 0;
    }

    .product__tax.caption {
        position: absolute;
        top: 55px;
        right: 0;
    }

    .price.price--large.price--show-badge {
        height: 0;
    }
}

Here is the result

[loubacc]

Thankyou! This is it. Works amazing!

[loubacc]

I'm sorry, just noticed that the prices now also show on the collection/homepage in the product picture itself. This is not supposed to be like this.