> ## Documentation Index
> Fetch the complete documentation index at: https://docs.orderprotection.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Installing on BigCommerce

> Step-by-step instructions to install and configure Order Protection on your BigCommerce store.

<Steps>
  <Step title="Create API Account">
    An API account is used to securely access your store via OAuth using BigCommerce's APIs. After completing the steps below, please send the information generated to <code>[onboarding@orderprotection.com](mailto:onboarding@orderprotection.com)</code>.

    1. From the BigCommerce control panel, go to <strong>Settings › Store-level API Tokens</strong> and click <strong>+ Create API Account</strong>.
    2. Select <code>V2/V3 API token</code> for the <strong>token type</strong>.
    3. Enter <code>OrderProtection.com</code> for the <strong>name</strong>.
    4. Under <strong>OAuth scopes</strong>, select the required permissions for each resource.
    5. Click <strong>Save</strong>. A pop-up will display your API credentials. A text file will also be downloaded with these details plus your API path.
    6. Email the contents of the text file to <code>[onboarding@orderprotection.com](mailto:onboarding@orderprotection.com)</code>. Please include the <code>Client ID</code>, <code>Client secret</code>, <code>Access token</code>, and <code>API path</code>.

    <strong>Note:</strong> There is no way to return to this pop-up after you dismiss
    it, so make sure you copy the information and send it to us as soon as possible.

    7. Back on the <strong>Store-level API accounts</strong> screen, click the <strong>...</strong> menu for the <code>OrderProtection.com</code> API account you just created, and click <strong>Edit</strong>.
    8. Click the <strong>Notification email</strong> tab, enter <code>[support@orderprotection.com](mailto:support@orderprotection.com)</code> under <strong>Email for webhook notifications</strong>, then click <strong>Save</strong>.

    <strong>Note:</strong> This address may not save until after Order Protection onboards
    your store and the webhooks are created. Please check this setting again after your
    store has been onboarded to verify the address is saved.

    That's it! Once we receive the details requested above, we will onboard your store to our backend and reach out to coordinate installing the widget in your theme.
  </Step>

  <Step title="Installation">
    *See stored credentials to login to Big Commerce admin.*

    1. Select the account and then store you are working on.

           <img src="https://mintcdn.com/orderprotectioncom/hWJXW3CDmk7aH415/public/assets/img/big-commerce/big-commerce-login.png?fit=max&auto=format&n=hWJXW3CDmk7aH415&q=85&s=8266ccf586aed12b0badd221f46b7dee" alt="" width="513" height="442" data-path="public/assets/img/big-commerce/big-commerce-login.png" />

    2. Go to <code>Storefront › Theme</code> and copy a <strong>Current Theme</strong> by clicking <strong>Advanced › Make a Copy</strong>.

           <img src="https://mintcdn.com/orderprotectioncom/hWJXW3CDmk7aH415/public/assets/img/big-commerce/storefront-theme.png?fit=max&auto=format&n=hWJXW3CDmk7aH415&q=85&s=fd12e30a1b1d0b6583ae8f13e776b3aa" alt="" width="1057" height="382" data-path="public/assets/img/big-commerce/storefront-theme.png" />

    3. Rename the copied theme using the following example: <code>qeretail-2024 \[OP–29/04/2025]</code>. Where <code>qeretail-2024</code> is the theme name and <code>\[OP–29/04/2025]</code> marks that Order Protection was added to this theme on 29/04/2025.

    4. Once the copy finalizes, click the three dots <strong>...</strong> and then <strong>Edit Theme Files</strong>.

           <img src="https://mintcdn.com/orderprotectioncom/hWJXW3CDmk7aH415/public/assets/img/big-commerce/edit-theme-files.png?fit=max&auto=format&n=hWJXW3CDmk7aH415&q=85&s=0a74eec3c6d241724c4e9f221b643322" alt="" width="651" height="901" data-path="public/assets/img/big-commerce/edit-theme-files.png" />
  </Step>

  <Step title="Code Block Configurations">
    **Cart Page:**
    Navigate Templates > Layouts > `base.html`. Copy and Paste this code above the `{{{footer.scripts}}}` line. The highlighted code will need to be adjusted to your store URL and a proper selector for widget placement.

    **Checkout Page:**
    Navigate Templates > Pages > `checkout.html`. Copy and Paste the code next to the other `<script>` tags. The highlighted code will need to be adjusted to your store credentials.

    <CodeGroup>
      ```html base.html lines expandable highlight={16,21} theme={null}
      <!-- Order Protection Styling -->
      <link
        rel="stylesheet"
        href="https://cdn.orderprotection.com/widget/shopify/5.9.3/style.css"
      />
      <!-- End of Order Protection Styling -->

      <!-- Order Protection Widget -->
      <script
        crossorigin
        src="https://cdn.orderprotection.com/widget/big-commerce/5.27.1/orderprotection.js"
      ></script>

      <script defer>
        const widget = OrderProtection.createOrderProtectionWidget({
          store_url: "store-nd5f5zgf3.mybigcommerce.com",
          locations: [
            {
              sibling: {
                position: "before",
                selector: ".cart-total",
                // Uncomment the following block to apply custom styles:
                /*
                  styles: {
                  'width': '350px',
                  'margin-left': 'auto'
                  }
                  */
              },
            },
          ],
          text: {
            LOGO_TEXT: "testing",
            INFORMATION_TEXT: "testing info",
          },
        });
        function updateMainCartCount() {
          const cart = widget.cart.cart;
          const cartItems = cart.lineItems;
          const hasOp = cartItems.digitalItems.some(
            (item) => item.name === "Order Protection"
          );

          if (!hasOp) return;
          const countElm = document.querySelector("[data-cart-page-title]");
          if (!countElm) return;
          const numberMatch = countElm.innerText.match(/\d+/);
          if (!numberMatch) return;
          const currentNumber = numberMatch[0];
          const newCount = widget.cart.item_count - 1;
          const newText = countElm.innerText.replace(currentNumber, newCount);
          countElm.innerText = newText;
        }

        function updateHeaderCartCount() {
          const cart = widget.cart.cart;
          const cartItems = cart.lineItems;
          const hasOp = cartItems.digitalItems.some(
            (item) => item.name === "Order Protection"
          );

          if (!hasOp) return;
          const headerCountElm = document.querySelector(
            ".countPill.countPill--positive.cart-quantity"
          );
          if (!headerCountElm) return;
          headerCountElm.innerText = widget.cart.item_count - 1;
        }

        function updateSubtotal() {
          const cart = widget.cart.cart;
          const cartItems = cart.lineItems;
          const hasOp = cartItems.digitalItems.some(
            (item) => item.name === "Order Protection"
          );

          if (!hasOp) return;

          const OpItem = cartItems.digitalItems.find(
            (item) => item.name === "Order Protection"
          );
          const totalNoOp = cart.cartAmount - OpItem.listPrice;
          const formatter = new Intl.NumberFormat(undefined, {
            style: "currency",
            currency: cart.currency.code,
          });
          const formattedSubtotal = formatter.format(totalNoOp);
          const subtotalElm = document.querySelector(".cart-total-value > span");
          const subtotalElm2 = document.querySelector(
            ".cart-total-value.cart-total-grandTotal > span"
          );
          if (subtotalElm && subtotalElm2) {
            subtotalElm.innerText = formattedSubtotal;
            subtotalElm2.innerText = formattedSubtotal;
            clearInterval(updateSubtotal);
          }
        }

        function updateCartCountAndSubtotals() {
          updateMainCartCount();
          updateHeaderCartCount();
          updateSubtotal();
        }

        widget.addPlugin({
          afterInit: () => updateCartCountAndSubtotals(),
          afterRemoveFromCart: () => updateCartCountAndSubtotals(),
          afterAddToCart: () => updateCartCountAndSubtotals(),
        });

        widget.init();

        setInterval(() => {
          widget.attach();
        });
      </script>
      <script>
        document.addEventListener("DOMContentLoaded", () => {
          const cartItems = document.querySelectorAll(".cart-item");
          cartItems.forEach((item) => {
            const name = item.querySelector(".cart-item-name").innerText.trim();
            if (name === "Order Protection") {
              item.style.display = "none";
            }
          });
        });
      </script>

      <!-- End of Order Protection Widget -->
      ```

      ```html checkout.html lines expandable highlight={14,19-20} theme={null}
      <!-- Order Protection Styling -->
      <link
        rel="stylesheet"
        href="https://cdn.orderprotection.com/widget/shopify/5.9.3/style.css"
      />
      <!-- End of Order Protection Styling -->

      <script
        crossorigin
        src="https://cdn.orderprotection.com/widget/big-commerce/5.27.1/orderprotection.js"
      ></script>
      <script defer>
        const widget = OrderProtection.createOrderProtectionWidget({
          store_url: "store-nd5f5zgf3.mybigcommerce.com",
          locations: [
            {
              sibling: {
                position: "after",
                selector:
                  ".checkout-step.optimizedCheckout-checkoutStep.checkout-step--shipping",
                // Uncomment the following block to apply custom styles:
                /*
                  styles: {
                      'width': '350px',
                      'margin-left': 'auto'
                  }
                  */
              },
            },
          ],
          text: {
            LOGO_TEXT: "testing",
            INFORMATION_TEXT: "testing info",
          },
        });
        widget.addPlugin({ afterAddToCart: () => location.reload() });
        widget.addPlugin({ afterRemoveFromCart: () => location.reload() });
        widget.init();
      </script>
      <!-- End of Order Protection Widget -->
      ```
    </CodeGroup>
  </Step>

  <Step title="Customize Widget Labeling (If Needed)">
    To customize the widget text labels, add the following configuration to your widget initialization:

    1. In both the Cart Page and Checkout sections, locate the widget initialization code:

    ```javascript theme={null}
    const widget = OrderProtection.createOrderProtectionWidget({
      store_url: "store-nd5f5zgf3.mybigcommerce.com",
    });
    ```

    2. Add the <code>text</code> configuration object before the closing bracket below the <code>store\_url</code>:

    ```javascript theme={null}
    const widget = OrderProtection.createOrderProtectionWidget({
      store_url: "store-nd5f5zgf3.mybigcommerce.com",
      // ... other configurations ...
      text: {
        LOGO_TEXT: "testing",
        INFORMATION_TEXT: "testing info",
      },
    });
    ```

    3. Customize the text values according to your needs:
       * <code>LOGO\_TEXT</code>: The text displayed next to the logo
       * <code>INFORMATION\_TEXT</code>: The informational text shown in the widget

    <strong>Note:</strong> Make sure to add this configuration to both the Cart Page
    and Checkout widget implementations to maintain consistency.
  </Step>

  <Step title="Hide Order Protection from Cart">
    To hide the Order Protection item from the cart display, follow these steps:

    * Navigate to `Templates > Pages > cart.html`
    * Locate the `{{/partial}}` tag at the bottom of the file
    * Add the following code just above the `{{/partial}}` tag:

    ```html theme={null}
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const cartItems = document.querySelectorAll("tr.cart-item");

        cartItems.forEach((item) => {
          if (item.innerText.includes("Order Protection")) {
            item.style.display = "none";
          }
        });
      });
    </script>
    ```
  </Step>

  <Step title="Add Claims Section to Order Confirmation Emails">
    To add a claims section to your order confirmation emails:

    1. Go to **Marketing > Transactional Emails** in your BigCommerce admin.
    2. Click the <strong>…</strong> next to <strong>Order Email</strong> and select <strong>Edit template</strong>.
    3. Set up the following phrases:

    | Phrase name                | Phrase value                                                                                                                                                                                                          |
    | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `order_protection_label`   | Issues with your order?                                                                                                                                                                                               |
    | `order_protection_message` | Luckily, you purchased Order Protection! Submit a claim to quickly resolve lost, damaged, stolen, or wrong item issues with your order. Once approved, you will receive a refund or reshipment at no additional cost. |
    | `order_protection_button`  | File a claim                                                                                                                                                                                                          |

    4. Scroll to the bottom of the template and paste the following block of code **right above** <code>\<table class="row"></code>.<br />
           <Callout type="info">
             <strong>Note:</strong> The location might differ, so preview the template
             to find the correct spot.
           </Callout>

    ```handlebars lines expandable theme={null}
    {{#each order.products}}
      {{#if name "==" "Order Protection"}}
        <style>
          .enable_op { display: block !important; }
        </style>
      {{/if}}
    {{/each}}

    <table
      class="container enable_op"
      style="display: none; width: 100%; margin-top: 30px;"
    >
      <tr>
        <td
          style="font-family: Arial, sans-serif; vertical-align: top; padding: 20px; text-align: center; border: 1px solid #ccc; background-color: #f8f9ff; border-radius: 8px;"
        >
          <p
            style="margin-top: 0; margin-bottom: 10px; font-weight: bold; font-size: 16px; color: #000;"
          >
            {{lang "order_protection_label"}}
          </p>
          <p
            style="margin-top: 0; margin-bottom: 20px; font-size: 14px; color: #333; line-height: 1.4;"
          >
            {{lang "order_protection_message"}}
          </p>
          <a
            href="https://claim.orderprotection.com/submitClaim?email={{customer.email}}&op_id={{order.id}}&fromEmail=true"
            style="color: #ffffff; font-weight: bold; font-size: 14px; text-decoration: none; display: inline-block; padding: 15px 25px; background-color: #1991c6; border-radius: 6px; min-width: 280px;"
          >
            {{lang "order_protection_button"}}
          </a>
        </td>
      </tr>
    </table>
    ```

    That's it! Your customers will now see a clear claims section in their order confirmation emails, making it easy to file a claim if needed.
  </Step>
</Steps>