Delivery
The four ways an injectable reaches the storefront, what each needs, and which controls each one offers.
The Placement card starts with a Delivery picker. The route you choose decides where the content appears, how fast it shows, and which targeting controls the form offers.
| Route | How it reaches the page | Rules | Schedule | Frequency cap |
|---|---|---|---|---|
| Loader script (CSS placement on the page) | The loader renders it in the browser at an element you point to. | Yes | Yes | Yes |
| BigCommerce widget (embedded in a theme region) | Registered as a BigCommerce widget in a theme region. | Yes | Yes | Yes |
| Server-rendered (pre-built HTML in a theme region) | Baked into a theme region before any visitor arrives. | No | Yes | Yes |
| Static Page | Published as its own page in your store. | No | No | No |
The widget and server-rendered routes, and static pages, need the app to hold the BigCommerce Content permission, and server rendering needs a suitable theme region. When your store does not qualify, the picker withholds the option and says why, for example Server-rendered delivery needs the BigCommerce Content permission… An injectable that already uses such a route keeps it even if the store loses the permission later.
Loader script
The default route. Fields:
- Anchor selector: a CSS selector for the element the content attaches to. The form checks that it is valid CSS; it cannot check that the element exists on your real page.
- Position: before, after, prepend, append or replace. Replace swaps out the anchor element itself.
- Anchor mode: First match, or Insert after Nth product, which adds Insert after product number and a Product card selector (default
.productGrid li.product) so a banner can sit inside a product grid. - Wrapper element: None (default), which takes no space of its own, or a real tag such as
div,sectionorliwith Wrapper classes and Wrapper style. Give the wrapper your product-card class andgrid-column: span 2to make it fill grid cells. How the wrapper fits shows only on the live storefront, not in the preview.
BigCommerce widget
Fields:
- Scope: Global (every supported page family) or Local (one template file).
- Theme region: picked from a scan of your theme. Regions marked (sitewide) run on every page, including checkout and order pages, and the form says so.
- Template file, for local scope.
- Refresh theme regions rescans the theme.
The CSS placement fields are not used on this route; the content renders inside the region you picked. Rules, schedule and frequency cap still apply, checked in the visitor's browser.
Server-rendered
The content is built before anyone visits, so it cannot look at the visitor. Fields:
- Where it renders: Auto (discover the theme header region) or a specific region. For a page region, also a Page template and an optional pin to one page. Content pinned to one page is never shown anywhere else.
- A CSS placement below, used as a fallback: if the content cannot be server-rendered, the loader renders it at that anchor instead, unless it is pinned to one page.
Targeting rules do not apply on this route. The schedule and frequency cap stay editable because they still apply if the content falls back to the loader. A server-rendered mega menu still applies its per-item country visibility in the browser.
Static Page
The injectable becomes a page of its own in your store. Fields:
- How the store page is provided: Create a new store page, or Link an existing store page and pick it.
- Page title and URL slug (optional). Leave the slug blank to derive it from the title at publish time.
- Visible in the storefront.
There is no CSS placement, no rules, no schedule and no frequency cap: every visitor who opens the page sees the same content, at all times.
Switching routes
Changing the delivery route drops the settings the new route does not offer. For example, moving a loader injectable to a static page discards its rules, schedule and cap.