As of 28th May 2016, only the most current version of Aarcade themes will receive personal support and updates – read more…

  Back to Top

Shortcodes

Filed in Creating and customising content

Shortcode List

If you have not used shortcodes in the past, please refer to An Introduction to Shortcodes before reading the specific shortcode instructions via the table below. Also note that our Extras section includes a number of pages that are provided as shortcode examples.

Shortcode (click for instructions) Description
1. [[clearspace]] Clears alignment styles (float) and creates a space before any following elements
2. [[columns]] Split content into columns
3. [[copymark]] Display copyright symbol
4. [[gallery]] Displays a thumbnail gallery of user-defined images
5. [[slideshow]] Displays an animated slide show of user-defined images
6. [[storename]] Display store name
7. [[year]] Display current year

[[clearspace]]

Simplest Form

[[clearspace]]

This shortcode will clear any active alignment styles and create a new line for the content elements that follow. This shortcode can be used to create space between content and for correcting messy content caused by multiple images with left or right alignment settings.

height

This option defines the height, in pixels, of the space. The default value is 11.

[[clearspace height="30"]]

Valid values are any whole number.

To Top of Page | This is Missing or Doesn't Work for My Theme

[[columns]]

Simplest Form

[[columns]]

This is content in column one.

[[column]]

This is content in column two.

[[column]]

This is content in column three.

[[/columns]]

This shortcode will split the content within the opening and closing tags into columns. The content will be split wherever the additional shortcode [[column]] (singular) is placed between the [[columns]] (plural) tags.

padding

This option defines the amount of padding, measured in pixels, between each column content and the centerline of the column dividing space. In other words, the total width of the space between each column will be double the value set for padding. Valid values are any whole number. The default value is 15, i.e. a 30 pixel space between columns.

[[columns padding="22"]]

This is content in column one.

[[column]]

This is content in column two.

[[column]]

This is content in column three.

[[/columns]]

divider

This option defines whether a dividing border is displayed between columns. Valid values are yes or no. The default value is no.

[[columns divider="yes"]]

This is content in column one.

[[column]]

This is content in column two.

[[column]]

This is content in column three.

[[/columns]]

The colour of the border is defined by the Borders colour style group.

ratio

This option defines the ratio of column widths. Valid values are any whole number ratio format (i.e. whole numbers separated by a colon). The default value is 1:1.

The number of whole numbers in your ratio should match the number of columns you have created. For example, a valid ratio setting for four columns would be ratio="1:2:1:2". Extra whole numbers will be ignored and missing numbers will be set to 1.

[[columns ratio="1:3:1"]]

This is content in column one.

[[column]]

This is content in column two. Column two is three times wider than column one and three.

[[column]]

This is content in column three.

[[column]]

To Top of Page | This is Missing or Doesn't Work for My Theme

[[copymark]]

[[copymark]] is deprecated as of core release 6. Instead use the HTML entity code for the copyright symbol:

©

Simplest Form

[[copymark]]

This shortcode will display the copyright symbol ©. Useful for the footer copyright statement.

To Top of Page | This is Missing or Doesn't Work for My Theme

Simplest Form

