Using Meta Fields in the Shopify Script Editor

As you know, Shopify recently shifted its Script Editor app from beta to production release. At the moment the app is available only for Shopify Plus users upon request. The Script Editor app is actually a great feature from a developer’s perspective since it can be used to alter or hook into calculations on the cart page.

How the Script Editor App Works

The Shopify Script Editor uses a liquid templating engine which should be familiar to those who have use Ruby language. It basically allows you to create stand-alone scripts that are executed on the Shopping Cart page. Only one script can be published at a time though. The published script is then executed every time cart values are updated. For example when a user hits the ‘Update Cart’ link.

https://docs.shopify.com/manual/apps/apps-by-shopify/script-editor

To use the Script Editor you’ll first need to have the app installed on your Shopify web store. You’ll need to contact your Account Manager at Shopify for that though. Once the app is installed on your web store, you can create, preview and publish your scripts from within the app itself. The Script Editor also supports mocking products as line items.

The scripts written in Script Editor can do a lot of interesting things to shopping cart data. Using meta fields within them however currently requires some workaround, and that’s what we’ll look at in this post.

Meta fields

Meta fields (https://docs.shopify.com/api/reference/metafield) are basically key-value pairs grouped by namespaces. They can be associated with a number of resources including Store or Product. You can create meta fields by using the Shopify API (https://docs.shopify.com/api/reference) or by using one of the available apps in the Shopify AppStore, such as Metafields Editor or Metafields2. Once created, you can use meta fields to add different types of additional information related to the associated entity. For example, size or color options for a t-shirt, etc.

The only catch is that product meta fields are currently not exposed in the Script Editor. They only get carried forward as far as the Product Details page. To work around this, we may use product Properties.

To create or assign properties to any product, you simply need to add html input fields on the product details page like:

<input type=”hidden” name=”properties[discount_value]” />

These properties are then automatically submitted when the product is added to the shopping cart. Product properties can then be accessed on the Cart page and/or in the Script Editor using something like line_item.properties.

Hope you found this post useful.

Blog Post