Content Shortcodes

Shortcodes are handy macros for including products and widgets in your CMS content posts. This guide details how to use them, and the shortcode options currently available in LemonStand.

Embedding Products Using Shortcodes

LemonStand includes two ways to embed products using inline and block shortcodes. The inline product shortcode includes the product link within a paragraph or heading, and the block shortcode shows the product in its own separated block.

  • Show products inline with your text: [ product: some-sku ]
  • Show a product in a larger block: [ product-block: some-sku ]

Shortcode options

Product SKUThe products SKU or ID (required)
hidePriceHide the product price (it's displayed by default)
showInventoryInclude the amount of available inventory (hidden by default)
"Custom button text"Customize the "Buy Now" button (available in block embed only)

Example Product Shortcodes

Showing Products within your text

This is a sample paragraph that shows a [ product: your-sku-1234 ] as a link.
Shows an inline link to a product based on its SKU
This is another sample paragraph showing a [ product: your-sku-1234, hidePrice ] as a link 
with the price hidden.
An inline product link without a price

Showing Products as blocks

This is some sample text.
[ product-block: your-sku-1234 ]
With the product block on its own line, it can be floated to the right or left of the rest of the
Show a product in a block, including a product image, link, and default buy-now button
[ product-block: your-sku-1234, hidePrice]
Shows a product block with the price hidden
[ product-block: pencil-case-1234, left, "Get Yours Today!" ]
Shows a product block with custom button text and extra "left" class (to float it on the left of the page)

Embedding Widgets Using Shortcodes

You can create and embed your own widgets using shortcodes. A widget is any chunk of HTML you want to include in your content. Embedding widgets is useful because you don't need to rewrite any HTML, or take your customers to a different page to see the content you want to display. With widgets you can embed signup forms and other marketing widgets, sidebars, and many other things on the page directly.

First, you'll need a widget block. To create a widget block, navigate to Store Design > Widget Blocks, and click +. You can see some default widget blocks already there as examples. You can read more about widget blocks here.

  • Show a custom widget in your content: [ widget: widget-name ]

Example Widget Shortcodes

[ widget: about-us, right ]
Shows the about-us static widget and adds a class to float it to the right
[ widget: signup-form ]
Show the signup form widget
[ widget: site-sale-banner ]
Show the site sale banner widget

Example of Blog Post with Embedded Widget and Product

Widget text embed (top right). Product block embed (bottom left)

How to Customize the Appearance of Embedded Content

You can customize the appearance of content embedded using shortcodes. All shortcodes allow you to add extra CSS classes (any extra parameter will be added as a CSS class).

For example, [ product-block: ls-hoodie2, hidePrice, right ] will add the extra right parameter as a CSS class, moving the product-block to the right of the page.

There are a small number of builtin CSS classes for shortcode embeds (like right, left, box), but more importantly additional CSS classes can be added in your theme. You can add more classes to your theme CSS by navigating to Store Design > Site Resources > CSS.

Additionally, you can add custom styles in your CSS theme template resources directly in Store Design > Site Resources > CSS.