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>