Big Cartel Theme Support

An introduction to the Insert Content method

An introduction to the Insert Content method

The Insert Content method allows you to easily and cleanly insert content into different areas and locations within your shop, without having to edit your original theme file code.

Using this method helps minimise the risk of corrupting your shop pages. 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 updates.

Some useful applications for the Insert Content method include:

  • Using x-ic-home to replace the default home page content with a slide show or other custom content
  • Using x-ic-before-category to display a category description or banner image
  • Using x-ic-head-code to add favicons or verify your site for Google or Pinterest
  • Using x-ic-after-product-description to display common product details for all products

To Insert Content you create a new page — or select an existing one — in your Big Cartel Customize design > Pages admin area and name it exactly as specified by the relevant Insert Content instructions. For example:

An introduction to the Insert Content method at Aarcade

Note that your preview area will automatically load the insert content page directly, which will always display the message “Hi Admin! Special purpose pages are not displayed as standard pages.“.

In other words, your insert content page has no content to display. Instead, the content you create in an insert content page will be automatically displayed in the location defined by the page name. So, to see the results of your inserted content, you will need to navigate to that location in your preview area.

In our example above, the content we add and save to this page replaces the default Contact page content. So we would navigate to the Contact page to see the results.

Always switch to HTML edit mode when using HTML or shortcodes in Insert Content pages - see How do I switch to HTML edit mode?

For general instructions on adding pages, refer to How do I add a page to my Big Cartel shop?

Insert Content instructions

All Insert Content methods work the same way, i.e. create a new page, name that page according to the insert content method required and then add your content to that page. The following should also be noted:

  1. Each insert content page name must only be used once. For example, do not create a new page with the name x-ic-home if you already have a page with that name.
  2. It is OK to keep adding to, editing and rearranging content in an insert content page as needed - see section Editing and removing inserted content below.
  3. Use a single global insert content method where available and appropriate - see section Page specific content below.
  4. Always check the specific instructions for the insert content method you are using, as some methods have special requirements or precautions. These instructions are listed in the Insert Content category.

Editing and removing inserted content

The content of an Insert Content page can be edited in the same way as any other page. Unless otherwise specified by the name-specific instructions, you can add any content to an insert content page, i.e. add content in the Visual edit mode or switch to HTML mode to add HTML and shortcode.

To undo or remove inserted content, you simply delete the relevant Insert Content page.

To change the location of the inserted content, find the x-ic name for the new location and change the page name accordingly. For example, changing a page name from x-ic-before-home to x-ic-home.

Page specific content

Some Insert Content methods have global and focused options. For example, the global x-ic-after-meta-title will append text to the meta title (the title of your page displayed at the top of the browser, in search engine results, in bookmarks, etc.), while the focused x-ic-after-meta-title about-us will append text only if the page slug is about-us.

If you don’t use a lot of Insert Content pages, then using focused options can be quick and easy. However, the more you use the more your Insert Content pages start to pile up, making your Page controls and Insert Content harder to manage.

In this case you can condense all of your focused pages using Big Cartel conditional statements, to apply your content when on the correct page.

Page specific content - Examples

In our example, we might take all of our focused x-ic-after-meta-title … pages and combine them in the global option x-ic-after-meta-title page with the content:

{% if page.name == 'About Us' %}

How Aarcade got started in Portland

{% elsif page.name == 'Blog' %}

Get the latest news & discounts

{% elsif page.name == 'Sweaters' %}

Recycled wool sweaters

{% endif %}

We delete the focused x-ic-after-meta-title … pages we have now replaced, to ensure there is no double up or conflict.

You can continue elsif statements as required, being careful to maintain the above format precisely.

You can also use your Aarcade theme variable slug 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?. Using slug is often preferred as it remains constant, even if you later change the name of your page. For example:

{% if slug == 'about-us' %}

How Aarcade got started in Portland

{% elsif page.name == 'Blog' %}

Get the latest news & discounts

{% endif %}

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

{% if slug == 'about-us' or page.name == 'Meet the Team' %}

How Aarcade got started in Portland

{% endif %}

These methods can be applied to any Insert Content method that inserts to more than one page. For another example, we have an x-ic-after-all and we use the Big Cartel template code variable page.url to match a group of pages. To insert on every product page..

{% if page.url == '/product' %}

..Your Code.. 

{% endif %}

..or to insert on every products (note the plural form of the above example) page, i.e. view all and category pages:

{% if page.url == '/products' %}

..Your Code.. 

{% endif %}

To exclude a page, you can change the equals to == to not equals to !=. For example, to insert code on every page except the home page:

{% if page.url != '/' %}

..Your Code.. 

{% endif %}

Styling inserted content

If you wish to apply custom styles to your inserted content, you can create your custom style per How do I create custom style code?

All inserted content is assigned the class insert-content. So, for example, if you wanted to make all inserted content bold and font size 15px, you could add the following to your custom style coding area:

.insert-content {
	font-weight: bold;
	font-size: 15px;
}

Additionally, each inserted content block has a class derived from the page name slug. For example, if you inserted content with x-ic-before-cart you could style this block specifically by adding the following to your custom style coding area:

.x-ic-before-cart {
	colour: red;
	border-bottom: 1px solid blue;
}

Note that the class may not match the name if it has been changed since the first save. The most certain way to find the unique class assigned to the wrapper of your inserted content is via your web developer tools - see the web browser tutorial.

AarcadeAn introduction to the Insert Content method