Back to Top

How do I insert code into my Big Cartel theme layout?

Filed in Advanced Customisation

In some cases you may need to add custom script, HTML or CSS code to your shop. For example, you may wish to include some custom JavaScript, Google may need you to add a meta tag to your site to verify your ownership when using one of their apps, Facebook may need you to add an application ID meta tag, etc.

This article explains the best way to insert such code into your Big Cartel theme layout, i.e. code that will be included on ALL pages of your shop.

Meta title and meta description tags

If you are looking for the correct method to customise your meta title and meta description tags, these instructions are provided in the article Should I be editing my meta tags, URLs or titles?

Never add code to your Big Cartel theme unless you are an experienced coder or you are certain that your code will not create invalid HTML and/or break your shop layout or functionality.

Adding Code to Aarcade Themes

Never add code directly to your layout page. Your Aarcade theme includes Insert Content pages specifically for adding code globally without corrupting your original theme coding.

Using this method helps minimise the chance that your custom coding will cause unexpected issues. It also groups your custom coding to ensure that it can be easily and safely removed or edited and – because it is saved outside of your core theme pages – it is not overwritten during future theme upgrades.

These Insert Content pages include:

  • x ic head code – globally insert code into the <head> area of your shop HTML – never add plain text or content tags to the head code – refer to w3schools head article for allowable tags
  • x ic open body code – globally insert code or content immediately after the opening <body> tag
  • x ic close body code – globally insert code or content immediately before the closing </body> tag

Always switch to HTML edit mode when writing code in these Insert Content pages – see How do I switch to HTML edit mode?

For example, to add a Google verification meta tag to the head code we:

  1. add a new page in our Customize design > Pages (pages) admin area
  2. name the page x ic head code
  3. switch to HTML mode and delete any existing content – IMPORTANT!
  4. place our meta tag in the page content
  5. click the Save link when finished

Insert Head Code

As with any Insert Content page, we can continue to add content to the same page, e.g. we could add new lines above and paste in extra meta tags or other head code. For more instructions on using Insert Content pages, refer to Insert Content.

Page specific code

If you wish to have your code inserted only on a particular page, then you can use Big Cartel API to check when that page is being displayed. For example:

{% if page.name == 'About Us' %}
<script type="text/javascript"> 

..My Script.. 

</script>
{% endif %}

Or you can use your Aarcade theme variable pg_slg instead of page.name to match a specific page’s slug (see How do I obtain a page slug for a particular area of my shop?). For example:

{% if pg_slg == 'about-us' %}
<script type="text/javascript"> 

..My Script.. 

</script>
{% endif %}

Or you can apply to multiple pages by joining conditional statements with “or”. For example:

{% if pg_slg == 'about-us' or page.name == 'Shipping and Returns' %}
<script type="text/javascript"> 

..My Script.. 

</script>
{% endif %}

Or you can use Big Cartel API variable page.url to match a group of pages. For example, to insert on every product page..

{% if page.url == '/product' %}
<script type="text/javascript"> 

..My Script.. 

</script>
{% endif %}

..or to insert on every products page (view all and category pages):

{% if page.url == '/products' %}
<script type="text/javascript"> 

..My Script.. 

</script>
{% endif %}

Related articles...