# Top 15 Ingredients Sections for Shopify (Updated Oct 2026) > Compare 15 free ingredients sections for Shopify across 14 themes: 15 ship as Liquid, 1 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026. Page: https://blocko.ai/section/ingredients/ MCP: https://blocko.ai/mcp License: MIT. Not affiliated with Shopify. ## Items 1. [Sea botanical spotlight](https://blocko.ai/library/tide/sections/tide-botanical/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 0 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/tide/sections/ingredients--tide-botanical.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Sea botanical spotlight" (id `tide-botanical`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/ingredients--tide-botanical.html; Shopify bundle: sections/tide/tide-botanical/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 2. [Ingredient glossary](https://blocko.ai/library/balm/sections/beauty-extras-ingredient-glossary/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/balm/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/balm/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 3. [Ingredient glossary](https://blocko.ai/library/bare/sections/beauty-extras-ingredient-glossary/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/bare/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/bare/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 4. [Ingredient glossary](https://blocko.ai/library/blush/sections/beauty-extras-ingredient-glossary/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/blush/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/blush/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 5. [Ingredient glossary](https://blocko.ai/library/clip/sections/beauty-extras-ingredient-glossary/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/clip/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/clip/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 6. [Ingredient glossary](https://blocko.ai/library/dew/sections/beauty-extras-ingredient-glossary/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/dew/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/dew/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 7. [Ingredient glossary](https://blocko.ai/library/isle/sections/beauty-extras-ingredient-glossary/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/isle/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/isle/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 8. [Ingredient glossary](https://blocko.ai/library/lather/sections/beauty-extras-ingredient-glossary/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/lather/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/lather/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 9. [Ingredient glossary](https://blocko.ai/library/prism/sections/beauty-extras-ingredient-glossary/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/prism/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/prism/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 10. [Ingredient glossary](https://blocko.ai/library/shelf/sections/beauty-extras-ingredient-glossary/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/shelf/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/shelf/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 11. [Ingredient glossary](https://blocko.ai/library/stubble/sections/beauty-extras-ingredient-glossary/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/stubble/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/stubble/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 12. [Ingredient glossary](https://blocko.ai/library/tide/sections/beauty-extras-ingredient-glossary/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/tide/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/tide/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 13. [Ingredient glossary](https://blocko.ai/library/tint/sections/beauty-extras-ingredient-glossary/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/tint/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/tint/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 14. [Ingredient glossary](https://blocko.ai/library/twist/sections/beauty-extras-ingredient-glossary/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/twist/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/twist/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). 15. [Ingredient glossary](https://blocko.ai/library/veil/sections/beauty-extras-ingredient-glossary/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 9.4 KB; category: ingredients - Live demo: https://demo.blocko.ai/html/veil/sections/ingredients--beauty-extras-ingredient-glossary.html - Prompt: Use the Blocko library (https://github.com/blockoai/blocko, or the Claude Code plugin: claude plugin marketplace add blockoai/blocko && claude plugin install blocko-sections@blocko) to implement the section "Ingredient glossary" (id `beauty-extras-ingredient-glossary`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/ingredients--beauty-extras-ingredient-glossary.html; Shopify bundle: sections/veil/beauty-extras-ingredient-glossary/ in the repo) into my project. Before changing any code, ask me where it should go — which project/theme, which page or template, and the position (e.g. after the hero) — and whether the target is a Shopify theme or a plain HTML site, unless I already said; restate the plan and wait for my OK. Then follow the repo's AGENTS.md: keep the blko- class prefix and CSS tokens (with fallbacks), keep custom elements idempotent, don't touch unrelated code, run `shopify theme check` for Shopify targets, and finish by telling me how to add/arrange it (Theme Editor steps for Shopify). ## FAQ ### What are the best ingredients sections for Shopify? Blocko lists 15 free, MIT-licensed ingredients sections from 14 themes. 15 of them ship as Shopify Liquid today and the rest are complete HTML demos. The list is ranked with Liquid-ready items first, then by the least JavaScript, so Sea botanical spotlight from Tide comes first. ### Are these ingredients sections free to use? Yes. Every item is MIT licensed, free to copy and edit, and needs no app or subscription. Blocko is not affiliated with Shopify. ### How do I add one of these ingredients sections to my Shopify store? Open an item, copy its one-line prompt into your coding agent, or connect the Blocko MCP server at https://blocko.ai/mcp. The agent asks where the section should go before it changes any code. ### Which industries do these ingredients sections cover? Beauty. Every industry with at least three matching items has its own list. ### How much JavaScript do these ingredients sections ship? 1 of 15 ship 0 KB of JavaScript. The heaviest is Ingredient glossary in Balm at 9.4 KB, registered as an idempotent Custom Element.