Hi there,
I am looking to achieve this header layout with code/without code.
I have the custom font, but would like it exactly like this, including the cart etc.
inspo site: https://troyesivanuk.store/
Topic summary
Goal: Replicate an inspiration site’s header in Shopify’s Dawn theme (custom font, cart layout, full-width look) and use full site width.
Actions taken:
- Set Header > Desktop position to “Middle left.”
- Shared preview URL and password for targeted help.
- Added Custom CSS in Theme settings to: make the header full width (max-width: 100%), use a 3-column grid (1fr auto 1fr), hide cart/account SVGs, and show text labels “ACCOUNT” and “CART,” with spacing tweaks.
- Another suggestion referenced adding code in theme.liquid, but the actual snippet wasn’t visible in the thread.
Results so far:
- OP confirms the header changes worked.
- Remaining requests: make the site title the same size as the menu, and replace the search with a £ (currency) selector.
Latest guidance:
- To enable currency, turn on “Enable country/region selector” in Header settings.
Open items / status:
- Title typography sizing to match the menu remains unresolved; no code provided yet.
- Full site width beyond just the header is unclear; only header width was adjusted.
Notes:
- Screenshots and CSS code are central to understanding the changes.
I forgot to say I am using the Dawn template
Hi @jb9998
Please change header settings > Desktop position > Middle left, and then let me know your store URL so I can give you code to change other things.
Hi @jb9998 ,
- Go to Online Store → Theme → Edit code.
- Open your theme.liquid file
- In theme.liquid, paste the below code before
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Also if you could help with the overall website border size… i’m attempting to recreate this site to learn. i want to use the full site width like this example site. Thanks!
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (min-width: 990px) {
.header.page-width {
max-width: 100% !important;
grid-template-columns: 1fr auto 1fr !important;
}
.header__icon--cart svg,
.header__icon--account svg {
display: none ! important;
}
a.header__icon--account:after,
#cart-icon-bubble:after {
position: absolute;
}
a.header__icon--account {
margin-left: 16px;
margin-right: 24px;
}
a.header__icon--account:after {
content: 'ACCOUNT';
}
#cart-icon-bubble:after {
content: 'CART';
}
}
Thanks so much! This seems to have worked
Only thing is, the title of site needs to be same size as menu too, and I will need the £ section instead of search could you help with that?
Then that’s one challenge resolved! appreciate your help!
Hi @jb9998
Please precheck the ‘Enable country/region selector’ option in the Header to enable currency
