Useful and important links for creating your first Shopify theme

Shopify Expert
165 0 38

I agree Gavin, I think it was intended that way. But it was also misinformation, in that the author had simply misunderstood quite a few things. Loque definitely raised some good points.

Either way though, the article did have some good points, and there is always room for improvement in any platform. Shopify does have its weaknesses after all.

best eCommerce platform out there bar none

I think that is the most important point. It is the best option there is, for retailers and developers alike.

If we continue to give feedback to the core team, we are all going to win :)

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
411 0 52

I've never seen that article and one of the comments sparked an Idea on why don't we use shortcodes so I've taken this simple idea from the comments

{% capture x %}{% include 'my_shortcode' %}{% endcapture %}
{{ page.content | replace: '[shortcode]', x }}

And turned it in to a fully dynamic shortcode solution for pages. So quickly some information on syntax. I've kept the open and close tags as {{ }} as they are rarely used. Also I've made the seperator to assign variables II as this is also rare. So a shortcode looks like this

{{gallery||123||medium}}

The first part is the snippet it is going to load and the rest are variables that you can use within the snippet

So now for the functionality. It is all run from the pages.liquid file

<div id="body">
{% assign shortcodeBegins = page.content | split: '{{' %}
{% if shortcodeBegins.size > 1 %}
  {% for shortcodeBegin in shortcodeBegins %}
    {% if forloop.first %}
        {{shortcodeBegin}}
    {% else %}
      {% assign shortcodeEnds = shortcodeBegin | split: '}}' %}
      {% capture shortcodeFull %}{{shortcodeEnds[0]}}{% endcapture %}
      {% assign shortcode = shortcodeFull | split: '||' %}
      {% assign variables = '' %}
      {% for section in shortcode %}
        {% if forloop.first %}
        {% if forloop.last %}
        {% assign variablesFinal = variables | split: '||' %}
        {% include shortcode.first variable: variablesFinal %}
        {% endif %}
        {% else %}
        {% if forloop.last %}
        {% assign variables = variables | append: section %}
        {% assign variablesFinal = variables | split: '||' %}
        {% include shortcode.first variable: variablesFinal %}
        {% else %}
        {% assign variables = variables | append: section | append: '||' %}
        {% endif %}
        {% endif %}
      {% endfor %}
        {{shortcodeEnds[1]}}
    {% endif %}
  {% endfor %}
{% endif %}
</div>

And your snippet that you make will have the same name conventions as your shortcode so in this case it is gallery.liquid and you can use the variables as the variable array.

Gallery Included<br>
{{variable[0]}}<br>
{{variable[1]}}<br>
<br>

 

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
165 0 38

Ohhh... shortcodes for users, not developers :p

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
1 Like
Explorer
66 0 23

Very nice!

If you're looking for some more good tactics around snippets and shortcuts for theme devs, I can highly recommend checking out the code of what the guys at Lucid Design have done with Bootstrapify: https://github.com/luciddesign/bootstrapify

Author of http://gavinballard.com/mastering-shopify-themes/ and http://bootstrapforshopify.com.
1 Like
Shopify Partner
411 0 52

I've actually just shifted all the above code to Github so there is a central place for further development of this. It needs a few more things like escaping of the search characters for those very rare cases they are in the variable text

https://github.com/ryanheart/shopify-shortcodes

Feel free to log any issues or new features you would like to see and in the meantime I'll make some better documentation and examples.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
9418 9 1258

For complete builds I just use a custom version of the dashboard tools that adds that extra buttons to the tinymce instance so the client can just click a few buttons to add shortcodes in - with or without vars.

The one concern with using what Ryan has posted will be the likely addition - or existence - of a surrounding element. Unlike html comments - {{ blah }} will be something the RTE will try and parse, and will try to apply formatting to. So the client would need to be even more careful on the placement, and whitespace. Below is safer, though less friendly as it's a html dump.

<!-- {{gallery||123||medium}} -->

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Expert
165 0 38

Ahh... seeing as though we can use some quite simple 'find &replace' type functions with liquid, couldn't the shortcodes be even simpler? Could they not even be as simple as [fabric-care] for example. In this very basic case the [fabric-care] would be replaced with an image or other HTML element using liquid.

Maybe we should move this discussion elsewhere, so that we aren't too off topic?

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
411 0 52

Cam,

Using the above to pass variables and a snippet you could create a page snippet called {{page||fabric-care}} the page refers to page.liquid and the fabric-care tells it to load a particular page so you can embed a page within page content.

OR

You could just setup a snippet called fabric-care and call it by using {{fabric-care}}

I think the best thing about this approach is you can use the same snippets within your page templates and you can also use the same code within the liquid by using the include statement.

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes
Shopify Expert
165 0 38

Hi Ryan,

I was thinking more about for users editing products and so froth in the WYSIWYG editor. A simple replace function would bring what we are talking about into the hands of the users.

Or am I missing something. Can you use include statements in the text editor? Surely not!?

Cam

Head fox at Elkfox | App and web, design and development | Digital commerce experts | https://elkfox.com
0 Likes
Shopify Partner
411 0 52

Cam the suggestions I'm providing is for the end user to be able to use in WYSIWYG editor to access snippets that you design.

I was thinking more on how to implement this on other areas not just the page and I think I can make a simple one liner to bootstrap this.

{% include shortcode load: page.content%}
{% include shortcode load: product.description%}

Which would be equivilent of the following but with the bonus of shortcode loading.

{{page.content}}
{{product.description}}

Alternatively to keep the simple replace function clean you could have

{% include shortcode load: page.content, register: pricing-table,calendar,other-shortcode %}

 

Want an app but can't find what you need? Let us know we custom build apps for Free
0 Likes