list-collections.liquid is fixed!

The list-collections.liquid bug has been fixed!

anchorman-jump

I will be starting the Shopify Theme from Scratch tutorials again ASAP. I should have Part 10 out this week.

\(^0^)/

Waiting on a fix

There is going to be yet another delay for the Shopify Tutorial from Scratch series, due to an ongoing bug with the list-collections.liquid template which I want to cover in Part 10.

What’s wrong?

The issue right now is that the template that is used for the collections listing page, aka. list-collections.liquid, does not load properly. When you go to your-shop.myshopify.com/collections, it’s supposed to load the contents of list-collections.liquid; but currently it does not.

The only way to have content appear on /collections is by creating a snippet, and then checking for the template handle in theme.liquid as follows:

{% if template == 'list-collections' %}
  {% include 'collection-listing' %}
{% else %}
  {{ content_for_layout }}
{% endif %}

This works but we shouldn’t have to do this. I want to make sure my tutorial doesn’t include any unnecessary workarounds.

The awesome devs at Shopify are aware of the issue and are working on a fix. I really want to publish Part 10: list-collections.liquid tutorial before I move on to customer accounts because it just makes sense from an order point of view.

Apologies again for the postponing :(

tetchi

No tutorial this week

Sorry everyone, just running into a bunch of roadblocks this week :( I won’t be able to have Part 10 ready until next week.

shrek cat

Super sorry!

One of the reasons is that we’re looking to make “list-collections.liquid” (i.e the /collections page) an actual template, so that we don’t have to load it through hacks. I want to make sure Part 10 outlines this process properly. If this doesn’t get implemented by next week, I’ll go ahead with the customer accounts pages before list-collections.liquid.

- tetchi

Shopify Theme from Scratch Part 9: search.liquid

part9_banner

In Part 9 of the Shopify Theme from Scratch series, we’re going to be the search.liquid template, where customers can search through a shop for products, pages, and blog articles.

Let’s gitter done! Head on over to “yourshop.myshopify.com/search” to see your search page.

Shopify Theme from Scratch Part 8: article.liquid

part8_banner

Once a user clicks on an article listed on the blog.liquid template, they are taken to the article.liquid template. The article.liquid template is where the full article is shown. Users also have the option to leave comments to articles through this template.

Let’s butter some biscuits!

Shopify Theme Settings: Assigning colours dynamically using SASS

Last week I attended CSS Conf in Florida, and one of the coolest things I learned there was a technique that Tim Hettler shared in his presentation (his awesome presentation can be found here). The technique involved using SASS to dynamically assign colors to a text depending on the background-color of the button.

So I thought to myself, “hmm… now that we can use SASS in Shopify themes, I wonder if I can somehow tie this technique into Shopify’s Theme Settings…?”. Lo and behold, it worked like a charm! I think this could be really useful to prevent users from unknowingly choosing unreadable text (ex: white text on white background).

Here’s a quick video demonstration:

The text colour changes depending on the selected colour of the background. No more unreadable text!

The code for it fairly simple. It is based off this part of Tim’s presentation. In a nutshell, what we’re doing here is checking the lightness of the selecting theme setting colour ({{settings.btn_colour }}), and assigning either #333 or #fff for the text colour depending on the value of the lightness. Here’s a quick example:

/* assigning color selected thru theme settings to variable */
$color: {{settings.btn_colour}};

/* function for checking the lightness of theme setting color */
/* if lightness is below 50, apply #333, else apply #fff */

@function get-button-color( $color ) {
  @return if( lightness( $color ) > 50, #333, #fff );
}

/* apply colors*/
.btn{
  background-color:$color;
  color: get-button-color($color);
}

Hope this was helpful! Shoutouts again to Tim Hettler for showing me this technique :)

THE END

Shopify Theme from Scratch Part 7: blog.liquid

part7_banner

This week we’re going to work on the blog.liquid template, where the articles that you write in the “Blog posts” page of the admin are listed.

Let’s dooo this!

Japan Trip 2013

japan trip 2013

Fukuoka –> Osaka –> Kyoto

Last week I flew out to Japan to attend my cousin’s wedding. I’ve been to Japan many times before, but this trip was different in that I went to three cities that I’ve never been to before: Fukuoka, Osaka and Kyoto.

No tutorial next week!

Hello! Just a heads up that I’m going back to Japanland next week, so I won’t be posting Part 7 next Monday.

kyoto-japan

Kyoto, Japan – image courtesy of Hala Kazim

I’ll be heading to Fukuoka, Japan for a cousin’s wedding, then heading to Osaka, Kyoto, and a bit of Tokyo. I excite!

- tetchi

Shopify Theme from Scratch Part 6: cart.liquid

part6_banner

The cart page is where a list of all the products that a customer has added to the cart is displayed. Usually the products are displayed in a tabular format.

Let’s get started!