I’m trying to find where in the Theme code I can change the background color of the part of the screen above the store logo, which part is only visible in the more recent iPhone models without the classic bezel.
I’ve attached a screenshot below to illustrate what I mean; there is a grey bar (encircled in green) on top of the screen above the store logo, which color should simply match the background color of the homepage. I can’t figure out where in the Theme code this can be modified.
This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Layout->/theme.liquid->paste below code in here:
Based on the screenshot you provided, it appears that you are using the Debut theme. To change the background color of the part of the screen above the store logo, you can follow these steps:
From your Shopify admin, go to “Online Store” > “Themes”.
Click on “Actions” > “Edit code” for the Debut theme.
In the left sidebar, navigate to “Assets” and click on “theme.scss.liquid”.
Scroll to the bottom of the file and add the following code:
Replace “your-color-here” with the hex code or name of the color you want to use.
Save your changes and preview your website to see the updated background color above the store logo.
Note that if you want to change the background color of the header area on other devices as well, you may need to add additional code to target those specific devices. You can use media queries to target different screen sizes and adjust the styles accordingly.
Thank you for the suggestion. I’ve tried this (with the added hex clolor code, in casu #FFFFFF), but unfortunately the issue persists. The background color above the store logo in mobile remains the same.
