Request for improvements: Liquid `slot` tag to render contents in predefined places
Nobody has claimed this yet.
- Dominant language
- Ruby
- Stars
- 11.9k
- Forks
- 1.5k
- Avg merge
- 17h 55m
- Merged PRs (30d)
- 3
Description
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>
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
The issue provides Liquid syntax examples for a proposed slot tag, but names no implementation files, tests, or entry points. Start by reviewing the requested syntax and its placement examples; completion would require an agreed design for slot rendering before implementation and tests can be identified.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- ruby
- Domain
- web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100