Add a Custom Component to a Page that Uses the Super Template

You can make custom components available for use in a Super Template. You do this by defining your custom component in your theme’s views/utilities/_custom_components.html file, the contents of which looks like this:

{% case slot.custom %}
  {% when 'custom-example' %}{% render "components/custom/custom-example" slot: slot %}
  {% else %}ERROR: Unsupported custom component '{{ slot.custom }}'
{% endcase %}

All you need to do is include your custom component in this file. For example, let’s say have a custom partial in your views/components/custom folder called _my-custom-partial.html. The code in your views/utilities/_custom_components.html file should look like this:

{% case slot.custom %}
  {% when 'my-custom-partial' %}{% render "components/custom/my-custom-partial" slot: slot %}
  {% else %}ERROR: Unsupported custom component '{{ slot.custom }}'
{% endcase %}

Once you’ve saved this file, pushed it to your theme, and synced it with CleanSlate, you can now use it in a slot in the Super Template. Here’s how you do it:

1. For the page you wish to include your custom partial, make sure the Super Template is assigned as that page’s template in the page properties.
2. Navigate to the Slots tab in the page properties.
3. In the slot you want to insert your new component, enter the name of the component in the “If custom, name of partial:” field. For example, using the example above you would enter “my-custom-partial.”
4. Click “Save.”

Your new component should now appear on your page in the designated slot.