Kermode

/ˈkɜːrmoʊd/
The Spirit Bear

Written by Gray Gilmore

I make websites for a living. I love CSS and building simple and modular stylesheets. Somewhere along the way I also turned into a Ruby developer. Life comes at you fast I guess. You can read my resume to learn about my journey so far.

You can find me as @graygilmore on several platforms:

Good ol' fashion email works, too: hello@kermode.co

You can subscribe to this blog via RSS: XML, JSON

Automatic borders for your Shopify theme

Adding options to your Shopify theme just for borders adds unnecessary complexity for your users. Generally, borders are used to separate two sections that have the same background color. Fortunately, we can do this automatically with Shopify’s liquid language.

As an example, let’s say you want to add a border between the header and the main content of your theme but only if their backgrounds matched. This is what you would do:

{% assign headerClass = '' %}
{% if settings.background-color == settings.header-background-color %}
  {% assign headerClass = 'show-border' %}
{% endif %}

<header class="{{ headerClass }}">

Because both settings.background-color and settings.header-background-color return a string, we can simply compare them. If both of the string are identical, we’ll show a border.

Then in our CSS, all we need to do is hook into our newly defined class:

.show-border {
  border-bottom: 1px solid #ccc;
}