Shopify Cheat Sheet

Mark Dunkley — Thu, 15 Oct 2009 02:55:49 +0000

This is an unofficial cheat sheet for Shopify

Things needed to be added/changed

Fix descriptions on link_to_add_tag and link_to_remove_tag
Ask Dennis about 'includes' and 'contains' filters
time and divided_by filters
current_tags (array) in global objects (for collection pages)

Jamie commented

Jamie — Thu, 15 Oct 2009 03:04:29 +0000

Needs a print style sheet, but it looks great. I'll have to look closer in the morning. A day of staring at 1900px X1200px has killed my brain (and eyes)

Mark Dunkley commented

Mark Dunkley — Thu, 15 Oct 2009 03:12:56 +0000

Great idea Jamie :)

Dennis Theisen commented

Dennis Theisen — Thu, 15 Oct 2009 16:09:49 +0000

Nice one, Mark! I like the design - cool looking cheat sheets are so much more fun to use than plain black/white lists.

One thing that comes to mind at first glance is maybe adding "unless" to the control structures, because a lot of people are not aware that there is a negation of "if", so they use:

{% if something %}
  // empty
{% else %}
  // this is what i really wanna do
{% endif %}

Maybe you can think about putting the source of the cheat sheet on github, so other people can easily add stuff and send you a pull request.

Cheers, Dennis

Caroline Schnapp commented

Caroline Schnapp — Thu, 15 Oct 2009 16:20:23 +0000

For comments it is:

{% comment %}..... {% endcomment %}

The variant object is used a lot -- by me, anyway. It would be a great addition to list its properties.

It is product.options, not product.option.

Math filters are missing.

Dennis is right: the unless construct is plenty useful.

Capture tag is also useful.

Great that you've inserted images sizes.

Caroline Schnapp commented

Caroline Schnapp — Thu, 15 Oct 2009 16:28:11 +0000

By the way, Mark, fantastic use of negative margin-top on that web page. You know your CSS and you are a great designer. This page looks great. Thank you!

Mark Dunkley commented

Mark Dunkley — Fri, 16 Oct 2009 03:00:48 +0000

Good idea about github Dennis, let me think about it. Will add the unless construct in the next push.

Caroline, you're right about the comments and product.options. Math filters will be added in next push. Capture tag is definitely missing.Thanks for the kind words Caroline, hopefully I will be a fraction of the developer you are one day.

I uploaded a new version ( http://cheat.markdunkley.com ). I am adding a tooltips to each of the properties. When you hover you will see a descripion of the property and when you click on it you will see an example (look at the first three filters). Obviously I need more time to add more info to the properties and the styling/javascript needs a lot of work.

Kerri commented

Kerri — Fri, 16 Oct 2009 06:22:53 +0000

Thanks for this Mark. Very helpful.

Mark Dunkley commented

Mark Dunkley — Sun, 18 Oct 2009 22:13:15 +0000

Did a quick update: http://cheat.markdunkley.com/

New liquid layout
wiki links/top right links
added description for every property and all filters have examples

I am still missing a few properties and I need to tweak the liquid layout code for anyone running a 1024x768

nes & lulu commented

nes & lulu — Tue, 20 Oct 2009 20:55:18 +0000

I nominate Mark Dunkley for the Nobel Peace Prize.

This is some awesome work.

Underground commented

Underground — Wed, 21 Oct 2009 14:59:20 +0000

This is fantastic

Thanks

Ss commented

Ss — Fri, 23 Oct 2009 16:28:15 +0000

Very dope, you are the king!

Thanks

Julene commented

Julene — Sun, 25 Oct 2009 16:08:54 +0000

Mark,

Is there a variable I can use in my collection page titles to print the page current number? Google balks at the fact my page, 2, 3 etc. all have the same title so I just want to dynamically add "Page 2" and so on into the title tags....

Can't find it on the sheet sheet but there must be one, right?

Mark Dunkley commented

Mark Dunkley — Sun, 25 Oct 2009 18:07:58 +0000

Julene,

Check out the page.title template object. So in your title tag put something like:

<title>{{ shop.name }} - {{ page_title }}</title>

Julene commented

Julene — Sun, 25 Oct 2009 18:15:10 +0000

Mark, I'm already doing this:

{% when 'collection' %}
<title>{{ page_title }} &#124; {{ shop.name }}</title>

But what I want to do is also insert the page number:

{% when 'collection' %}
<title>{{ page_title }} &#124; Page {{ page_number }}  &#124; {{ shop.name }}</title>

Thanks...

Mark Dunkley commented

Mark Dunkley — Sun, 25 Oct 2009 18:27:53 +0000

You can use: collection.id

However, doing this will have no impact on your Google rankings. If anything it will just dilute the value of your title tag. It is also not useful to your users to see an arbitrary number.

Julene commented

Julene — Sun, 25 Oct 2009 18:36:24 +0000

Hmm that does not sound good.

So, Google Webmaster Tools point this out as an HTML suggestion:

Pages with duplicate title tags:

Present By Design - Jewelry

/collections/jewelry/collections/jewelry?page=4

My reading was that they don't want to see duplicate titles for pages, which is what happens with collection pagination.

Any other suggestions, or am I reading what they are saying wrong? Just trying to make the Google happy :)

Mark Dunkley commented

Mark Dunkley — Sun, 25 Oct 2009 18:47:56 +0000

What you are asking makes sense now! I didn't know you were using pagination.

