Editing Code In Custom Fields

High Level Overview

Sometimes a quick overview can save loads of head-scratching. Here are the highlights. Additional details can be found below.

  • At the most basic level, Custom Fields are Metafields.
  • Custom Fields is a fancy wrapper around the Metafields API. Data is stored in Metafields.
  • Because Custom Fields are Metafields, anything you can do with Metafields, you can do with Custom Fields.
  • Custom Fields provides templates that help with the display of field data. Customize them. Use them if they help. Ignore them if they don't.
  • You can call on the data directly, (see Full Metafield path in the screenshot below).
  • You can call templates on your own too. Generate a template and view the Theme Info, example: {% render "custom_fields.products.example_text" %}
  • We don't automatically generate templates anymore. Delete the old ones if they're annoying. 
  • Our Display system is optional. Use it if it helps. Ignore it if it doesn't.
  • You can move the Inner Area display in your templates. We try to put it somewhere helpful.
  • All field or Widget templates are rendered in order (if they're enabled) in a single template. That one template is not currently editable.
  • You can move the Full Width (Section) in your templates. We try to put it somewhere helpful.
  • Widgets are theme-independent. Nothing is stored in the theme itself, except placement in the Theme Editor.
  • Widget template code and CSS is a starting point. Change it if you want.
  • Something missing? Let the support team know. They're actually helpful.

Getting Started

  1. From the left sidebar, click on the area you're interested in, such as Products.
  2. Click on Configure.
  3. Hover on the field or Widget and click on the Edit Code icon.

If you've never placed the field in your theme, the app will not have any code to show. Click on Create Now under the More Actions menu. Note, generating a template does not make any changes to the front-end of your store until the field or Widget is placed using the Display page.

Once code has been generated, the editor appears. See below.

Theme Switching

Code can be edited on a per-theme basis. The "Selected Theme" dropdown shows all themes in your store. This system makes it possible to test code in a different theme before launching to the live theme. Check the More Actions menu for additional options for working with different themes, including moving theme files from theme to theme, and copying theme files from one theme to another.

Code Editing Options

When code is displayed in the code editor, it is loaded directly from your theme. Editing code can be done from any place the code can be found. Edit in the app, in the Shopify Theme Editor, or via Themekit on your local machine. 

DIY Coding & Templating

All code and templates are provided by the app as a convenience, not a requirement. Raw data is stored in Shopify's Metafields and is available to themes or other apps at the "Full metafield path" under Theming Info.  

Automatic Template Generation

Templates are only generated when enabled on the Display page. The app no longer automatically generates templates each time a field is created. Deleted templates will not be automatically regenerated. 

Full Width Section vs. Inner Area 

A field or Widget can be placed via the Display page in either a Section or the Inner Area. There is only one template per theme per field or Widget. The same template will be called regardless of how it is displayed. 

Notes on Widget CSS & Javascript

When using a prebuilt Widget, the app will generate the needed CSS and Javascript for the Widget and call it in your theme when the Widget is placed on the Display page or in the Shopify Theme Editor.

CSS

The first time a Widget type is used, the app will add CSS to the custom-fields.css file in your theme. For example, placing an accordion using the Display page would generate the CSS for an accordion. Once the code is generated for a Widget type, it will not be updated by the app. Feel free to change the code to suit your needs. 

Javascript

Javascript for Widgets in the app is not editable in code. The most common settings are available on the Configuration page for the widget itself. 

If the settings do not cover your needs, simply remove the cf-init class from the widget template HTML to stop the app's javascript from firing. From there, any javascript library can be used.