Recently

See 184 more →

Superhi Shopify Theme Development Course Notes

• Updated Jun 16, 20255 min read

Week 1: Fitra

Set up Shopify + Terminal

  • theme.liquid is the main place where the theme will live; this is a wrapper for all the things
  • When working on this, I need to have terminal open to where the files are (Desktop > Superhi Homework > Shopify > Proj 1), theme watch --allow-live to start the development
  • The goal is to have as many dynamic things in the code as possible, try not to have any hard coded text in the theme, otherwise it’s going to be a bitch to change

Using locales and translations for static text

  • Using JSON validator to clean up the file
  • the string to use the translation filter is {{ group.section.key }} eg: blog.comment.email
  • Use | t to indicate that something is a translatable variable

Marking up the Cart Button

  • Setting up the cart button so that the content is dynamic depending on where the user is, using if statements
{% if template != 'cart' %}
    <a href="/cart" class="link-to-cart">
      {% if cart.item_count > 0 %}
        {{ 'cart.button.filled' | t }}
      {% else %}
        {{ 'cart.button.empty' | t }}
      {% endif %}
    </a>
  {% else %}
    <a href="/" class="link-to-home">
      {{ 'cart.button.close' | t }}
    </a>
  {% endif %}
  • Turns out it’s possible to do <body class="template-{{template}}"> to detect what template page we’re on. This is useful for setting up classes.

Marking up the cart page

  • item.line_price vs item.price: line price references the total of the line items, item price is the price per item
  • Marked up the cart page by updating the table properties, adding the cart item count and adding additional content
<h1>
  Cart
  <span class="cart-item_count">
    {{ cart.item_count }} 
  </span>
</h1>
{% if cart.item_count > 0 %}
<h2>All preorders ship free this March.</h2>
  <form action="/cart" method="post" novalidate>
    <table>
      <thead>
        <th colspan="2">Order Summary</th>
      </thead>
      <tbody>
 
        {% for item in cart.items %}
          <tr>
            <td>
              {% if item.quantity > 1 %}{{ item.quantity }}x {% endif %} {{ item.product.title }} &ndash; {{ item.variant.title }}
            </td>
            <td>
              {{ item.line_price | money }}
              <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">X</a>
            </td>
          </tr>
        {% endfor %}
 
      </tbody>
    </table>
 
    <table id="cart-totals">
      <tbody>
        <tr>
          <td>Shipping</td>
          <td>Free</td>
        </tr>
        <tr>
          <td>Subtotal</td>
          <td>{{ cart.total_price | money }}</td>
        </tr>
      </tbody>
    </table>
 
    <button type="submit" name="checkout">Checkout</button>
 
  </form>
  <p>Any questions?
    <a href="mailto:support@getfitra.com">support@getfitra.com</a></p>
{% else %}
  Cart is empty
{% endif %}

Marking up the Empty Cart state

  • Using arrays so we don’t have to write the same set of code over and over
{{ 'cart.general.empty' | t }}
    {% for i in (1..3) %}
    <div class="empty-line"></div>
    {% endfor %}
  <a href="/">{{ 'cart.general.back' | t }}</a>

Saving Sass variables and base styles

  • This isn’t really relevant anymore now that Shopify no longer supports SCSS. Instead, we use variable CSS within the root so that it applies to the entire stylesheet
:root {
    --color-accent: \#FF3700;
    --white: \#ffffff;
    --black: \#000;
    --text: \#555;
    --selector: \#707070;
    --empty-cart: \#d8d8d8;
    --cart-background: \#979797;
    
    --main-font: 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
    --line-global: 20px;
    --gutter-global: calc(var(--line-global) * 2);
}
  • To use these variables in CSS, we have to start it off as var([variable here])
font-family: var(--main-font);

Best practices

  • Process:
    1. Set up store on Shopify + product
    2. Design first
    3. Create technical blueprint
    4. Mark up liquid files
    5. Style pages
  • If a component is consistently on all pages, it makes the most sense to put it in theme.liquid
  • Be vigilant about using | t to indicate that something is a translatable variable so that it’s easier to change content in a separate json file.
  • Shopify no longer uses SCSS, variable CSS is used instead What to do now that Shopify doesn’t support Sass

Resources

NameDescriptionURL
Getting started with Theme KitTheme Kit is a cross-platform command line tool that you can use to build Shopify themes. To get up and running quickly with Theme Kit, follow the steps in this guide. You have access to a Shopify store. You’re familiar with the basics of the command line.https://shopify.dev/themes/tools/theme-kit/getting-started
The JSON ValidatorJSONLint is the free online validator and reformatter tool for JSON, a lightweight data-interchange format.https://jsonlint.com/
Liquid tagsLiquid tags are used to define logic that tells templates what to do.https://shopify.dev/api/liquid/tags#iteration-tags
Variant propertiesLiquid objects represent variables that you can use to build your theme. Object types include store resources, standard Shopify content, and functional elements that help you to build interactivity. A variant is a product variant like colour, size.https://shopify.dev/api/liquid/objects#variant
Cart objectLiquid objects represent variables that you can use to build your theme. Object types include store resources, standard Shopify content, and functional elements that help you to build interactivity. A cart is the customer’s cart.https://shopify.dev/api/liquid/objects#cart
LocalesLocale files are JSON files that contain a set of translations for text strings used throughout the theme and theme editor. In addition to giving merchants a single place to easily edit words and phrases that are repeated throughout the theme, locale files allow you translate storefront content, and theme editor settings, to multiple langages for international merchants and customers.https://shopify.dev/themes/architecture/locales
Template objectLiquid objects represent variables that you can use to build your theme. Object types include store resources, standard Shopify content, and functional elements that help you to build interactivity. The template object gives you information about the current template.https://shopify.dev/api/liquid/objects#template
Line item objectLiquid objects represent variables that you can use to build your theme. Object types include store resources, standard Shopify content, and functional elements that help you to build interactivity. Line item is a line in a cart, check out or order. Each line item represents a product variant.https://shopify.dev/api/liquid/objects#line_item
What to do now that Shopify doesn’t support SassA guide by Superhi re: using variable CSS instead of Sasshttps://www.notion.so/What-to-do-now-that-Shopify-doesn-t-support-Sass-021344c8368647afa901c9da295b2f9e

Liquid objects

Liquid objects represent variables that you can use to build your theme.
https://shopify.dev/api/liquid/objects#template

Graph View