How do I insert code into my Big Cartel theme layout?
Filed in Advanced Customisation
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:
- add a new page in our Customize design > Pages () admin area
- name the page x ic head code
- switch to HTML mode and delete any existing content
- place our meta tag in the page content
- click the Save link when finished
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:
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:
Or you can use Big Cartel API variable page.url to match a group of pages. For example, to insert on every product page..
..or to insert on every products page (view all and category pages):