d
Topic
Posts:
320
Last edited December 13, 2012

Shopify Cheat Sheet This post is outdated

Shopify Cheat Sheet

This is a cheat sheet for Shopify. If you have any requests or there is an error let me know.

 

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
i
Replies
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
October 15, 2009

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)

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
320
Last edited October 15, 2009

Great idea Jamie :)

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Dennis Theisen Shopify
Posts:
49
October 15, 2009

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

Developer
Posts:
5840
Last edited October 15, 2009

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 from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
5840
October 15, 2009

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!

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
320
October 16, 2009

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.

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Kerri Shopify Partner www.wildopals.com
Posts:
7
October 16, 2009

Thanks for this Mark. Very helpful.

www.wildopals.com
Posts:
320
October 18, 2009

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

  1. New liquid layout
  2. wiki links/top right links
  3. 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

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
62
October 20, 2009

I nominate Mark Dunkley for the Nobel Peace Prize.

This is some awesome work.

Nes & Lulu http://seductiondepot.com
Posts:
37
Last edited October 21, 2009

This is fantastic

Thanks

Richard We are Underground
Ss Shopify Expert www.reconfigure.ca
Posts:
93
October 23, 2009

Very dope, you are the king!

Thanks

http://reconfigure.ca
Posts:
79
October 25, 2009

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?

Gifts for Life’s Celebrations http://www.presentbydesign.com/
Posts:
320
Last edited October 25, 2009

Julene,

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

<title>{{ shop.name }} - {{ page_title }}</title>
I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
79
October 25, 2009

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...

Gifts for Life’s Celebrations http://www.presentbydesign.com/
Posts:
320
October 25, 2009

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.

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
79
October 25, 2009

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

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 :)
Gifts for Life’s Celebrations http://www.presentbydesign.com/
Posts:
320
October 25, 2009

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

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
79
October 25, 2009

Got it! Thanks for the hint.

{{ current_page }}
Gifts for Life’s Celebrations http://www.presentbydesign.com/
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
October 30, 2009

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

http://shopifyplus.com ::: http://twitter.com/bacchus
-Mark Shopify Partner blog.granitelady.com
Posts:
113
November 02, 2009

 

link_to_add_tag

 and

link_to_remove_tag

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

 

 

Shopify sites in progress: http://markhostcoins.com :: http://adirondackwallart.com :: Shopify link resource: http://shopify.zoothemes.com
Posts:
320
November 02, 2009

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

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
November 11, 2009

Missing the filters 'includes' and 'contains'

:)

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
320
November 12, 2009

Keep it coming :)

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
309
November 12, 2009

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

Stuart Whitman http://stuartwhitman.co.uk + http://wiki.shopify.com/Stuart_Whitman + http://twitter.com/stuartwhitman + http://hookedonshopify.com
Posts:
320
November 12, 2009

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.

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
309
November 12, 2009

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.

Stuart Whitman http://stuartwhitman.co.uk + http://wiki.shopify.com/Stuart_Whitman + http://twitter.com/stuartwhitman + http://hookedonshopify.com
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
November 12, 2009

If you need printing..... hint hint

 

I tried making my own print stylesheet with similar results.

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
320
November 15, 2009

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.

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
renobird Shopify Partner
Posts:
3
November 16, 2009

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 Chief Officer of Funness shopify.com/plus
Posts:
5852
Last edited December 01, 2009

@Mark No those are undocumented unfortunately. Dennis threw 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...

http://shopifyplus.com ::: http://twitter.com/bacchus
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
November 16, 2009

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

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
5840
November 16, 2009

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 from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
5840
November 16, 2009

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

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
309
November 16, 2009

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.

Stuart Whitman http://stuartwhitman.co.uk + http://wiki.shopify.com/Stuart_Whitman + http://twitter.com/stuartwhitman + http://hookedonshopify.com
Posts:
320
November 20, 2009

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 :)

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
5840
November 20, 2009

variant object please!

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
5840
November 20, 2009

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

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
320
Last edited November 21, 2009

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.

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
10
November 28, 2009

V.handy, been using it all week - thanks Mark.

The variant object would be incredibly useful on there, and probably round off the cheat sheet.

