Automatic borders for your Shopify theme

Written on April 14, 2014

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;
}