atmos

@atmos Awesome! I just checked; it's working correctly. 

@atmos For Cart page, try this code only change (body[class*="type-products"].view-item  to  #cart)
#cart header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } #cart header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } #cart header#header .header-announcement-bar-wrapper { height: 100% !important; } #cart header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 49px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } #cart header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } #cart header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } #cart header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { #cart header#header .sqs-announcement-bar { height: 100px !important; } #cart header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 100px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } #cart header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } }  

@atmos Now it'll work I promise 🙂. Please add this updated code:
body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 49px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(~'100% - 100px') !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar.sqs-announcement-bar-hidden) .header-announcement-bar-wrapper { height: 100% !important; padding-top: 0 !important; padding-bottom: 0 !important; } }  

@atmos Now everything is working correctly. 

I just modified one thing in the code. Can you add this updated code? 
body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 49px !important; min-height: unset !important; } body[class*="type-products"].view-item header#header .sqs-announcement-bar-dropzone { min-height: unset !important; } body[class*="type-products"].view-item header#header .header-announcement-bar-wrapper { height: 100% !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(100% - 49px) !important; padding-top: 0 !important; padding-bottom: 0 !important; } body[class*="type-products"].view-item header#header .header-dropshadow { height: 100%; background: #000 !important; opacity: 0.75 !important; } body[class*="type-products"].view-item header#header .header-inner { align-items: flex-start !important; height: 100% !important; } /* Mobile styles */ @media screen and (max-width: 767px) { body[class*="type-products"].view-item header#header .sqs-announcement-bar { height: 100px !important; } body[class*="type-products"].view-item header#header:has(.sqs-announcement-bar) .header-announcement-bar-wrapper { height: calc(100% - 100px) !important; } }  

@atmos Hi! Add this under Custom CSS to add a background image to fill the header across all product pages. Code will also transform all the navigation items to white:
body[class*="type-products"].view-item header#header { background-image: url("replace-with-your-image-url"); background-size: cover; background-position: center center; background-repeat: no-repeat; height: 50vh; } body[class*="type-products"].view-item header#header { .header-nav-item * { color: white; } :not(.header--menu-open) .header-actions .icon--fill svg { fill: white !important; } span.sqs-cart-quantity { color: white; } a.btn { background: white; color: black; } .burger-inner>div { background-color: white !important; } } @media only screen (max-width: 1024px) { body[class*="type-products"].view-item header#header .header--menu-open .header-menu { padding-top: 170px !important; } }  

@atmos Hi! To rearrange the order on product pages, you can add this code in Website > Pages > Website Tools > Custom CSS.
.ProductItem-details .ProductItem-details-checkout { display: flex !important; } ProductItem-details .ProductItem-product-price { order: 1 !important; } .ProductItem-details .product-variants { order: 2 !important; } .ProductItem-details .ProductItem-quantity-add-to-cart { order: 3 !important; } .ProductItem-details .ProductItem-details-excerpt-below-price { order: 4 !important; }