# Top 15 PDP Pages for Shopify (Updated Oct 2026) > Compare 15 free pdp page templates for Shopify across 15 themes: 14 ship as Liquid, 0 need 0 KB JS. Live demos, agent prompts. Updated Oct 2026. Page: https://blocko.ai/type/pdp/ MCP: https://blocko.ai/mcp License: MIT. Not affiliated with Shopify. ## Items 1. [Botanical Radiance Serum](https://blocko.ai/library/balm/pages/pdp/) (Balm, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/balm/templates/pdp.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 build the page "Botanical Radiance Serum" (template `pdp`, theme `balm`; live demo: https://demo.blocko.ai/html/balm/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/balm/, HTML in demo/balm/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Sheer Skin Tint](https://blocko.ai/library/bare/pages/pdp/) (Bare, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/bare/templates/pdp.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 build the page "Sheer Skin Tint" (template `pdp`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/bare/, HTML in demo/bare/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Sheer Skin Tint](https://blocko.ai/library/blush/pages/pdp/) (Blush, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/blush/templates/pdp.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 build the page "Sheer Skin Tint" (template `pdp`, theme `blush`; live demo: https://demo.blocko.ai/html/blush/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/blush/, HTML in demo/blush/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Big Claw Clip in Blush](https://blocko.ai/library/clip/pages/pdp/) (Clip, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/clip/templates/pdp.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 build the page "Big Claw Clip in Blush" (template `pdp`, theme `clip`; live demo: https://demo.blocko.ai/html/clip/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/clip/, HTML in demo/clip/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Coconut Glow Body Oil](https://blocko.ai/library/isle/pages/pdp/) (Isle, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/isle/templates/pdp.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 build the page "Coconut Glow Body Oil" (template `pdp`, theme `isle`; live demo: https://demo.blocko.ai/html/isle/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/isle/, HTML in demo/isle/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Pine Bar Soap 6-Pack](https://blocko.ai/library/lather/pages/pdp/) (Lather, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/lather/templates/pdp.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 build the page "Pine Bar Soap 6-Pack" (template `pdp`, theme `lather`; live demo: https://demo.blocko.ai/html/lather/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/lather/, HTML in demo/lather/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Color Lock Shampoo](https://blocko.ai/library/prism/pages/pdp/) (Prism, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/prism/templates/pdp.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 build the page "Color Lock Shampoo" (template `pdp`, theme `prism`; live demo: https://demo.blocko.ai/html/prism/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/prism/, HTML in demo/prism/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Barrier Repair Serum](https://blocko.ai/library/shelf/pages/pdp/) (Shelf, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/shelf/templates/pdp.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 build the page "Barrier Repair Serum" (template `pdp`, theme `shelf`; live demo: https://demo.blocko.ai/html/shelf/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/shelf/, HTML in demo/shelf/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Foaming Shave Gel](https://blocko.ai/library/stubble/pages/pdp/) (Stubble, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/stubble/templates/pdp.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 build the page "Foaming Shave Gel" (template `pdp`, theme `stubble`; live demo: https://demo.blocko.ai/html/stubble/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/stubble/, HTML in demo/stubble/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Mineral Sun Lotion SPF 40](https://blocko.ai/library/tide/pages/pdp/) (Tide, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/tide/templates/pdp.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 build the page "Mineral Sun Lotion SPF 40" (template `pdp`, theme `tide`; live demo: https://demo.blocko.ai/html/tide/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, tide-subscribe, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/tide/, HTML in demo/tide/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Glow Skin Tint SPF 30](https://blocko.ai/library/tint/pages/pdp/) (Tint, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/tint/templates/pdp.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 build the page "Glow Skin Tint SPF 30" (template `pdp`, theme `tint`; live demo: https://demo.blocko.ai/html/tint/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/tint/, HTML in demo/tint/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Tinted Serum SPF 40](https://blocko.ai/library/veil/pages/pdp/) (Veil, beauty) - Shopify Liquid: ready; JavaScript: 18 KB; category: page - Live demo: https://demo.blocko.ai/html/veil/templates/pdp.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 build the page "Tinted Serum SPF 40" (template `pdp`, theme `veil`; live demo: https://demo.blocko.ai/html/veil/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/veil/, HTML in demo/veil/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Dew Glow Serum](https://blocko.ai/library/dew/pages/pdp/) (Dew, beauty) - Shopify Liquid: ready; JavaScript: 19 KB; category: page - Live demo: https://demo.blocko.ai/html/dew/templates/pdp.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 build the page "Dew Glow Serum" (template `pdp`, theme `dew`; live demo: https://demo.blocko.ai/html/dew/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, dew-facts, pdp-before-after, pdp-complete-routine, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/dew/, HTML in demo/dew/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Satin Sleep Pillowcase](https://blocko.ai/library/twist/pages/pdp/) (Twist, beauty) - Shopify Liquid: ready; JavaScript: 19 KB; category: page - Live demo: https://demo.blocko.ai/html/twist/templates/pdp.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 build the page "Satin Sleep Pillowcase" (template `pdp`, theme `twist`; live demo: https://demo.blocko.ai/html/twist/templates/pdp.html) in my project. It is made of these sections in order: pdp-product-main, twist-fbt, pdp-before-after, product-recommendations, pdp-reviews, pdp-recently-viewed, newsletter (bundles under sections/twist/, HTML in demo/twist/sections/). Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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. [Leave-In Conditioner](https://blocko.ai/library/tress/pages/pdp/) (Tress, beauty) - Shopify Liquid: not yet (5 of 5 sections not ported to Liquid yet); JavaScript: 4.6 KB; category: page - Live demo: https://demo.blocko.ai/html/tress/templates/pdp.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 build the page "Leave-In Conditioner" (template `pdp`, theme `tress`; live demo: https://demo.blocko.ai/html/tress/templates/pdp.html) in my project. It is made of these sections in order: pdp-main-product, pdp-scent-story, pdp-hair-benefits, pdp-recommendations, pdp-reviews (bundles under sections/tress/, HTML in demo/tress/sections/). Shopify output for this page is not complete yet (5 of 5 sections not ported to Liquid yet); port missing sections from the HTML demo. Before changing any code, ask me which project/theme it belongs to, whether it should be a new page/template or replace/extend an existing one (and which), which sections to keep or drop, and whether the target is a Shopify theme (JSON template) 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 pdp page templates for Shopify? Blocko lists 15 free, MIT-licensed pdp page templates from 15 themes. 14 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 from Balm comes first. ### Are these pdp page templates 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 pdp page templates 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 page template should go before it changes any code. ### Which industries do these pdp page templates cover? Beauty. Every industry with at least three matching items has its own list. ### How much JavaScript do these pdp page templates ship? 0 of 15 ship 0 KB of JavaScript. The heaviest is Satin Sleep Pillowcase in Twist at 19 KB, registered as an idempotent Custom Element.