Want to move the 'SOLD OUT' button on the products page

Store Design
,

Topic summary

A user wants to reposition the ‘SOLD OUT’ button on their product pages to appear lower and display as plain text rather than a button, as shown in an attached screenshot. They’re using the Dawn theme and also need help preventing their header logo from disappearing during site-wide scrolling.

Solutions Proposed:

  • PageFly-Richard provided CSS code to be added to theme.liquid above the </head> tag, which successfully moved the element out of its box but positioned it too low.

  • Sandy from Restock Rocket suggested creating separate desktop and mobile CSS implementations for optimal display across devices. They offered to share a code snippet and noted they couldn’t see the logo disappearing issue when reviewing the store.

Current Status:
The discussion remains open as the user seeks refinement of the positioning to match their screenshot exactly and resolution of the scrolling logo issue.

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

I want to be able to to move the sold out button down as pictured, but just have it as text

Capture 3.jpg
Capture 3.jpg398×742 31.2 KB

I also want to make the header logo disappear when I scroll (sitewide) I’m using the Dawn theme btw.

website link: https://9g99ww8igezgur08-74826613002.shopifypreview.com

2

Hi @rene94

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1716354037001.png
PageFlyRichard_0-1716354037001.png1334×953 206 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

Thank you it’s moved out the box but its too low (https://3jbmrn9twv4k96fu-74826613002.shopifypreview.com) I want it to be exactly like the screenshot you sent and can you help with disappearing my logo when scrolling site wide please?

4

Hey @rene94 ! Sandesh here from Restock Rocket.

To move it below, you’ll need to add some quick code to your store. I think it’d be best to handle it for desktop and mobile separately so that it looks great on both!

  1. Go to Online Stores > Customize > Edit Theme Code
  2. Look for theme.liquid file
  3. Add this code above in the file.

I took a look at your store and couldn’t see the logo on scroll, so it looks like you have that sorted out? If you don’t though, let me know and I’ll be happy to share a code snippet to help with that too!