# Top 29 Product Recommendations Sections for Shopify (Updated Oct 2026)

> Compare 29 free product recommendations sections for Shopify across 15 themes: 28 ship as Liquid, 0 need 0 KB JS. Live demos, agent prompts. Updated Oct…

Page: https://blocko.ai/section/product-recommendations/
MCP: https://blocko.ai/mcp
License: MIT. Not affiliated with Shopify.

## Items

1. [Product recommendations](https://blocko.ai/library/balm/sections/product-recommendations/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/balm/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/balm/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/bare/sections/product-recommendations/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/bare/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/bare/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/blush/sections/product-recommendations/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/blush/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/blush/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/clip/sections/product-recommendations/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/clip/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/clip/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/dew/sections/product-recommendations/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/dew/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/dew/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/isle/sections/product-recommendations/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/isle/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/isle/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/lather/sections/product-recommendations/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/lather/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/lather/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/prism/sections/product-recommendations/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/prism/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/prism/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/shelf/sections/product-recommendations/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/shelf/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/shelf/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/stubble/sections/product-recommendations/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/stubble/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/stubble/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/tide/sections/product-recommendations/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/tide/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/tide/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/tint/sections/product-recommendations/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/tint/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/tint/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/twist/sections/product-recommendations/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/twist/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/twist/product-recommendations/ 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. [Product recommendations](https://blocko.ai/library/veil/sections/product-recommendations/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 0.4 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/veil/sections/product-recommendations--product-recommendations.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 "Product recommendations" (id `product-recommendations`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/product-recommendations--product-recommendations.html; Shopify bundle: sections/veil/product-recommendations/ 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. [Frequently bought together](https://blocko.ai/library/twist/sections/twist-fbt/) (Twist, beauty)
   - Shopify Liquid: ready; JavaScript: 1.7 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/twist/sections/product-recommendations--twist-fbt.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 "Frequently bought together" (id `twist-fbt`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/sections/product-recommendations--twist-fbt.html; Shopify bundle: sections/twist/twist-fbt/ 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. [Complete the routine](https://blocko.ai/library/balm/sections/pdp-complete-routine/) (Balm, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/balm/sections/product-recommendations--pdp-complete-routine.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 "Complete the routine" (id `pdp-complete-routine`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/balm/pdp-complete-routine/ 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. [We think you'll like](https://blocko.ai/library/bare/sections/pdp-complete-routine/) (Bare, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/bare/sections/product-recommendations--pdp-complete-routine.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 "We think you'll like" (id `pdp-complete-routine`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/bare/pdp-complete-routine/ 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. [You might also like](https://blocko.ai/library/blush/sections/pdp-complete-routine/) (Blush, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/blush/sections/product-recommendations--pdp-complete-routine.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 "You might also like" (id `pdp-complete-routine`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/blush/pdp-complete-routine/ 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. [Complete the look](https://blocko.ai/library/clip/sections/pdp-complete-routine/) (Clip, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/clip/sections/product-recommendations--pdp-complete-routine.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 "Complete the look" (id `pdp-complete-routine`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/clip/pdp-complete-routine/ 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. [Complete the routine](https://blocko.ai/library/dew/sections/pdp-complete-routine/) (Dew, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/dew/sections/product-recommendations--pdp-complete-routine.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 "Complete the routine" (id `pdp-complete-routine`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/dew/pdp-complete-routine/ 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. [Complete the getaway](https://blocko.ai/library/isle/sections/pdp-complete-routine/) (Isle, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/isle/sections/product-recommendations--pdp-complete-routine.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 "Complete the getaway" (id `pdp-complete-routine`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/isle/pdp-complete-routine/ 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. [Complete the bundle](https://blocko.ai/library/lather/sections/pdp-complete-routine/) (Lather, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/lather/sections/product-recommendations--pdp-complete-routine.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 "Complete the bundle" (id `pdp-complete-routine`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/lather/pdp-complete-routine/ 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. [Complete the system](https://blocko.ai/library/prism/sections/pdp-complete-routine/) (Prism, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/prism/sections/product-recommendations--pdp-complete-routine.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 "Complete the system" (id `pdp-complete-routine`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/prism/pdp-complete-routine/ 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. [Pairs well with](https://blocko.ai/library/shelf/sections/pdp-complete-routine/) (Shelf, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/shelf/sections/product-recommendations--pdp-complete-routine.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 "Pairs well with" (id `pdp-complete-routine`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/shelf/pdp-complete-routine/ 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. [Complete the kit](https://blocko.ai/library/stubble/sections/pdp-complete-routine/) (Stubble, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/stubble/sections/product-recommendations--pdp-complete-routine.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 "Complete the kit" (id `pdp-complete-routine`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/stubble/pdp-complete-routine/ 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. [Complete the routine](https://blocko.ai/library/tide/sections/pdp-complete-routine/) (Tide, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/tide/sections/product-recommendations--pdp-complete-routine.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 "Complete the routine" (id `pdp-complete-routine`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/tide/pdp-complete-routine/ 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. [Pairs with](https://blocko.ai/library/tint/sections/pdp-complete-routine/) (Tint, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/tint/sections/product-recommendations--pdp-complete-routine.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 "Pairs with" (id `pdp-complete-routine`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/tint/pdp-complete-routine/ 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. [Complete the routine](https://blocko.ai/library/veil/sections/pdp-complete-routine/) (Veil, beauty)
   - Shopify Liquid: ready; JavaScript: 15 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/veil/sections/product-recommendations--pdp-complete-routine.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 "Complete the routine" (id `pdp-complete-routine`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/sections/product-recommendations--pdp-complete-routine.html; Shopify bundle: sections/veil/pdp-complete-routine/ 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. [Best seller recommendations](https://blocko.ai/library/tress/sections/pdp-recommendations/) (Tress, beauty)
   - Shopify Liquid: not yet (not migrated to neutral template); JavaScript: 3.1 KB; category: product-recommendations
   - Live demo: https://demo.blocko.ai/html/tress/sections/product-recommendations--pdp-recommendations.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 "Best seller recommendations" (id `pdp-recommendations`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/sections/product-recommendations--pdp-recommendations.html; no Shopify bundle yet (not migrated to neutral template) — port it from the HTML demo demo/tress/sections/product-recommendations--pdp-recommendations.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 recommendations sections for Shopify?

Blocko lists 29 free, MIT-licensed product recommendations sections from 15 themes. 28 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 Product recommendations from Balm comes first.

### Are these product recommendations 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 recommendations 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 recommendations sections cover?

Beauty. Every industry with at least three matching items has its own list.

### How much JavaScript do these product recommendations sections ship?

0 of 29 ship 0 KB of JavaScript. The heaviest is Complete the routine in Balm at 15 KB, registered as an idempotent Custom Element.