In this blog post, you’ll learn the basics of the “shortcode” and how you can create your own for implementation to your Shopify theme. The basic example is included for getting started with Shopify shortcodes quickly. So let’s get started and begin with what Shopify shortcode is.

 

1. What is shortcode for Shopify?
2. Where do you put shortcodes in Shopify?
3. Creating a Shortcode in Shopify, A basic example
4. Additional resources

 

1. What is shortcode for Shopify?

Shortcodes in Shopify are little bits of code that allow you to do various things with little effort. It allows users to execute code inside posts, pages without writing any code directly. In addition, you can embed files or create objects that would typically require a lot of code in just one single line.

For example, a trivial shortcode for a youtube player looks like this:

[youtube]

Shortcodes can also be used with additional attributes. In the example below we’ll add 03 attributes of youtube video including the width, height and youtube source. Let’s check it out how it looks like:

[youtube src="https://www.youtube.com/watch?v=PtZir36SIMk" width="560" height="315"]

* src: The link to youtube

* width: The width of video player

* height: The height of video player

Both examples will display a youtube player, which would be hard to maintain when writing the HTML markup for it. So the next step will be where to put the shortcode in Shopify platform.

 

2. Where do you put shortcodes in Shopify?

There are 03 places where you can put the shortcode:

• In a post
• In a page
• In a navigation

In the post or page editor It will look like the image below:

 

3. Creating a Shortcode in Shopify, A basic example.

Please keep in mind that shortcodes should be created for content and functionality that you use frequently. The key point of using shortcodes is to save the time. If you’re going to use only 01 times there is no sense to create a shortcode

The creation process is simple and does not require any advanced Liquid knowledge. The basic steps are:

• Download and install the Shopify shortcode library here https://github.com/culturekings/shopify-shortcodes (Click on button Clone or Download).
• Copy two files shortcode-render.liquid and shortcode.liquid in Snippets folder of your theme.
• Create a shortcode using the naming convention shortcode-NAME.liquid in Snippets folder of your theme, the content of this file like thisYou can add other attributes, such as “control” to hide or show the youtube control.

So that’s all for now and I’ve outlined some additional resources where you can learn more about shortcodes and practical usage in Shopify. If there is any issues with implementation Shopify shortcode feel free to leave a comment.

Additional resources

• Some example shortcodes: https://github.com/culturekings/shopify-shortcodes/tree/master/examples
• A shortcode builder app: https://apps.shopify.com/template-shortcodes
• A shortcode library app: https://apps.shopify.com/shortcodes
• Tips for Using Snippets in Your Shopify Theme: https://www.shopify.com/partners/blog/88186566-tips-for-using-snippets-in-your-shopify-theme