# Edit Your Template

You will now need to edit the template files to add the Widgets to the Product and cart pages.

In your BigCommerce admin, select **Channel Manager** from the menu. 

Make a copy of your theme by clicking **Edit storefront settings** and then selecting **Themes** from the left menu, then under the **\[Advanced]** button, click **Make a Copy** from the drop down menu. Once you name the new theme click **Save a Copy**. 

Then under your new theme, you can click the 3 dot menu and select **Edit Theme Files**. BigCommerce may then ask for a confirmation, where you just click the **\[Edit Theme Files]** button in the overlay. 

<figure><img src="/files/1vfn89N6E3O71a1gA4S5" alt=""><figcaption></figcaption></figure>

Once you’re in the Theme Editor, select Templates from the Left Hand Side navigator, and then update the files as described in the following sections. .

Any example code has been created to work with the default “Cornerstone” theme and may need to be amended to fit your template.&#x20;

### Product Cards

**Theme File:** templates/components/card.html

{% hint style="info" %}
Insert following code above the last \</article> tag
{% endhint %}

{% code overflow="wrap" %}

```html
<div class='product-listing-widget-container'>
<div id='product-listing-widget-0' class='product-listing-widget' data-amount='{{price.without_tax.value}}'></div>
<script type='text/javascript'>
mw( 'product-listing-widget', { amount:
{{price.without_tax.value}} } );
</script>
</div>
```

{% endcode %}

### Product Listing Page

**Theme File:** templates/components/products/product-view\.html

{% hint style="info" %}
Insert following code after line 115: {{{region name="product\_below\_price"}}}
{% endhint %}

```html
{{#if product}}
   <div class='product-box-widget'></div>
     {{#if product.price.with_tax}}
         <script>
            mw('product-box-widget', { 
             amount: '{{product.price.with_tax.value}}'
                  })
         </script>
     {{/if}}
     {{#if product.price.without_tax}}
         <script>
            mw('product-box-widget', { 
             amount: '{{product.price.without_tax.value}}'
                     })
         </script>
     {{/if}}
{{/if}}
```

### Cart

**Theme File:** templates/pages/cart.html

{% hint style="info" %}
Insert following code above the line\
{{else}}\
\<h3 tabindex="0">{{lang 'cart.checkout.empty\_cart'}}\</h3>
{% endhint %}

{% code overflow="wrap" %}

```html
<div class='cart-widget'>
<div class='cart-box-widget'></div>

<!-- The data in this input tag is needed for when the cart page has fragments rerendered →

<input type='hidden' id='cart-total' value='{{cart.grand_total.value}}'>
   <script type='text/javascript'>
         mw( 'cart-box-widget', { amount:  
            {{cart.grand_total.value}} }) 
    </script>
</div>
```

{% endcode %}

### Footer

**Theme File:** templates/components/common/footer.html

{% hint style="info" %}
Insert following code above the line {{#if theme\_settings.show\_powered\_by}}
{% endhint %}

```html
<div class='optty-footer-widget'></div>
   <script>
      mw('footer-widget', {});
    </script>
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optty.com/platforms/bigcommerce/add-optty-widgets/edit-your-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.