BigCommerce Integration

Add prescription verification using Script Manager and Handlebars

10-minute setupScript ManagerStencil themes

How It Works

BigCommerce integration uses the built-in Script Manager to load the RxCompliant widget and Custom Fields on products to flag which ones require prescriptions. The Handlebars templates in your Stencil theme conditionally render the prescription gate.

Inject script

Use Script Manager to add the widget JS globally.

Add custom fields

Flag products with a 'requires_prescription' custom field.

Edit template

Add Handlebars conditional to show the gate on flagged products.

Prerequisites

1. BigCommerce store with a Stencil theme
2. Access to Script Manager (Storefront > Script Manager)
3. Ability to edit theme files (via Theme Editor or Stencil CLI)
4. An RxCompliant API key (sign up free)

1Add the widget script via Script Manager

Go to Storefront > Script Manager > Create a Script. Configure:

Name: RxCompliant Widget
Location: Footer
Select pages: Storefront Pages (or All Pages)
Script type: Script

Script Manager

<!-- Add via BigCommerce Script Manager -->
<!-- Settings: -->
<!--   Name: RxCompliant Widget -->
<!--   Location: Footer -->
<!--   Pages: Storefront Pages -->
<!--   Script type: Script -->

<script src="https://rxcompliant.com/widget/rxcompliant.js"
        data-api-key="YOUR_API_KEY"
        data-color="#DC2626">
</script>

2Add custom fields to prescription products

For each product that requires a prescription, go to Products > Edit Product > Custom Fields. Add a new field:

Field Name

requires_prescription

Field Value

true

3Edit the product template

Download your theme (Storefront > My Themes > Advanced > Edit Theme Files) or use Stencil CLI. Edit the product template to conditionally render the prescription gate:

templates/pages/product.html

<!-- In your product template (templates/pages/product.html) -->
<!-- Place before the Add to Cart button -->

{{#if product.custom_fields}}
  {{#each product.custom_fields}}
    {{#if name '==' 'requires_prescription'}}
      {{#if value '==' 'true'}}
        <div data-requires-rx
             data-product-id="{{../../product.id}}"
             data-product-title="{{../../product.title}}"
             data-platform="bigcommerce">
        </div>
      {{/if}}
    {{/if}}
  {{/each}}
{{/if}}

4(Optional) Create a reusable component

For cleaner organization, create a partial template:

components/products/rxcompliant-gate.html

<!-- Alternative: Using a Stencil component -->
<!-- Create components/products/rxcompliant-gate.html -->

{{#if product.custom_fields.length}}
  {{#each product.custom_fields}}
    {{#if name '==' 'requires_prescription'}}
      <div class="rxcompliant-container"
           data-requires-rx
           data-product-id="{{../product.id}}"
           data-product-title="{{../product.title}}"
           data-platform="bigcommerce">
      </div>
    {{/if}}
  {{/each}}
{{/if}}

Then include it in your product template:

templates/pages/product.html

<!-- Include in your product.html template -->
<!-- Place inside the product form, before the add-to-cart button -->

{{> components/products/rxcompliant-gate}}

Testing Your Integration

1. Add the requires_prescription: true custom field to a test product.
2. Visit the product page on your storefront.
3. Verify the prescription upload widget appears.
4. Try adding to cart without uploading — it should be blocked.
5. Upload a test file and verify it appears in your dashboard.

Ready to get started?

Create free account View full docs