Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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:
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.
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
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.
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 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
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?
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
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!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thankyou! this works! But is there a way to align the title and price on the same height?
Example:
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
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thankyou! This is it. Works amazing!
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.
Learn what's possible with customizing Shopify Checkout beyond what's available out of...
By Shopify Feb 19, 20252m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025