How can I shift the product price to the top right on mobile?

Store Design
, ,

Topic summary

A user seeks to reposition the product price to the top right corner on mobile devices only for their Shopify store.

Current Issue:

  • The price currently displays in its default location on mobile product pages
  • User wants this change to apply exclusively to mobile view

Proposed Solution:
A respondent provided CSS code to be added to the theme.css file:

  • Navigate to: Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Locate the theme.css file under Assets
  • Add custom CSS using a media query targeting screens with minimum width of 767px
  • The code uses absolute positioning to move the .product-block .product-block--price element to the top right

Status:
One commenter noted the site link appears broken or inaccessible. The discussion remains open with no confirmation whether the CSS solution was implemented or resolved the issue.

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

Hi,

im looking to move the product price to the top right on mobile only . my site is https://luxurymrkt.com/collections/y-3/products/y-3-classic-cotton-t-shirt

like this picture :down_arrow:

BBD43FBD-B7F8-49F4-8AEA-53D8B1FBE4FC.png
BBD43FBD-B7F8-49F4-8AEA-53D8B1FBE4FC.png1170×2532 232 KB

0F420D14-2858-4AE0-B558-70BB9A8F1F9A.jpeg
0F420D14-2858-4AE0-B558-70BB9A8F1F9A.jpeg1170×2532 138 KB

1 Like
2

@Luxurymrkt

oh sorry your site doesn’t work

KetanKumar_0-1674379009845.png
KetanKumar_0-1674379009845.png1898×942 22.3 KB

3

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media screen and (min-width: 767px){
	.product-block.product-block--price {
	    position: absolute;
	    top: 26px;
	    right: 0;
	}
}

ZestardTech_0-1674458886642.png
ZestardTech_0-1674458886642.png731×863 81.9 KB