Shopify Tutorial: Easy Captions for Images in Blog Posts and Pages using Alt Text
In this tutorial, we’re going to write some script that will automatically generate captions for images on blog posts and pages in Shopify using the image’s alt tag.
I wrote this quick tutorial because I was seeing a lot of questions in the forums about how to captions to blog posts. Instead of having customers add captions manually (which would require knowledge of HTML/CSS), I think this method is a lot easier as you can just insert alt text to images through the RTE.
You can see a demo of this here.
How it works
The script works by checking the alt text of every image in a blog article of page. If that image has an alt tag, the script will wrap the it in an <figure> tag and append a <figcaption> tag containing the alt tag of the image.
We’re also going to be adding some nice theme settings to spice up the captions 
Let’s get started!
Shopify Tutorial: Limiting Storefront Search to Certain Product Types
In this tutorial, we’re going to be adding a dropdown to a shop’s search bar that will limit search results to certain product types. You can see a demo of this here. As an example, try selecting “kicks” under product type and searching for “gnarly”. Notice that only products with the type “kicks” are returned in the search results!
Let’s get started!
Reading is Fun \(^0^)/
These past couple of months, I’ve been obsessed with reading. This is really strange for me because I was never that into reading before. On average, I’d read one or two books a year. For some reason I started to read like a fiend, and I want to share some of the books that I’ve read in the past month or two.
Liquid’s Capture Tag and Numbers
This post is not a tutorial, it’s more of a note for myself that I can refer to in the future.
In Liquid, when you use the {% capture %} tag, the variable that you capture becomes a string. As such, if you’re setting up a counter like in the example below, you must apply a math filter on it after to convert it back into a float/integer.
{% assign num = 0 %}
<!-- num is still a number at this point -->
{% for product in product.collections %}
{% if product.tags contains "special" %}
{% capture temp %}{{ num | plus: 1 }}{% endcapture %}
{% endif %}
<!-- at this point, temp becomes a string -->
{% assign num = temp %}
{% endfor %}
<!-- Apply a math filter to num to convert it back into a number so you can use numerical operators on it -->
{% assign num = num | plus: 0 %}
{% if num > 5 %}
You have more than 5 special products, hooray!
{% endif %}
Thanks as usual to Caro for showing me the ways!
THE END
Shopify Tutorial: How to Create a Part Picker Form
In this tutorial we’re going to be making a parts builder form. It’s an extension of the Order Form that I created a while back. It works by listing single-option products in a table with each variant listed as a radio button.
You can see a demo here.
Shopify Tutorial: Adding a Tip or Donation to the Cart page
This is a quick tutorial to show you how to add a field for donations on your cart page. It works by adding a product worth $0.01 multiple times via AJAX.
You can see a demo of this here (you’ll have to add a product in the cart first).
Let’s get started!
Spins & Needles Revisited
Last Sunday I went to silkscreen workshop by Spins & Needles with buddies David and Theresa.
I went to their workshop last year as well, but I wanted to go again because frankly I didn’t remember the silkscreen building process and I had a new design that I wanted to silkscreen.
This time around I decided to use the Tetchi dog that I had been working on (last time I used the Move Your Mountain logo.
The dots on his hat were really fine so they didn’t come out so well, but man whatever…
I also played around with some red ink, I actually kinda like red-on-white more…
Twas a lotta fun and if you’re interested in making silkscreens I definitely recommend checking out Spins & Needle’s workshop! Also let me know if you want a Tetchi Dog shirt!
B-Side Label & Foo Rider
During my trip to Japan last month, my friend Rachel and I stumbled across this funky sticker shop called B-Side Label in Harajuku.
One artist that really stood out for me was FOORIDER. Man, his work is just AMAZING!! I really like how clean/crisp his vectors are. The way he draws girls is pretty rad – it’s kind of like a mix between manga and pin-up art.
What’s cool is that he also does a mix of hip-hop and traditional Japanese art as well. You can see more of this in his gallery, here.
I’ve slapped some of B-Side Label’s stickers onto my bass guitar case, which is filling up quite nicely!
Anyway just thought I’d share one of my coolest finds on my Tokyo trip. fooRider-san, if you’re reading this, you have a new big fan!