I would like to make the header logo on the Dawn theme landing page larger than the maximum size available in the standard template (I’d like my logo to be very oversized). Can anyone help me out with some custom code? thankyou!
Topic summary
Goal: Make the Dawn theme’s header logo larger than the built-in maximum on the landing page.
Two approaches offered:
- Expand the theme setting range: Edit Config > settings_schema.json to increase the logo width control limits. Example range: min 500, max 2000, default 1000 (px). This lets you choose a larger logo size in the Theme Editor. Ensure the default value sits within the min–max range.
- Add a CSS override: In assets/base.css, append a desktop-only rule to widen the logo wrapper. Example:
@media screen and (min-width: 990px) { .header__heading-logo-wrapper { width: 420px !important; max-width: 100% !important; } }
Increase 420 to make the logo larger.
Notes:
- Both solutions require editing theme code (Theme > Edit code). Images provided illustrate locations and results; the code snippets are central.
- No conflicting opinions; both methods aim to bypass the default cap (settings-based vs. CSS override).
- Outcome: No confirmation from the original poster; the thread remains open without a marked solution.
1 Like
Hi @0scar ,
You can adjust the default logo width by editing the code.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Config” folder, click on “settings_schema.json” file
Look for the code highlighted in the image below and edit the code.
Adjust the min and max. Make sure your default is within the min and max
Example code below.
{
"type": "range",
"id": "logo_width",
"min": 500,
"max": 2000,
"step": 10,
"default": 1000,
"unit": "px",
"label": "t:settings_schema.logo.settings.logo_width.label"
},
If this fixed your issue, please Likes and Accept as Solution. Thank you
- Here is the solution for you
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
@media screen and (min-width: 990px) {
.header__heading-logo-wrapper {
width: 420px !important;
max-width: 100% !important;
}
}
-
If you want it to be larger, increase 420 to a bigger number, and vice versa.
-
Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.