Shopify themes offer a large amount of section types you can add to the homepage of your website. Each section holds a number of blocks that represent the actual content on the page.
Let`s take the hero banner/slider as an example. Almost all of the themes feature this section. To use it you select the section from the list, add it to the site and then you add blocks. Each block represents a slide/banner and each of these blocks has some settings like image, title, subtitle, link, buttons and so on.
But what if you want to feature the same banner/slider on a different page like your contact page? Well you can`t; at least not by default, but you will now learn how to make this work.
The following steps require some technical knowledge and you should be used to working with Shopify`s code editor and liquid language.
We will use a rich text section for this example, just to keep it simple. I have created a section called "RTE example" that holds one type of block: richtext. Placed on the homepage it works like any other section. Add blocks and the content shows up on the page:
The code looks like this:
{% if section.blocks.size > 0 %}
<div class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="rte text-center">
{% for block in section.blocks %}
<div>
<p>{{ block.settings.richtext }}</p>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
{% schema %}
{
"settings": [],
"blocks": [
{
"type": "richtext",
"name": "Test block",
"settings": [
{
"type": "richtext",
"id": "richtext",
"label": "Featured text"
}
]
}
],
"presets": [{
"name": "RTE example",
"category": "tests"
}]
}
{% endschema %}
In order to add the same section on a normal page, like the contact page, we need to include this section inside that template. Usually each theme has a template file for the contact page called "page.contact.liquid" under the templates folder. That is the one I am using. However you can create a new template for each resource type ( page, collection, product...).
To place the section inside the template:
- Log into your shopify store
- Go to Online Store > Themes > Actions > Edit Code
- Scroll down to the Templates folder
- Open the desired template or create a new one for the page you need to use the section
- Inside the template file, choose the right position where you would like the section to be rendered
- Insert the section: {% section "SECTION_NAME" %}
Now if you choose to customize your theme and navigate to the page template you just altered, you will notice the section.
In some cases by doing this workaround, the same contents of a section may be automatically rendered on each template. To fix this you need to create an identical section for each usage. Taking my example: "rich-text-example_contact.liquid" for the contact page and "rich-text-example_product.liquid" for the product page.
Also the HTML code can be moved in a snippet to keep the code cleaner and easier to maintain.
The above example used a simple rich text section with only one type of block and no settings. However if you do find yourself in a more complicated situation and the above guide does not work for you, feel free to leave a comment and I will make a complete guide that will also cover your particular case.