I can't remember 100% the output, but you could try: paginate.current_page

Julene commented

Julene — Sun, 25 Oct 2009 19:19:38 +0000

Got it! Thanks for the hint.

{{ current_page }}

Jamie commented

Jamie — Fri, 30 Oct 2009 14:25:41 +0000

Just noticed you're missing all conditionals Mark. "unless" "else" "elsif" etc...

-Mark commented

-Mark — Mon, 02 Nov 2009 00:35:01 +0000

link_to_add_tag

and

link_to_remove_tag

are the same (contain the same example code and explanantion).

Mark Dunkley commented

Mark Dunkley — Mon, 02 Nov 2009 13:00:00 +0000

Thanks for the feedback guys! I am hoping to push an update sometime this week.

Jamie commented

Jamie — Wed, 11 Nov 2009 22:43:44 +0000

Missing the filters 'includes' and 'contains'

Mark Dunkley commented

Mark Dunkley — Thu, 12 Nov 2009 02:51:33 +0000

Keep it coming :)

Stuart Whitman commented

Stuart Whitman — Thu, 12 Nov 2009 09:13:42 +0000

Hi Mark,

Be good to have the forloop helper variables.

e.g. forloop.first, forloop.last etc.

Is there anyway this can easily be printed out? If not I may try and do some work wwith it when I have some spare time ;)

Cheers

Stuart

Mark Dunkley commented

Mark Dunkley — Thu, 12 Nov 2009 14:22:08 +0000

I tried creating a print.css stlyesheet, but I am having difficulty getting the columns and the print preview to play nice.

There are rumors that we might even get a cheatsheet printed out on a poster/nice paper.

Stuart Whitman commented

Stuart Whitman — Thu, 12 Nov 2009 15:29:38 +0000

Yes I tried converting it to PDF and all the ones I used didn't like to play :(.

Did manage to save screen as PNG and then convert to PDF but it's too small to be useable.

Jamie commented

Jamie — Thu, 12 Nov 2009 16:32:59 +0000

If you need printing..... hint hint

I tried making my own print stylesheet with similar results.

Mark Dunkley commented

Mark Dunkley — Sun, 15 Nov 2009 23:54:40 +0000

Did a quick update:

New header (more space)
Added forloop helpers
Added unless logic statement

Missing the filters 'includes' and 'contains'

@Jamie Did you see these filters in the wiki? Conditionals added inside of the "if" statement block.

I didn't fix link_to_add_tag and link_to_remove_tag because I want to double check with a Shopifier to make sure I have it right.

renobird commented

renobird — Mon, 16 Nov 2009 16:22:56 +0000

Mark,

Thanks for the cheat sheet - I use it all the time - much appreciated.

Just stumbled on an old thread that yielded a real (I think still undocumented) gem: current_tags

http://forums.shopify.com/categories/2/posts/20554#comment-31076

Might make a good addition.

Jamie commented

Jamie — Mon, 16 Nov 2009 19:18:57 +0000

@Mark No those are undocumented unfortunately. Dennis through out includes in a thread on the support side, not sure which one, and contains I use frequently, but have never seen it mentioned anywhere...

Jamie commented

Jamie — Mon, 16 Nov 2009 20:14:54 +0000

I went looking for that post and came up dry. You need to ask Dennis about 'includes'.

Caroline Schnapp commented

Caroline Schnapp — Mon, 16 Nov 2009 20:27:51 +0000

and contains I use frequently

includes is an alias for contains in Liquid. Like the Liquid filter handle is an alias for handleize (or vice versa?).

You can just 'enforce'/document the one you use all the time: contains.

contains works with Arrays of Strings and it works with Strings.

Hence, example1:

<!-- If the title of the product contains the string 'kit' in it -->
{% if product.title contains 'kit' %}
<!-- do something special -->
{% endif %}

And example2:

<!-- Example that uses an Array of Strings -->
{% if product.tags contains 'sales' %}
<!-- If one of the product's tags is 'sales' -->
<!-- Add a sale ribbon -->
{% endif %}

Caroline Schnapp commented

Caroline Schnapp — Mon, 16 Nov 2009 20:37:16 +0000

Wow, that cheat sheet is constantly getting awesome-r.

Stuart Whitman commented

Stuart Whitman — Mon, 16 Nov 2009 22:06:08 +0000

Hi Mark,

Thanks for the update. I think the times and divided_by filters need to be added although they don't show up on the Wiki yet either. Excellent work, it's now always open in one of my browser tabs.

Mark Dunkley commented

Mark Dunkley — Fri, 20 Nov 2009 03:26:22 +0000

Thanks for the feedback guys!

I am getting ready to push the last major update for the cheat sheet. So if there is anything else you wish was on here or would like to see another section speak up now :)

Caroline Schnapp commented

Caroline Schnapp — Fri, 20 Nov 2009 03:34:13 +0000

variant object please!

Caroline Schnapp commented

Caroline Schnapp — Fri, 20 Nov 2009 03:34:52 +0000

current_tags (array) in global objects (for collection pages)

Mark Dunkley commented

Mark Dunkley — Sat, 21 Nov 2009 03:51:40 +0000

http://cheat.markdunkley.com/

You can now make your own cheat sheet by moving stuff around. Click the "Edit Mode" button right next to the logo.

I will get around to everyone's feedback in the next revision. I edited the first post of this thread with a summary of the changes that will be made.

Thanks to John Tajima for helping me build the cookie array.