# Top 58 Product Page Sections for Shopify (Updated Oct 2026) > Compare 58 free product page sections for Shopify across 15 themes: 56 ship as Liquid, 0 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026. Page: https://blocko.ai/section/product-page/ MCP: https://blocko.ai/mcp License: MIT. Not affiliated with Shopify. ## Items 1. [Botanical Radiance Serum product](https://blocko.ai/library/balm/sections/main-product-skin-tint/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/balm/sections/main-product--main-product-skin-tint.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 "Botanical Radiance Serum product" (id `main-product-skin-tint`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/balm/main-product-skin-tint/ 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. [Eye treatment product](https://blocko.ai/library/balm/sections/main-product-eye-cream/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/balm/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/balm/main-product-eye-cream/ 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. [Routine set product](https://blocko.ai/library/balm/sections/main-product-bundle/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/balm/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/main-product--main-product-bundle.html; Shopify bundle: sections/balm/main-product-bundle/ 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. [Eye treatment product](https://blocko.ai/library/bare/sections/main-product-eye-cream/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/bare/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/bare/main-product-eye-cream/ 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. [Routine set product](https://blocko.ai/library/bare/sections/main-product-bundle/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/bare/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/main-product--main-product-bundle.html; Shopify bundle: sections/bare/main-product-bundle/ 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. [Sheer skin tint product](https://blocko.ai/library/bare/sections/main-product-skin-tint/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/bare/sections/main-product--main-product-skin-tint.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 "Sheer skin tint product" (id `main-product-skin-tint`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/bare/main-product-skin-tint/ 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. [Everyday set product](https://blocko.ai/library/blush/sections/main-product-bundle/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/blush/sections/main-product--main-product-bundle.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 "Everyday set product" (id `main-product-bundle`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/main-product--main-product-bundle.html; Shopify bundle: sections/blush/main-product-bundle/ 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. [Eye treatment product](https://blocko.ai/library/blush/sections/main-product-eye-cream/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/blush/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/blush/main-product-eye-cream/ 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. [Skin tint product](https://blocko.ai/library/blush/sections/main-product-skin-tint/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/blush/sections/main-product--main-product-skin-tint.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 "Skin tint product" (id `main-product-skin-tint`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/blush/main-product-skin-tint/ 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. [Big claw clip product](https://blocko.ai/library/clip/sections/main-product-skin-tint/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/clip/sections/main-product--main-product-skin-tint.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 "Big claw clip product" (id `main-product-skin-tint`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/clip/main-product-skin-tint/ 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. [Eye treatment product](https://blocko.ai/library/clip/sections/main-product-eye-cream/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/clip/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/clip/main-product-eye-cream/ 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. [Style set product](https://blocko.ai/library/clip/sections/main-product-bundle/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/clip/sections/main-product--main-product-bundle.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 "Style set product" (id `main-product-bundle`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/main-product--main-product-bundle.html; Shopify bundle: sections/clip/main-product-bundle/ 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. [Eye treatment product](https://blocko.ai/library/dew/sections/main-product-eye-cream/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/dew/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/dew/main-product-eye-cream/ 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. [Glow serum product](https://blocko.ai/library/dew/sections/main-product-skin-tint/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/dew/sections/main-product--main-product-skin-tint.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 "Glow serum product" (id `main-product-skin-tint`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/dew/main-product-skin-tint/ 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. [Routine set product](https://blocko.ai/library/dew/sections/main-product-bundle/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/dew/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/main-product--main-product-bundle.html; Shopify bundle: sections/dew/main-product-bundle/ 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). 16. [Body oil product](https://blocko.ai/library/isle/sections/main-product-skin-tint/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/isle/sections/main-product--main-product-skin-tint.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 "Body oil product" (id `main-product-skin-tint`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/isle/main-product-skin-tint/ 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). 17. [Eye treatment product](https://blocko.ai/library/isle/sections/main-product-eye-cream/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/isle/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/isle/main-product-eye-cream/ 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). 18. [Routine set product](https://blocko.ai/library/isle/sections/main-product-bundle/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/isle/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/main-product--main-product-bundle.html; Shopify bundle: sections/isle/main-product-bundle/ 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). 19. [Bar soap product](https://blocko.ai/library/lather/sections/main-product-skin-tint/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/lather/sections/main-product--main-product-skin-tint.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 "Bar soap product" (id `main-product-skin-tint`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/lather/main-product-skin-tint/ 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). 20. [Eye treatment product](https://blocko.ai/library/lather/sections/main-product-eye-cream/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/lather/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/lather/main-product-eye-cream/ 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). 21. [Routine set product](https://blocko.ai/library/lather/sections/main-product-bundle/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/lather/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/main-product--main-product-bundle.html; Shopify bundle: sections/lather/main-product-bundle/ 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). 22. [Color shampoo product](https://blocko.ai/library/prism/sections/main-product-skin-tint/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/prism/sections/main-product--main-product-skin-tint.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 "Color shampoo product" (id `main-product-skin-tint`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/prism/main-product-skin-tint/ 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). 23. [Eye treatment product](https://blocko.ai/library/prism/sections/main-product-eye-cream/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/prism/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/prism/main-product-eye-cream/ 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). 24. [System set product](https://blocko.ai/library/prism/sections/main-product-bundle/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/prism/sections/main-product--main-product-bundle.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 "System set product" (id `main-product-bundle`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/main-product--main-product-bundle.html; Shopify bundle: sections/prism/main-product-bundle/ 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). 25. [Barrier serum product](https://blocko.ai/library/shelf/sections/main-product-skin-tint/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/shelf/sections/main-product--main-product-skin-tint.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 "Barrier serum product" (id `main-product-skin-tint`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/shelf/main-product-skin-tint/ 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). 26. [Concern set product](https://blocko.ai/library/shelf/sections/main-product-bundle/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/shelf/sections/main-product--main-product-bundle.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 "Concern set product" (id `main-product-bundle`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/main-product--main-product-bundle.html; Shopify bundle: sections/shelf/main-product-bundle/ 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). 27. [Eye treatment product](https://blocko.ai/library/shelf/sections/main-product-eye-cream/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/shelf/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/shelf/main-product-eye-cream/ 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). 28. [Eye treatment product](https://blocko.ai/library/stubble/sections/main-product-eye-cream/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/stubble/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/stubble/main-product-eye-cream/ 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). 29. [Routine set product](https://blocko.ai/library/stubble/sections/main-product-bundle/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/stubble/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/main-product--main-product-bundle.html; Shopify bundle: sections/stubble/main-product-bundle/ 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). 30. [Shave gel product](https://blocko.ai/library/stubble/sections/main-product-skin-tint/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/stubble/sections/main-product--main-product-skin-tint.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 "Shave gel product" (id `main-product-skin-tint`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/stubble/main-product-skin-tint/ 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). 31. [Eye treatment product](https://blocko.ai/library/tide/sections/main-product-eye-cream/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tide/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/tide/main-product-eye-cream/ 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). 32. [Routine set product](https://blocko.ai/library/tide/sections/main-product-bundle/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tide/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/main-product--main-product-bundle.html; Shopify bundle: sections/tide/main-product-bundle/ 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). 33. [Sun lotion product](https://blocko.ai/library/tide/sections/main-product-skin-tint/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tide/sections/main-product--main-product-skin-tint.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 "Sun lotion product" (id `main-product-skin-tint`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/tide/main-product-skin-tint/ 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). 34. [Color set product](https://blocko.ai/library/tint/sections/main-product-bundle/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tint/sections/main-product--main-product-bundle.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 "Color set product" (id `main-product-bundle`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/main-product--main-product-bundle.html; Shopify bundle: sections/tint/main-product-bundle/ 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). 35. [Eye treatment product](https://blocko.ai/library/tint/sections/main-product-eye-cream/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tint/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/tint/main-product-eye-cream/ 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). 36. [Glow skin tint product](https://blocko.ai/library/tint/sections/main-product-skin-tint/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tint/sections/main-product--main-product-skin-tint.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 "Glow skin tint product" (id `main-product-skin-tint`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/tint/main-product-skin-tint/ 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). 37. [Eye treatment product](https://blocko.ai/library/twist/sections/main-product-eye-cream/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/twist/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/twist/main-product-eye-cream/ 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). 38. [Routine set product](https://blocko.ai/library/twist/sections/main-product-bundle/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/twist/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/main-product--main-product-bundle.html; Shopify bundle: sections/twist/main-product-bundle/ 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). 39. [Satin pillowcase product](https://blocko.ai/library/twist/sections/main-product-skin-tint/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/twist/sections/main-product--main-product-skin-tint.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 "Satin pillowcase product" (id `main-product-skin-tint`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/twist/main-product-skin-tint/ 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). 40. [Eye treatment product](https://blocko.ai/library/veil/sections/main-product-eye-cream/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/veil/sections/main-product--main-product-eye-cream.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 "Eye treatment product" (id `main-product-eye-cream`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/main-product--main-product-eye-cream.html; Shopify bundle: sections/veil/main-product-eye-cream/ 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). 41. [Routine set product](https://blocko.ai/library/veil/sections/main-product-bundle/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/veil/sections/main-product--main-product-bundle.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 "Routine set product" (id `main-product-bundle`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/main-product--main-product-bundle.html; Shopify bundle: sections/veil/main-product-bundle/ 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). 42. [Tinted serum product](https://blocko.ai/library/veil/sections/main-product-skin-tint/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 1.3 KB; category: main-product - Live demo: https://demo.blocko.ai/html/veil/sections/main-product--main-product-skin-tint.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 "Tinted serum product" (id `main-product-skin-tint`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/main-product--main-product-skin-tint.html; Shopify bundle: sections/veil/main-product-skin-tint/ 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). 43. [Botanical Radiance Serum product detail](https://blocko.ai/library/balm/sections/pdp-product-main/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/balm/sections/main-product--pdp-product-main.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 "Botanical Radiance Serum product detail" (id `pdp-product-main`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/main-product--pdp-product-main.html; Shopify bundle: sections/balm/pdp-product-main/ 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). 44. [Sheer skin tint product detail](https://blocko.ai/library/bare/sections/pdp-product-main/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/bare/sections/main-product--pdp-product-main.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 "Sheer skin tint product detail" (id `pdp-product-main`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/main-product--pdp-product-main.html; Shopify bundle: sections/bare/pdp-product-main/ 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). 45. [Skin tint product detail](https://blocko.ai/library/blush/sections/pdp-product-main/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/blush/sections/main-product--pdp-product-main.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 "Skin tint product detail" (id `pdp-product-main`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/main-product--pdp-product-main.html; Shopify bundle: sections/blush/pdp-product-main/ 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). 46. [Big claw clip product detail](https://blocko.ai/library/clip/sections/pdp-product-main/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/clip/sections/main-product--pdp-product-main.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 "Big claw clip product detail" (id `pdp-product-main`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/main-product--pdp-product-main.html; Shopify bundle: sections/clip/pdp-product-main/ 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). 47. [Glow serum product detail](https://blocko.ai/library/dew/sections/pdp-product-main/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/dew/sections/main-product--pdp-product-main.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 "Glow serum product detail" (id `pdp-product-main`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/main-product--pdp-product-main.html; Shopify bundle: sections/dew/pdp-product-main/ 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). 48. [Body oil product detail](https://blocko.ai/library/isle/sections/pdp-product-main/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/isle/sections/main-product--pdp-product-main.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 "Body oil product detail" (id `pdp-product-main`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/main-product--pdp-product-main.html; Shopify bundle: sections/isle/pdp-product-main/ 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). 49. [Bar soap product detail](https://blocko.ai/library/lather/sections/pdp-product-main/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/lather/sections/main-product--pdp-product-main.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 "Bar soap product detail" (id `pdp-product-main`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/main-product--pdp-product-main.html; Shopify bundle: sections/lather/pdp-product-main/ 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). 50. [Color shampoo product detail](https://blocko.ai/library/prism/sections/pdp-product-main/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/prism/sections/main-product--pdp-product-main.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 "Color shampoo product detail" (id `pdp-product-main`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/main-product--pdp-product-main.html; Shopify bundle: sections/prism/pdp-product-main/ 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). 51. [Barrier serum product detail](https://blocko.ai/library/shelf/sections/pdp-product-main/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/shelf/sections/main-product--pdp-product-main.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 "Barrier serum product detail" (id `pdp-product-main`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/main-product--pdp-product-main.html; Shopify bundle: sections/shelf/pdp-product-main/ 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). 52. [Shave gel product detail](https://blocko.ai/library/stubble/sections/pdp-product-main/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/stubble/sections/main-product--pdp-product-main.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 "Shave gel product detail" (id `pdp-product-main`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/main-product--pdp-product-main.html; Shopify bundle: sections/stubble/pdp-product-main/ 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). 53. [Sun lotion product detail](https://blocko.ai/library/tide/sections/pdp-product-main/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tide/sections/main-product--pdp-product-main.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 "Sun lotion product detail" (id `pdp-product-main`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/main-product--pdp-product-main.html; Shopify bundle: sections/tide/pdp-product-main/ 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). 54. [Glow skin tint product detail](https://blocko.ai/library/tint/sections/pdp-product-main/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tint/sections/main-product--pdp-product-main.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 "Glow skin tint product detail" (id `pdp-product-main`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/main-product--pdp-product-main.html; Shopify bundle: sections/tint/pdp-product-main/ 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). 55. [Satin pillowcase product detail](https://blocko.ai/library/twist/sections/pdp-product-main/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/twist/sections/main-product--pdp-product-main.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 "Satin pillowcase product detail" (id `pdp-product-main`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/main-product--pdp-product-main.html; Shopify bundle: sections/twist/pdp-product-main/ 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). 56. [Tinted serum product detail](https://blocko.ai/library/veil/sections/pdp-product-main/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 16 KB; category: main-product - Live demo: https://demo.blocko.ai/html/veil/sections/main-product--pdp-product-main.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 "Tinted serum product detail" (id `pdp-product-main`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/main-product--pdp-product-main.html; Shopify bundle: sections/veil/pdp-product-main/ 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). 57. [Gift kit product detail](https://blocko.ai/library/tress/sections/pdp-kit-main/) (Tress, beauty) - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.7 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tress/sections/main-product--pdp-kit-main.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 "Gift kit product detail" (id `pdp-kit-main`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/main-product--pdp-kit-main.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/main-product--pdp-kit-main.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) 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). 58. [Haircare product detail](https://blocko.ai/library/tress/sections/pdp-main-product/) (Tress, beauty) - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.7 KB; category: main-product - Live demo: https://demo.blocko.ai/html/tress/sections/main-product--pdp-main-product.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 "Haircare product detail" (id `pdp-main-product`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/main-product--pdp-main-product.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/main-product--pdp-main-product.html into a Liquid section with a {% schema %}, mirroring the structure of an existing bundle in sections/veil/) 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 product page sections for Shopify? Blocko lists 58 free, MIT-licensed product page sections from 15 themes. 56 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 Botanical Radiance Serum product from Balm comes first. ### Are these product page 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 product page 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 product page sections cover? Beauty. Every industry with at least three matching items has its own list. ### How much JavaScript do these product page sections ship? 0 of 58 ship 0 KB of JavaScript. The heaviest is Botanical Radiance Serum product detail in Balm at 16 KB, registered as an idempotent Custom Element.