How To Add Common Ninja's Widgets to BigCartel

Integrating your Common Ninja’s widgets into your BigCartel store is a very easy process. Note, however, that the option to edit HTML code on BigCartel is for premium users only. 

There are two main methods to add your widget to BigCartel: using the integration section and creating a custom page. Each method offers distinct advantages:

Method 1 - Using the Integration Code Section:

This method allows you to embed the widget across various page types, such as your product pages or your homepage.

1. First, you need to copy the widget’s HTML code. 
   
   
   
2. Navigate to the "Code" tab in your BigCartel dashboard: https://my.bigcartel.com/account/design/code. Within the "Integration Code" area, select the "Body" section.
   

   

   
   
   
3. Edit the HTML code of the page by choosing the page you want to edit using the provided code example:
   

   {% if page.permalink == 'home' %} 
     // insert script you want only included on your homepage 
   {% elsif page.permalink == 'products' %} 
     // insert script you want only included on your products list page 
   {% elsif page.permalink == 'product' %} 
     // insert script you want only included on your individual product pages 
   {% elsif page.permalink == 'contact' %} 
     // insert script you want only included on your contact page 
   {% endif %}

   
   
   

4. Paste the widget code below the relevant page code. For example, if you want the widget to appear on the homepage, paste the widget code directly below the first line of the provided example. Once done, click “Publish”.
   
   

Method 2 - Using A Custom Page:

This method allows you to embed your widget within a specific custom page of your choice.

1. Copy your widget’s HTML code. 
   
   
2. Navigate to your pages section within your dashboard: https://my.bigcartel.biz/account/design/pages and click on "Add a new page".
   

   

   
   
   
3. In the new page editor, specify the page name using the "Name" setting
   

   

   
   
   
4. Next, click on the three dots (...) in the toolbar to access a set of additional options.
   

   

   
   
   
5. Locate the custom code button represented as "<>" and click on it to open a new window. 
   

   

   
   
   
6. Paste your widget code within the opened window to embed it within your page, then click "Done".
   

   

   
   
   

7. Once the widget is added to your page, save your changes by clicking on the "Done" button in the page editor.

   

That’s it! Once completed, you should see Common Ninja’s widget integrated into your page.