Contextual Sections Guide

Contextual Sections are sections only displayed under certain circumstances

Written By Guilherme de Andrade Arantes (Administrator)

Updated at May 20th, 2020

It is possible to hide or show different parts of your template according to the current page being accessed using Liquid Tags. You can create Contextual Sections within any template file; for instance, to create a Contact Us Section on the Main Layout, you can use something similar to this code:

{% if on_show_question_page %}
  <!-- content for question page -->
{% elsif on_index_page %}
  <!-- content for index page -->
{% elsif on_contact_us_page %}
  <!-- content for contact page -->
{% elsif category != null %}
  <!-- content for category page -->
{% else %}
  <!-- content for thanks page -->
{% endif %}

Here is a complete example on how to create a custom navigation section only on the Index Page:

{% if on_index_page %}
  <ul id="navigation">
    {% for categories on roots_categories %}
      <li><a href="{{ categories.url }}">{{ }}</a></li>
    {% endfor %}
{% endif %}

One another example is to list the Top Questions:

{% if on_index_page or on_question_page %}
  <ul id="top_questions">
    {% for questions in top_questions | limit: 5 %}
        <a href="{{ questions.url }}">{{ }}</a>
        <p>{{ questions.description }}</p>
    {% endfor %}
{% endif %}

Check the Shopify/Liquid Documentation to ‍view the complete list of Liquid Objects and Syntax and the Standard Sections‍ to view the Standard Sections references.

Was this article helpful?