A Shopify store owner seeks help with three landing page customizations:
Main requests:
Remove header section and relocate its elements (logo, navigation) into the video banner block below
Change header elements to white (#ffffff) on the landing page only
Lock clock position to prevent it from moving during scrolling
Solutions offered:
Use CSS targeting .template-index to apply white color only to the homepage
Apply position: fixed with appropriate z-index to lock the clock in place
Use Liquid’s {% if route.root_url %} conditional to scope changes to the landing page
Key considerations:
Moving headers below other sections is complex and may cause cart notification or scroll issues
Accessibility and contrast concerns should be addressed
Direct theme file editing required (index.liquid or theme.liquid)
Current status: The original poster has shared their site URL (andresatelier.dk) and expressed preference for professional assistance with the code modifications. Multiple community members have offered to help implement the changes.
Summarized with AI on October 26.
AI used: claude-sonnet-4-5-20250929.
I need some assistance with customizing my Shopify landing page:
Remove the header – I’d like to completely remove the header section and move its elements (e.g., logo, navigation) down to the block just below, which is a video banner.
Change header elements to white (landing page only) – The elements being moved should have their color changed to pure white (#ffffff), but this change should only apply to the landing page.
Fix clock position – There’s a digital clock on the front page that moves upwards when scrolling. I’d like to lock it in a fixed position so it remains visible at all times.
You can definitely achieve all three customizations with a bit of theme editing:
Remove the header – This requires modifying your theme’s index.liquid or theme.liquid file. You’ll need to either hide the header section using {% if template != 'index' %} logic or remove it entirely from the landing page and reinsert the elements (like logo and nav) into the section directly under the video banner.
Change header elements to white on landing page only – You can target the homepage with CSS using:
.template-index .site-header a {
color: #ffffff !important;
}
This ensures it only affects the landing page.
Fix clock position – If the clock is a custom app/embed, you can use CSS like:
Just be sure to replace #clock-id with the actual selector used for the clock.
If you’re not comfortable editing theme files directly or want it done quickly without risking layout issues, I help Shopify store owners with custom tweaks like this all the time. Feel free to let me or I can take a quick look and handle it for you.
That is an advanced theme customization because headers in themes aren’t made to be reorderable like other sections, or really to be put UNDER other large sections and can cause issue ; like any cart notifications being off page or creating scroll problems.
Also be very cautious about creating contrast issues or outright accessibility issues.
For services to get it done right then reach out by PM or request that I PM you.
For the landing page only customizations you’ll want to use a custom-html, or custom-liquid section and wrap the styles in a route root_url check
{% if route.root_url %}
{% comment %} your custom styles for index page only {% endcomment %}
{% endif %}