[[gallery]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-18.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-19.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-20.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-21.jpg
[[/gallery]]

This shortcode will insert a thumbnail image gallery from the image public URL’s listed between the opening and closing gallery tags.

Enter only the URL for each image. Each URL must be on a new line and must begin with http://.

DO NOT use img html tags, i.e. <img src=”http://i40.tinypic.com/2wolnqw.jpg” /> is incorrect.

To prepare, upload and retrieve public URL’s for your images, refer to How do I upload images or files for my Big Cartel page content? (no hosting required).

Links

By default, each image thumbnail will link to the full size version of the image, which will load in the pop up image viewer. If you wish to change the link for any or all thumbnails, create a new line after the relevant image URL and enter “#link#” followed by the link URL. In the following example, clicking the first thumbnail will take the visitor to Aarcade’s web site and clicking the fifth thumbnail will take the visitor to Big Cartel’s web site.

[[gallery]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
#link#http://aarcadethemes.com/
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-18.jpg
#link#http://bigcartel.com/##nw
http://theme.aarcadethemes.com/preview/images/gal1/robbie-19.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-20.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-21.jpg
[[/gallery]]

Additionally you can have your link open in a new window by entering “##nw” immediately after the link URL. In the above example, clicking the fifth thumbnail will open Big Cartel’s web site in a new window.

Titles

Titles can be added to each thumbnail and will be displayed above the full size image when it is launched in the pop up image viewer. If you wish to add a title to any or all thumbnails, create a new line after the relevant image URL and enter “#title#” followed by the title text. In the following example, the pop up viewer for the third thumbnail image will display the title “This is the full size third image”.

[[gallery]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
#link#http://aarcadethemes.com/
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
#title#This is the full size third image
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-18.jpg
#link#http://bigcartel.com/##nw
http://theme.aarcadethemes.com/preview/images/gal1/robbie-19.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-20.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-21.jpg
[[/gallery]]

Do not include any HTML in your titles. Use text only.

Captions

Captions can be added to each thumbnail and will be displayed under the thumbnail. If you wish to add a caption to any or all thumbnails, create a new line after the relevant image URL and enter “#caption#” followed by the title text. In the following example, the first thumbnail will have the caption “This is the first image” and the last thumbnail caption will show a title “Last Image” and “This is some smaller text on a new line”.

[[gallery]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
#link#http://aarcadethemes.com/
#caption#This is the first image
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
#title#This is the full size third image
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-18.jpg
#link#http://bigcartel.com/##nw
http://theme.aarcadethemes.com/preview/images/gal1/robbie-19.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-20.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-21.jpg
#caption#<h4 style="margin: 0;padding: 0">Last Image</h4><p style="margin: 0;padding: 0;font-size: 11px">This is some smaller text on a new line</p>
[[/gallery]]

Note, as with the last thumbnail in the above example, you can use HTML and inline styles to format your captions. You could also create overriding styles for more complex formatting of both the captions and the thumbnail images themselves (e.g. adding image borders, etc.).

columns

This option defines the number of columns the gallery will be split into. Valid values are any whole number. The default value is 4.

[[gallery columns="5"]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-18.jpg
[[/gallery]]

paddingv

This option defines the amount of vertical padding, measured in pixels, between each gallery column content and the centerline of the column dividing space. In other words, the total width of the space between each gallery column will be double the value set for paddingv. Valid values are any whole number. The default value is 6, i.e. a 12 pixel space between columns.

[[gallery paddingv="2"]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
[[/gallery]]

paddingh

This option defines the amount of horizontal padding, measured in pixels, between each gallery thumbnail. Valid values are any whole number. The default value is 0.

[[gallery paddingh="20"]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-18.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-19.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-20.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-21.jpg
[[/gallery]]

crop

This option defines the height, in pixels, to crop all thumbnails to. Valid values are any whole number. Thumbnails are not cropped by default.

[[gallery crop="120"]]
http://theme.aarcadethemes.com/preview/images/gal1/robbie-10.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-11.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-12.jpg
http://theme.aarcadethemes.com/preview/images/gal1/robbie-13.jpg
[[/gallery]]

The width of thumbnails is automatically defined by the number of columns and the vertical padding (see previous options), so there is no crop option for thumbnail width.

To Top of Page | This is Missing or Doesn't Work for My Theme

[[slideshow]]

Simplest Form

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

This shortcode will load the image files from the public URL’s listed between the opening and closing slideshow tags.

Enter only the URL for each image. Each URL must be on a new line and must begin with http://.

DO NOT use img html tags, i.e. <img src=”http://i40.tinypic.com/2wolnqw.jpg” /> is incorrect.

To prepare, upload and retrieve public URL’s for your images, refer to How do I upload images or files for my Big Cartel page content? (no hosting required). Make sure you review the notes in this article relating to slide show image preparation, specifically Ensure ALL OF YOUR IMAGES ARE IDENTICALLY SIZED.

For a quick and simple example of adding a slide show to your home page, refer to How do I add a slide show to my Big Cartel home page?

Links

If you wish to add a link to a slide image; immediately after the associated image URL enter “##” followed by the link URL. In the following example, clicking any slide will take the visitor to the products page (i.e. view all products).

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg##/products
http://i43.tinypic.com/33215yo.jpg##/products
http://i43.tinypic.com/21kf2fb.jpg##/products
http://i40.tinypic.com/23vj0hg.jpg##/products
[[/slideshow]]

Additionally you can have your link open in a new window by entering “##nw” immediately after the link URL. For example, adding a link to the 4th slide image that will open Aarcade’s web site in a new window:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg##http://aarcadethemes.com/##nw
[[/slideshow]]

Captions

To add captions to any of your images, simply enter them on a new line AFTER the associated image. Captions can be plain text or html. For example, adding a caption to the 3rd slide image:

[[slideshow]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
This is a caption for the 3rd slide image.
This is a second row for the same caption.
<span style="color: red;">This third row is made red using a HTML span tag.</span>
http://i40.tinypic.com/23vj0hg.jpg##http://aarcadethemes.com/##nw
[[/slideshow]]

effect

This option defines the transition effect applied between your slides. The default value is fade (when effect is not defined).

[[slideshow effect="slide"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Valid values are:

  • fade
  • slide
  • slideVertical
  • fadeRandom
  • slideRandom
  • slideVerticalRandom

Note appending “Random” will load your slide images in a random order.

speed - requires core release 4 or later

This option defines the duration of the pause between each slide image change in milliseconds. Valid values are any whole number. The default value is 4000 (4 seconds).

[[slideshow speed="2000"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

style

This option defines the style for both the slide navigation and the image bounding boxes. Slide navigation styles include prev/next links and slide selector buttons.

The value is entered in the format X-Y, where X is a whole number defining the slide navigation style and Y is a whole number defining the image bounding box style. The default value is 1-1 (when style is not defined).

The style value can be entered a single number to select the slide navigation style only:

[[slideshow style="2"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

or as a hyphenated number combination to select both the slide navigation and the image bounding box style:

[[slideshow style="4-3"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Navigation Style: valid values for X in X-Y are 1 to 12. The styles corresponding with each number are as follows:

  1. no navigation displayed
  2. white on black “prev” and “next”
  3. black on white “prev” and “next”
  4. light thin arrow
  5. dark thin arrow
  6. light thin arrow outside of slides - outside arrows will not work for “slide” effects
  7. dark thin arrow outside of slides - outside arrows will not work for “slide” effects
  8. light thick arrow
  9. dark thick arrow
  10. numbered square buttons
  11. little square buttons
  12. image thumbnail buttons
  13. grey round buttons
  14. blue round buttons
  15. grey round indent buttons
  16. 3D ribbon arrows - outside arrows will not work for “slide” effects
  17. round button arrow
  18. round button arrow outside of slides - outside arrows will not work for “slide” effects
  19. 3D round button arrow
  20. 3D round button arrow outside of slides - outside arrows will not work for “slide” effects

Bounding Box Style: valid values for Y in X-Y are 1 to 4. The styles corresponding with each number are as follows:

  1. no box style
  2. thin border
  3. thick border
  4. drop shadow (only works on modern standard browsers)
  5. drop shadow with highlight (only works on modern standard browsers)
  6. white border with drop shadow (only works on modern standard browsers)

These style ranges will be expanded as we develop future theme upgrades.

manual

This option prevents the slide show from automatically progressing through the slide images. Slide transitions will only occur when the user clicks the navigation. Valid values are yes or no. The default value is no (when manual is not defined).

[[slideshow manual="yes"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

top

This option defines the size, in pixels, of the margin above the slide show. The default value is 12 (when top is not defined).

[[slideshow top="30"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Valid values are any integer (positive or negative).

bottom

This option defines the size, in pixels, of the margin below the slide show. The default value is 12 (when bottom is not defined).

[[slideshow bottom="-10"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg
[[/slideshow]]

Valid values are any integer (positive or negative).

Multiple Options

Following is an example of a slide show with multiple options applied:

This is my slide show, using Aarcade's cool shortcodes:

[[slideshow effect="slideRandom" style="8-2" bottom="20"]]
http://i40.tinypic.com/2wolnqw.jpg
http://i43.tinypic.com/33215yo.jpg##/products
<span style="font-size: 20px;">Check out all of our products!</span>
http://i43.tinypic.com/21kf2fb.jpg
http://i40.tinypic.com/23vj0hg.jpg##http://aarcadethemes.com/##nw
[[/slideshow]]

I hope you enjoyed it!

To Top of Page | This is Missing or Doesn't Work for My Theme

[[storename]]

[[storename]] is deprecated as of core release 6. Instead use the Big Cartel API variable for displaying your store name:

{{ store.name }}

Simplest Form

[[storename]]

This shortcode will display the store name as set in the Big Cartel Store > Settings admin area. Useful for the footer copyright statement.

To Top of Page | This is Missing or Doesn't Work for My Theme

[[year]]

Simplest Form

[[year]]

This shortcode will display the current year. Useful for the footer copyright statement.

To Top of Page | This is Missing or Doesn't Work for My Theme

An Introduction to Shortcodes

Shortcodes allow you to quickly create complex content by typing a short and simple code. In some cases they are also used to display a global setting or variable. Shortcodes can be used anywhere within page content or product descriptions.

When using shortcodes in pages, you must FIRST switch to HTML mode as detailed in the support article How do I switch to HTML edit mode?

Shortcodes are always written as the shortcode name surrounded by double square brackets. A basic example of shortcode might look like this:

The current year is [[year]]

When your page content is rendered for public viewing, the shortcode is automatically replaced with the correct content:

The current year is 2017

Some shortcodes support options to allow further control of their behaviour (note that multiple options can be specified at once, separated with spaces):

This is a sentence I have written in my page and I would
like to insert a 30px high space below it.

[[clearspace height="30"]]

This is another sentence after the 30px space.

Some shortcodes support or require content to work:

After this sentence I want to add a slide of my own images.

[[slideshow effect="fade"]]
http://tinypic.com/myimage1.jpg
http://tinypic.com/myimage2.jpg
http://tinypic.com/myimage3.jpg
[[/slideshow]]

A shortcode with content must be surrounded by the shortcode tags and the closing shortcode tag must have a forward slash before the name, e.g. [[/slideshow]].

Related articles...