Accessing transaction data in a Shopify email notification

Recently I needed to add a line to the Shopify Order Confirmation email that included the last 4 digits of the credit card used. This was more difficult than it needed to be, so I’m writing this post in hopes it’ll rise to the top in Google and help others trying to do the same thing.

TL;DR

You need to access the transaction object through a collection of transactions, like so:

{% for transaction in transactions %}
{{ transaction.payment_details.credit_card_number }}
{% endfor %}


This was stupidly difficult to track down. First, I went to the email variables article that’s referenced when you’re editing a notification. There, it states:

Notifications have access to every transaction property. Please see our Transaction API documentation here for a full list of the properties.

So I checked out that article, which didn’t help at all. Dead end.

After a few more searches, I finally found this thread in the forums that addressed my problem exactly. Reading through some of the comments, I thought I had hit another dead end, until I read the last comment in the thread, which pointed me to the thread that answered my question. Thanks to Mikkel Jakobsen for tracking down the answer!

Showing multiple currencies in Shopify

We’ve been getting a lot of emails lately from people asking what the DIY Stitch People book costs in their currency (GBP, AUD, etc). We normally just head to Google, grab the latest exchange, and reply to the email with the result. Today I decided to fix that process.
After some searching, I found the article I needed: Showing multiple currencies in a drop-down list on your storefront

It’s pretty straightforward if you know what you’re doing with Shopify theme files. If you follow the instructions in that article, you’ll end up with a currency dropdown in your header. I didn’t love the placement, so I took it a step further and put the currency dropdown right next to the display price:

Screen Shot 2015-02-10 at 7.41.50 PM

To get this, you just need to tweak where you’re including the snippet. To get it in the header, the article asks you to put it in theme.liquid. I instead put it on the product page, product.liquid, below the price (and outside of the span that contains the price):

<span class="current_price">
 {{ product.price | money }}
</span>

// Add this code
{% if settings.show_multiple_currencies %}
  <span class="currency_switcher">
    {% include 'currencies-switcher' %}
  </span>
{% endif %}

Then I just added some CSS (style.css.liquid) to get the dropdown sitting next to the price (but not too close):

.currency_switcher {
  display:inline-block; 
  margin-left:0.7em;
}

The result gave me that currency dropdown box right next to price, which I think is much more visible than having it buried in the header.

Shopify Theme Development Workflow

I started building my first Shopify theme in December and have figured out a basic workflow that is working pretty well so far. This basic walk through will explain the basics of using Foundation, Grunt, and the Shopify theme CLI to create a new theme.
The basis for starting was Foundationify, a skeleton Shopify theme built with the  Zurb Foundation framework. Included in Luke’s project is Grunt and Bower, with a  Gruntfile that builds the final project into the appropriate folders needed for a Shopify theme. The real benefit to using Grunt is that you can use something like Foundation and SASS, and let Grunt compile and minify everything down into the files needed for Shopify.

Pair that with with the shopify_theme CLI, which lets you auto upload any changed files to your test shop, and you’ve got all the tools you need. To get the CLI working, you’ll need to generate private keys for your dev shop (go to {shop url}/admin/apps/private) and use the keys to connect the CLI to your shop.

With all this set up, just run ‘grunt watch’ in one terminal window (from your new theme’s root directory), ‘theme watch’ in another (from the dist folder, to which all the final files are written by Grunt), and any changes you make and save to any file with be automatically processed and output properly into dist. Then the shopify_theme CLI will look for changes in the dist folder and upload them immediately. Depending on the file(s) you’re changing, it takes just a few seconds for the change to appear live on your test site with a browser refresh.

At the time of writing, not all the available template files that can be customized are included in the Foundationify project–specifically the customer templates like the customer login page. You’ll probably want to check out the Theme documentation for more details on the templates you can customize.

As always, you should include version control in your workflow as well. I use git, and for projects like these I usually push to a private Bitbucket repo.

If you’re looking for a Shopify theme developer, let’s chat. I’m located in Utah, can work remotely, and even run a Shopify site of my own with my wife (check out Stitch People). Feel free to get in touch via my contact form.

Liquid Form Tag & Types in Shopify

I’m working on a custom Shopify theme and was trying to figure out what the options for the Liquid form tag were. I couldn’t seem to find any documentation, but found a list of options when I tried changing the form type parameter to something different. I got the following error:

Liquid error: invalid form type “customer_login_testing”, must be one of [“activate_customer_password”, “contact”, “create_customer”, “customer”, “customer_address”, “customer_login”, “guest_login”, “new_comment”, “recover_customer_password”, “reset_customer_password”]

I had seen a lot of these used in different template files, but I hadn’t seen an exhaustive list of the form types. Here it is in list form:

  • activate_customer_password
  • contact
  • create_customer
  • customer
  • customer_address
  • customer_login
  • guest_login
  • new_comment
  • recover_customer_password
  • reset_customer_password

It’s used like this:

{% form 'customer_login' %}
// Form variables go here
{% endform %}

If you know where the official documentation is, let me know in the comments.