Target Placement Guide
Target Placement Guide
This page shows the exact position where each storefront.* extension target renders on the store. Use this to choose the right target for your extension.
Homepage
┌─────────────────────────────────────────────────────────┐
│ storefront.header.block │ ← Announcement bar, promotions
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
├─────────────────────────────────────────────────────────┤
│ STORE HEADER (logo, navigation, search, cart icon) │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ HERO SLIDER / BANNER │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ storefront.homepage.block │ │ ← App sections, featured content
│ │ (renders between hero and product listings) │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ BEST SELLERS / PRODUCTS │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ CATEGORY LISTINGS │ │
│ └─────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────┤
│ storefront.footer.block │ ← Newsletter, trust badges
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ │
├─────────────────────────────────────────────────────────┤
│ STORE FOOTER (links, contact, copyright) │
└─────────────────────────────────────────────────────────┘
┌──────────────┐
│ storefront. │ ← Floating chat bubble,
│ global.embed │ popups, announcements
│ (fixed) │ (bottom-left, all pages)
└──────────────┘
Mounted in: app/[domain]/layout.js (header, footer, global) + app/[domain]/page.js (homepage)
Product Page
┌─────────────────────────────────────────────────────────┐
│ storefront.header.block │
├─────────────────────────────────────────────────────────┤
│ STORE HEADER │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌───────────────────┐ ┌──────────────────────────┐ │
│ │ │ │ Product Name │ │
│ │ PRODUCT IMAGE │ │ ৳999 ৳1,499 │ │
│ │ GALLERY │ │ ★★★★☆ (42 reviews) │ │
│ │ │ │ │ │
│ │ │ │ Size: [S] [M] [L] │ │
│ │ │ │ Color: [Red] [Blue] │ │
│ │ │ │ │ │
│ │ │ │ [ ADD TO CART ] │ │
│ │ │ │ [ BUY NOW ] │ │
│ └───────────────────┘ └──────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ PRODUCT DESCRIPTION / TABS │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ storefront.product.block │ │ ← Reviews, trust badges,
│ │ │ │ size guides, upsells,
│ │ Your extension renders HERE │ │ FAQs, social proof
│ │ (below product details, above related products)│ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ RELATED PRODUCTS │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ RECENTLY VIEWED │ │
│ └─────────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────┤
│ storefront.footer.block │
├─────────────────────────────────────────────────────────┤
│ STORE FOOTER │
└─────────────────────────────────────────────────────────┘
Context available: product_id, product_name, product_price, category_id, store_id, is_logged_in, cart_item_count, cart_total
Mounted in: app/[domain]/products/[slug]/page.js
Checkout Page
┌─────────────────────────────────────────────────────────┐
│ STORE LOGO │
├─────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ storefront.checkout.block │ │ ← Upsell offers, trust badges,
│ │ │ │ custom fields, countdown timer,
│ │ Your extension renders HERE │ │ free shipping progress bar
│ │ (above the checkout form) │ │
│ └─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ CHECKOUT FORM │ │
│ │ ┌──────────────┐ ┌──────────────┐ │ │
│ │ │ Contact Info │ │ Order Summary│ │ │
│ │ │ Name │ │ Item 1 ৳500│ │ │
│ │ │ Phone │ │ Item 2 ৳300│ │ │
│ │ │ Address │ │ Shipping ৳60│ │ │
│ │ │ District │ │ Total ৳860│ │ │
│ │ │ │ │ │ │ │
│ │ │ [Place Order]│ └──────────────┘ │ │
│ │ └──────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────┘
Context available: store_id, is_logged_in, cart_item_count, cart_total
Mounted in: app/[domain]/checkout/page.js
Global Targets (All Pages)
These targets render on every page of the store — homepage, product pages, category pages, checkout, etc.
storefront.header.block
Renders above the store header, before the navigation bar. Full-width.
Best for: Announcement bars, promotional banners, countdown sales, cookie consent.
┌─────────────────────────────────────────────────────────┐
│ ★ storefront.header.block ★ │ ← YOUR EXTENSION
├─────────────────────────────────────────────────────────┤
│ Logo Home Shop About Contact 🛒 Cart │ ← Store header
├─────────────────────────────────────────────────────────┤
│ PAGE CONTENT │
storefront.footer.block
Renders above the store footer, after the main page content.
Best for: Newsletter signup, trust badges, partner logos, social proof.
│ PAGE CONTENT │
├─────────────────────────────────────────────────────────┤
│ ★ storefront.footer.block ★ │ ← YOUR EXTENSION
├─────────────────────────────────────────────────────────┤
│ About Us | Contact | Privacy | Terms | © 2026 │ ← Store footer
└─────────────────────────────────────────────────────────┘
storefront.global.embed
Renders as a fixed-position element in the bottom-left corner of the viewport. Floats above all content on every page.
Best for: Chat widgets, help buttons, notification popups, feedback forms.
┌─────────────────────────────────────────────────────────┐
│ │
│ PAGE CONTENT │
│ │
│ │
│ ┌──────────────┐ │
│ │ ★ storefront │ │
│ │ .global │ │
│ │ .embed ★ │ [WhatsApp] │
│ └──────────────┘ [ FAB ] │
│ fixed bottom-left (existing) │
└─────────────────────────────────────────────────────────┘
Target Selection Guide
Choose the right target based on what you're building:
| I want to build... | Use target | Why |
|---|---|---|
| Product reviews / ratings | storefront.product.block | Renders right below product details |
| Size guide / measurement chart | storefront.product.block | Context includes product_id for product-specific data |
| Cross-sell / upsell widget | storefront.checkout.block | Shows before checkout form for last-minute adds |
| Trust badges (secure checkout, SSL) | storefront.checkout.block | Builds confidence right before purchase |
| Free shipping progress bar | storefront.header.block | Visible on every page, drives larger cart values |
| Announcement / sale banner | storefront.header.block | Full-width above navigation on all pages |
| Newsletter signup form | storefront.footer.block | Natural position before footer |
| Live chat widget | storefront.global.embed | Floating, accessible from any page |
| Countdown timer for flash sale | storefront.homepage.block | Prominent on homepage |
| Post-purchase survey | storefront.thankyou.block | Shown after order completion |
| Wishlist button | storefront.product.action | Action on product page |
| Cart recommendations | storefront.cart.block | Visible in cart before checkout |
Dashboard Extension Targets (Reference)
For dashboard (admin-only) extension targets, see the Extension Platform Overview. Dashboard targets include:
- Orders:
order.detail.block,order.detail.action,order.list.action,order.list.selection-action,order.detail.print-action - Products:
product.detail.block,product.detail.action,product.list.action,product.list.selection-action,product.detail.print-action - Customers:
customer.detail.block,customer.detail.action,customer.list.action,customer.list.selection-action - Dashboard:
dashboard.widget,dashboard.block - Navigation:
navigation.link,settings.page,global.action - POS:
pos.action,pos.cart.block - Checkout:
checkout.block,checkout.action - Fulfillment:
fulfillment.detail.block,fulfillment.detail.action