Only other thing, and this is more to do with Shopify's documentation of the function, but link_to_remove_tag probably needs the description and example correcting to show and explain it's function...

I'm only being picky because it's so useful, it's a genuinely useful reference guide. Keep up the good work.

Posts:
320
December 18, 2009

I still have a few more things to go, but I did add variant.objects

Shopify Cheat Sheet

 

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
5840
December 18, 2009

Thanks Mark for adding the variant object!

(Note: for the variant object, the options can also be accessed using variant.options -- it's an array...  and it is super handy.)

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
December 18, 2009

Need the reverse filter in here too, now that the thread has been bumped. I'll try to add it to the wiki tomorrow.

http://shopifyplus.com ::: http://twitter.com/bacchus
Posts:
31
Last edited April 11, 2010

"!-" operator should be "!=" right?

.. I use this sheet a lot, it's great :-)

 

1px of denmark working with strategic web design - www.1px.com - our shop portefolio : http://designerleg.dk - http://shop.magnus.dk - http://blanketter.penge.dk : Private shopify apps - replify™, docfetch™ and notify™
Posts:
5840
April 11, 2010

right!

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
320
April 12, 2010

Fixed. Thanks Fredenslund

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Hop Shopify Partner
Posts:
34
August 25, 2010

Mark - see spelling on the the pluralize filter :)

Posts:
320
October 22, 2010

Thanks Hop - fixed that a while ago.

Updated with theme settings snippets

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Posts:
320
January 14, 2011

Added support for blog.next_article, blog.prev_article, shop.types, shop.vendors, collection.all_types, collection.all_vendors.

I wiill be updating it soon with article.excerpt and article.tags next week when Shopify rolls out the tags + excerpt UI.

I run the online stores SilkArtificial.com and SnapFlyers.com | Shopify cheat sheet cheat.markdunkley.com Follow me twitter.com/markdunkley
Jamie Chief Officer of Funness shopify.com/plus
Posts:
5852
January 14, 2011

shop.types, shop.vendors, collection.all_types, collection.all_vendors

O frabjous day! Callooh! Callay! Kudos to Dennis! Goodbye double pagination bug!

http://shopifyplus.com ::: http://twitter.com/bacchus
pmobley Member
Posts:
6
February 24, 2011

Missing info about pagination. Also missing functions such as json, weight_with_unit. Not sure if there is anything else.

chadie Member
Posts:
2
Last edited March 20, 2011

Can you give a template example of displaying an articles tags?

{% for article in blog.articles %}

<p>testing {{ article.tags }}</p>

{% for tag in article.tags %}

		<p>iterating through: {{ tag }}</p>

{% endfor %}
{% endfor %}

 

 

Posts:
2
April 20, 2011

Still the best ressource for theme creation out there. Thank you for that ! Missing search.results though...

pmobley Member
Posts:
6
May 04, 2011

Bringing up 'contains' again, I just discovered that it appears to be case-sensitive... has this always been the case or has there been an update over the last few days that changed its behavior?

I really wish that 'contains' was clearly defined.  Its the ONLY method of searching possible with liquid.

Posts:
5840
May 05, 2011

contains has always been case-sensitive

What's not case-sensitive are the smart collections' conditions.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
Posts:
2
September 07, 2011

I’m new to Shopify. I found a bug with the 'capitalize' Filter. As an example, I’m using the Themify theme (template 'theme.liquid') and found that the filter was not PROPER casing my {{ shop.name  | capitalize }} string. I upper-cased the 'C' in 'Capitalize' {{ shop.name  | Capitalize }} and the Filter worked as one would expect. Thanks.

 

- Brian

Velin Member velin.dk
Posts:
2
Last edited December 08, 2011

I have just finished my first Shopify template design in your brilliant template system. Using the Textmate bundle felt almost like developing locally.

Learning liquid was made simple and painless, thanks to your fantastic wiki articles and this Cheat Sheet. It really amounts to some of the best documentation I have ever worked with.

Thanks for all the effort you have put into this.

chazthetic Member
Posts:
12
December 09, 2011

Great cheat sheet, I've been using it heavily. The one thing missing on it is the pagination tags.