Blocko

Bare — Home

  • Page template
  • page
  • Beauty
  • Shopify Liquid ready
  • 10 KB JS

Page template made of 15 sections: Editorial mega menu, Campaign hero, Message band, Press bar with quote, Tabbed product grid, Get the look, Category slider, Shade grid, Feature driver, Founder note on cream, Brand commitments, Review slider, Press slider, Newsletter, Quick view modal. It belongs to Bare, a beauty theme for makeup (no-makeup, editorial), in the free, open-source Blocko library.

Open live demo Open in library

Features

  • Interactive: ships 10 KB of vanilla JavaScript, registered as an idempotent Custom Element.
  • Every section in this page is available as Shopify Liquid, so the page can be assembled as a JSON template.
  • Category page, designed for beauty (makeup (no-makeup, editorial)) storefronts.

Section order

  1. Editorial mega menu
  2. Campaign hero
  3. Message band
  4. Press bar with quote
  5. Tabbed product grid
  6. Get the look
  7. Category slider
  8. Shade grid
  9. Feature driver
  10. Founder note on cream
  11. Brand commitments
  12. Review slider
  13. Press slider
  14. Newsletter
  15. Quick view modal

Preview

Use it with your agent

Paste this one-line prompt into any coding agent. It asks where the page template should go before it changes anything.

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 "Bare — Home" (template `home`, theme `bare`; live demo: https://demo.blocko.ai/html/bare/templates/home.html) in my project. It is made of these sections in order: home-collection-mega-menu, hero-campaign, message-band, bare-press-quote, tabbed-product-grid, bare-get-the-look, category-slider, bare-shade-grid, feature-driver, bare-founder-note, commitments, testimonial-slider, press-slider, newsletter, home-collection-quick-view-modal (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).

Connected to the Blocko MCP server (https://blocko.ai/mcp)? Ask your agent to run get_item for bare/home, then get_item_source and get_install_guide. Connect your agent.