I want to change the placement of my pricing like this image. Can anyone help me with this please?
Topic summary
A user seeks to reposition product pricing below the product name on their Dawn theme store, instead of the default placement.
Initial Solutions Attempted:
- Multiple community members provided CSS code snippets to add to the base.css file
- Early solutions caused display issues: pricing overlapped with product names on mobile devices, especially with longer product titles
- Desktop implementations worked but mobile responsiveness remained problematic
Resolution Process:
- Dan-From-Ryviu offered direct assistance via collaborator code access
- After receiving admin dashboard access (code: 1748), Dan implemented the positioning fix
- Additional spacing adjustments were made between pricing rows and product names using custom CSS targeting the
.price.price--largeclass withmargin-top: 0px !important
Current Status:
- The solution initially worked successfully
- The user reports the pricing has reverted to its previous position
- Requesting either guidance on steps to reapply the fix independently or further assistance to restore the desired layout
1 Like
Hello @Anya281093
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset > base.css and paste this at the top of the file:
.custom_regular_price_setup {
right: auto;
margin-top: 21px!important;
}
Thank you, can you help to guide me a way to adjust the spacing between price and product name as well?
Hello @Anya281093
Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file and save.
.custom_regular_price_setup {
position: absolute;
top: 28px !important;
right: 56rem !important;
}
.td-short-desc {
margin-top: 3rem !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Thank you, on mobile with long name product, the display will be overlapped like this. Can you please help me to fix it?
Hi @Anya281093
In Dawn theme Online store > Themes > Customize > Products > Default product, you can drag and drop Price above Title after remove customized CSS code you added before to move price to the current place.
Hi, thank you for your solution. I tried your code and it worked find on desktop, but on mobile the price is missing and the product name width is not 100%. Please help me with this.
Hi @Dan-From-Ryviu , thank you for your reply. Can I ask your favor to go in the admin dashboard and help me with this? I’ll send you the collaborator code.
1 Like
Give me your collab code
1 Like
1748 @Dan-From-Ryviu
Request sent!
1 Like
Request accepted, please check 
@Dan-From-Ryviu
1 Like
Please check now.
Hi @Dan-From-Ryviu Thank you for your support, the pricing is not the position I wanted. Can you help to bring it under the Product name? ("Cube silver…)
1 Like
Did it, please reload and check again now.
1 Like
Thank you! @Dan-From-Ryviu you are such a life savior. One more minor favor, can you guide me steps to change the spacing between pricing rows and product name? I’ll change it
Please add this code at the bottom of base.css file
.price.price--large { margin-top: 0px !important; }
1 Like
Thank you a lot! Wouldn’t know what will happen without your help!
Happy I could help. Have a good day ahead!
Hi @Dan-From-Ryviu sorry to bother you again, it seems that the pricing is back to its previous place. Can you please help me to bring it down to the next line? Or you can guide me the steps, I’ll do it.