# 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="https://content.gitbook.com/content/fCUCEi1845pQGMcbjae6/blobs/uKVzu1SlBVtjq2tOLsjZ/image.png" 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>
```