Missing CSS and Javascript for Widgets

Overview

Occasionally the Display system may not be able to properly add the CSS and Javascript to your page when you first set up a Widget. When that happens the page will render with data but the styling will not look like the Widget.

Issue

The Display system looks for the <head> tag in your theme's theme.liquid file and injects a few lines of code right before the closing head tag: </head>. If your theme.liquid file does not have the head tag or if another app has made changes to the head the app may not be able to inject the lines safely.

Resolution

Add the following lines to the HTML head. Ideally, these would be the last lines before the closing tag.

{{ 'custom-fields.css' | asset_url | stylesheet_tag }}
<script src="{{ 'custom-fields-widgets.js' | asset_url }}" defer="defer"></script>