Shopify
Request for improvements: Liquid `slot` tag to render contents in predefined places
Other platforms and frameworks have the ability to place code within a placeholder element somewhere else on the theme.
October CMS does this using {% placeholder xyz %}, Astro does this using <slot name="xyz" />.
It makes sense for Shopify to allow this due to the hugely dynamic nature of sections and blocks.
Right now, to include dynamic styles on a section, I need to write them within the section file, which means the style and script definitions are littered everywhere.
A Liquid slot tag would allow developers to better optimise their themes by allowing specific blocks of code to go in specific areas.
Examples
Styles
slider.liquid
{%- if section.blocks.size > 0 %}
{{ 'slider.css' | asset_url | preload_tag: as: 'style', slot: 'head_preloads' }}
<section class="shopify-section" id="shopify-section-slider">
{% slot head_styles %}
<style>
.slide {
background-color: {{ section.settings.slide_background_color }};
}
</style>
{% endslot %}
</section>
{%- endif -%}
<head>
... head things
{{ slots.head_preloads }}
{{ slots.head_styles }}
</head>
Hi !
Slot is a long needed feature in Liquid. I've actually raised the idea back in 2022 (#1530) and actually for even longer in a old private GitHub repo targetted at theme partners.
Now that theme blocks have landed, this gave me some more ideas for syntax. Snippets are now nearly equivalent to theme blocks, so I think it would make sense to extend snippets to give them some unique power, slot being the perfect use case.
As @isaacbowen , I think the correct syntax would be to use content_for to align that with theme blocks:
Usage:
{% render 'drawer' %}
{% slot 'header' %}
<h1>Foo</h1>
{% endslot %}
{% slot 'content' %}
<p>Bar</p>
{% endslot %}
{% endrender %}
drawer.liquid:
<div class="drawer">
{% capture header %}{% content_for 'slot', name: 'header' %}{% endcapture %}
{% if header != blank %}
<div class="drawer__header">
{{ header }}
{% endif %}
<div class="drawer__body">
{% content_for 'slot', name: 'content' %}
</div>
</div>
This make the whole thing consistent with how theme block and static theme blocks work.
There are a few open questions:
Default slots
Shadow DOM for instance allows a default slot. I think that for simplicity and to prevent introducing too much surface syntax, we should limit to named slots only.
Syntax for checking if empty
In this example I have captured the slot content to output conditionally the header. This avoids creating another syntax, while still allowing to do it with an extra capture.
