Using the Snippet Editor

In Custom Fields, the app creates one liquid snippet for each field you create. 

The Snippet Editor feature allows you to edit the default code we provide for each field. You can read more about Shopify snippets here. 

Getting Started

In order to use this feature, you must first have followed the steps in the Basic Installation Tutorial. In this tutorial, you'll need Custom Fields installed for Products, as well as a field to use the editor with.

You can access the Snippet Editor after you create a new field, or by clicking on Edit in the Configure Fields menu. In this example, we are using a field on products.

Configure_Fields.png

Tip: From this screen, you can edit the liquid code directly, edit the Label Name, or exclude the field from display entirely (located under Additional Settings). 

Edit.png

The default code we provide always checks if the field has any value, then it prints the Label Name, and finally the field's value.

It also gives a helpful include statement per field that you can use directly in your theme for any advanced customizations you might want to do.

The Basics 

If you make a mistake, you can revert the code back to the default settings by clicking the check-box Reset to the default liquid template. This will reset the code when you click Update Settings.

Reset.png

Tip: The editor will not allow you to Update Settings if there is incomplete or incorrect syntax in the code i.e. if you forgot to close the liquid if tag. Instead, it will give you an error message explaining what went wrong.

iftag.PNG

How it Works

Every time you create a new field, the app creates a new snippet file in your theme. When you update the snippet in our editor, we update the corresponding snippet in your theme automatically. They follow the namespace convention of "custom_fields.FIELD CATEGORY.MACHINE NAME" 

Example_Of_it_In_Shopify.png

WARNING: Do not edit the Snippet directly in Shopify's theme code. Your changes will be overwritten by the app. Just use the Snippet Editor in Custom Fields instead.

All of the Snippets for all fields are referenced in products.custom_fields.liquid, in the order you set them in the app, which then gets included in product-template.liquid. 

Learn By Example

There are many tutorials written in the Theming Tips & Tricks Section of our documentation. For a deeper example of using the Snippet Editor, see Displaying Product Data in a Table