How do I hide my Shopify store's header and footer
The Locksmith can be used to lock most resources in your store, preventing their content from appearing between the header and footer of the site. However, Locksmith doesn't have a built in way to lock or hide the header and footer in your theme.
It's worth noting that some locks have an option that can be used to conditionally hide specific menu navigation links for locked resources. More on that in our guide below:
Hiding navigation links for locked resourcesCustom options
The intent here is to illustrate that conditionally hiding the site's header and footer can be set up with some custom Liquid.
In general, this can be straightforward to set up, if you have a little experience with Liquid and editing your theme's code. Alternatively, a developer or theme designer should be able to help with this.
Examples of the header section being conditionally hidden
The header and footer section groups are typically located in the theme.liquid layout file in Shopify 2.0 themes. A Liquid condition can be set up to show or hide these sections based on a Liquid attribute, such as a customer being signed into a store account, or a customer viewing products from a specific collection.
Hiding the header unless a customer is signed in
{% if customer %}
{% sections 'header-group' %}
{% endif %}
Hiding the header unless a customer's account has a specific customer tag
{% if customer.tags contains "example-tag" %}
{% sections 'header-group' %}
{% endif %}
Hiding the header using some of Locksmith's manual code
Locksmith has "manual code" that can sometimes be used to hide the store's header and footer. The code used in this example will interact with all locks in your store. You may need to consider using some additional Liquid to limit this section hiding to specific locked resources if needed.
The following code can be added to the top of the theme.liquid layout file to include Locksmith's variables that will support the function of Locksmith's manual code:
{% capture var %}{% render 'locksmith-variables', variable: 'access_granted', scope: 'subject', subject: product %}{% endcapture %}{% if var == 'true' %}{% assign locksmith_access_granted = true %}{% else %}{% assign locksmith_access_granted = false %}{% endif %}
The {% sections 'header-group' %}
can be wrapped in Locksmith's manual code to show the header, if the resource that's currently being viewed isn't locked:
{% if locksmith_access_granted %}
{% sections 'header-group' %}
{% endif %}
We have some more information on Locksmith's manual code in the guide here:
🛠️Manual modeLocksmith's automated section hiding
Locksmith has a new experimental feature that can automatically hide sections, blocks, and snippets in Shopify 2.0 themes.
You can find our guide to using this feature at the link below:
How to hide theme sections, blocks, and snippetsIn some themes, this can be used to hide the header and footer sections. To set this up:
Navigate to the Theme tab in Locksmith, and click the Edit theme hiding profile button for the theme you’d like to configure.
Click the Add new definition button at the bottom of the page. In the Name of section, block, or snippet field, search for header.
From the dropdown results, select the theme’s section file for the header, then click Add.
Repeat steps 2 and 3 for the footer.
In the Liquid variable field for each definition, enter "item".
When you’re done, click the Save button at the top of the page.
Need something custom set up for your store?
There's a Shopify directory here if you're looking to hire someone to help with something like this: https://www.shopify.com/partners/directory
Something else not covered here?
Let us know by emailing us at: [email protected]
Last updated
Was this helpful?