How can I alter the price position in the Sense theme?

Store Design
, ,

Topic summary

A user wants to reposition the product price directly under the title in the Shopify Sense theme.

Initial Solutions Offered:

  • First suggestion: Use the theme customizer (Customize > Product > Price > Move position)
  • Alternative CSS approach: Add positioning code to the theme’s CSS file (theme.scss.liquid, styles.scss.liquid, or base.css)

Issue Encountered:

  • The CSS solution (position: absolute; top: 135px;) worked initially
  • User adjusted to top: 575px; for mobile, but this broke the desktop layout

Final Solution:

  • Implement a media query to separate mobile and desktop styling
  • Use @media only screen and (max-width: 749px) for mobile-specific positioning
  • Keep the original desktop CSS unchanged and add the mobile-specific code separately

The discussion provides both a no-code solution via theme settings and a CSS-based approach with responsive design considerations.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
1

Hello,

i wondered how I can change the price position so that it’s directly under the title.

my productpage is https://www.fluffyfruits.de/plueschtier

1 Like
2

Hi @cinamon123 ,

I understamnd that you want to change the price position so that it’s directly under the title.

You can change the position in the CUSTOMIZE.

Go to your theme > product > price > move position. (check image below) > save.

Ribe_Dagandara_0-1685955958510.png
Ribe_Dagandara_0-1685955958510.png635×326 29.3 KB

If this wot work. Try the code instead.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid, styles.scss.liquid or base.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.price.price--large.price--on-sale.price--show-badge {
    position: absolute;
    top: 135px;
}
div#automizely_reviews_product_detail_title_star_widget {
    margin-top: 30px;
}
1 Like
3

It did work. I did put top: 575px; to adjust for mobile version, but my desktop version is now screwed. Is there a possibility to get it on Desktop and mobile seperated?

Thanks

1 Like
4

Yes you can you need to add the media query.

@media only screen and (max-width: 749px){
.price.price--large.price--on-sale.price--show-badge {
    position: absolute;
    top: 575px;
}
}

Add this one instead and dont change the 1st one that I give because that is for desktop.

I hope it help.