Code Editor requires your account to be on the Uscreen Plus plan. If you're not currently on the Uscreen Plus plan, please get in touch with sales@uscreen.tv to upgrade.
Liquid Templates and Snippets can be added to help you extend existing pages or build Custom Pages for your site.
Templates are full layouts and customizations used to build Custom Pages.
Snippets are reusable pieces of code that can be included in a Template to avoid re-creating the same piece on every page. Examples: header, footer, top navigation bar.
NOTE: Before working in the Code Editor, it is strongly recommended that you create a backup of your theme under Website → 3-dot menu → Duplicate
To start, you’ll need to access the Code Editor, under Website → 3-dot menu → Edit Code. Once there, you’ll see Templates (1) and Snippets (2) in the left column.
To create a new Template or Snippet for use with a Custom Page, you’ll click the +New File button at the top right of the page:
The New File screen will come up. You’ll need to enter a name and select liquid as the File Format.
NOTE: Naming the file correctly is important
If you include an underscore before the name, it will be automatically created as a Snippet. Example: “_snippet-name”
If you do not include an underscore before the name, it will be created as a Template. Example: “template-name”
Once you click Create New Template or Snippet, you’ll be brought to the Code Editor with your new template in the edit box. See the image below where the template-name and the _snippet-name files were automatically assigned to the correct section.
Liquid documents accept Liquid, Javascript, HTML, and CSS natively.
If you’ve created a Snippet, you can include that snippet in an existing liquid template (or another snippet) by adding the code below in place where you’d like it to appear. You'll use the following format:
{% include 'snippet-name' %}
You would replace snippet-name with the name you chose for your snippet but don't include the underscore. In the example image below, the snippet is placed to appear below the Header section of the home page (index):
If you’ve created an entire Template, you can apply it to a Custom Page under Customization > Pages > New Page. Set up the new page and choose your new template at the bottom before clicking Create New Page.
In this example, the page created was titled New Page, with the URL https://uscreen-test.com/pages/new-page
If you want your new page to show up in Google search results, you’ll need to add it to the _seo.liquid snippet.
You'll want to copy the code just below and paste it underneath the {% when “progam” %} section at the top of the _seo.liquid snippet, then edit it the name, as discussed in the note just below the code:
{% when "new-page" %}
<title>{{ page.meta_title | escape }} | {{ storefront.title }}</title>
<meta name="description" content="{{ page.meta_description | strip_html | escape | truncate: 195 }}">
NOTE: You would replace the term "new-page" on the first line with your name for the Page URL above, still in quotes.
Once your template is ready and the new page is created and set up, you can check the Show on site checkbox to make your new page live on your site!
Your page is now ready to be viewed by your customers. You can add a link to the new page in your Navigation menu or as a link anywhere on your site.
NOTE: The code editor, code snippets, and custom HTML blocks do not affect native apps. To learn more about native apps customization, please check this help guide.