Need help with the Shortcodes App? You've come to the right place.  You can open each section below - it contains everything you need to get set up and start creating with the Shortcodes App.

How do I install the App?  How do I set it up?

There are two steps.

1.  Install The App from the Shopify App Store:  Go to the Shopify App Store page and click the big green "Get App" button.  Once you've done that, you can click on "Apps" in your Shopify Admin, and you'll see Shortcodes listed in there. 

2.  Change a couple of lines of code in the templates you'd like to use Shortcodes in, as below.  This will take you two minutes.  It depends a little on your theme and that's why can't fully automate installation process.  In any case, newbies and experts alike can do this, it's a cinch:

First up, go to Template Editor and open up product.liquid.  Search for
{{ product.description }}
and replace it with
{% include 'shortcodes' with product.description %}

Then, open up page.liquid. Search for
{{ page.content }}
and replace it with
{% include 'shortcodes' with page.content %}

Lastly, open up article.liquid. Search for

{{ article.content }}
and replace it with
{% include 'shortcodes' with article.content %}

If you have other templates where you want to use Shortcodes, you can follow the same process.

That's it.  (If you'd prefer for us to install it for you, we can do so for a one-time fee of just $25.  Click here.)  And of course, we're here to help if you get stuck --

How do I create stuff using the App?

VIDEO OVERVIEW - 2 MINUTES (or see below for a text version with screenshots)


Once you've installed the App, go to your Shopify Dashboard.  On the left, click "Apps".  You'll see Shortcodes for Shopify.  Click it.  

This will open up the app in a new tab in your web browser.  Keep the two tabs open: one with your Shopify Admin, the other with the Shortcodes App.

The first time you do it, you'll need to enter your store's URL, e.g. "". 

From there, click on the kind of element you want to create.  For example, if you want to create a button, click "Button".  Below, we'll show the process of creating a button - but the process is the same for all elements - you can just repeat the steps below as needed. (You'll see step 1, step 2, step 3 etc. listed inside the app, too).

Next, you'll see some text fields - fill these out as desired.


When you're done, click "Get Code", then copy the code.  The code will now be on your clipboard, ready to paste into your page or product.

Lastly, switch back to your Shopify tab, then paste the code into your page or product, in your Shopify admin. Save. 

You will see your newly created element on the page.

Fields you can customise (and their meanings)

You can customise the following fields (you'll see these throughout the app), here's what they mean:

  • Padding:  The extra space around the edges.  For example, if a button has a lot of padding (e.g. 20px), it will be fat and tall.  If it has little padding (e.g. 2px), it will be short and skinny.
  • Border radius:  This will make your edges round (e.g. 5px border radius) or square (e.g. 0px border radius).

How long will this take?

The first time you create an element (e.g. button), it might take you 5-10 minutes to go through the steps.  After you've created a few shortcodes, though, you can create elements in less than a minute each.

Combining elements (advanced)

You can combine several shortcodes into one section too if you so desire.  For example:

  • You could have a set of tabs, which contain a button, that launches a lightbox. 
  • You could have expandable sections with buttons inside them.

Just generate the code as above, and place them inside each other.


See FAQs here →