Docs
Developers

Custom CSS and code

Custom CSS and code in Highlight: where to add CSS or Liquid without editing theme files, custom fonts, and what survives a theme update.

Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.

This page lists the places where you can add your own CSS, HTML or Liquid to Highlight without editing theme files, and what happens to that code when you update the theme.

Krown support does not provide help with custom code. Krown support can tell you where a setting is, but does not write, review or debug CSS, Liquid or JavaScript. See Custom work and code changes.

Custom CSS for the whole store

Add it in Theme settings → Custom CSS. This field is a Shopify feature that every theme has, not a Highlight setting. CSS in this field applies to every page.

Shopify limits it to 1,500 characters and does not allow @import, @charset or @namespace. See Adding custom CSS to your theme in the Shopify Help Center.

Custom CSS for one section

Use the section's own Custom CSS field, at the bottom of the section settings in the theme editor. The CSS applies only to that section on that page. Shopify limits it to 500 characters and allows only the @media, @container, @layer and @supports at-rules.

HTML or Liquid on a page

Use the Custom HTML / Liquid section or the Custom Liquid block. Both are part of Highlight and need no file edits.

  • The Custom HTML / Liquid section adds a full area to a page, with an optional heading and full width. Add it with Add section. See Custom HTML / Liquid section.
  • The Custom Liquid block adds code inside a Card of the Flex cards section or a Text card of the Flex grid section, next to other blocks. See Custom Liquid block.
  • The product page has a Custom HTML / Liquid block of its own, for code next to the product information. See Product page.

Code in the head of your store

Highlight has no theme setting for code in the <head> of the page, such as verification tags or tracking scripts. Use an app instead, as described in Insert code into your store's head. Many tracking tools also offer a Shopify app embed, which you turn on in the theme editor under App embeds.

Can I use a custom font in Highlight?

Not with theme settings. The Headings, Body and Testimonials fonts in Theme settings → Typography offer the fonts of Shopify's font library only. Highlight does not support uploading your own font files in the theme editor.

A custom font needs two changes to the theme code:

  • The font has to be loaded with an @font-face rule or a Google Fonts link.
  • Highlight's font variables in snippets/head-variables.liquid, written from the Typography settings, have to point to it.

Krown support does not provide these changes, and you must repeat them after each theme update. See Custom work and code changes. To choose among the available fonts, see Typography theme settings.

For a developer: a font file uploaded to Shopify admin → Content → Files is referenced in Liquid with the file_url filter, not asset_url. asset_url points to the theme's own assets folder.

Is my custom code kept when I update Highlight?

It depends on where the code is:

  • Custom CSS in Theme settings or in a section, and the code in Custom HTML / Liquid sections and Custom Liquid blocks, are settings. Shopify carries them over to the updated theme. The code can still stop working if the new version changes the HTML or class names that it targets, so check it after each update.
  • Edits to theme files (Shopify admin → Online Store → Themes → … → Edit code), such as a custom font, are carried over only when they do not conflict with the update. Otherwise you must copy them into the new version yourself.

See Update Highlight.

How do I undo a change I made to a theme file?

Roll it back in the code editor: Shopify keeps older versions of each theme file. Open the file and choose an earlier version. See Edit theme code in the Shopify Help Center.

How do I tell whether a problem comes from my custom code?

Test the same page in a fresh copy of Highlight, installed from the Shopify Theme Store. If the problem does not happen in the fresh copy, it comes from a code edit or an app in your theme. See Troubleshoot store issues: first steps.

JavaScript events

JavaScript events in Highlight for developers: the krown cart, variant and filter events, KROWN.refreshCart and Shopify standard events.

What's new in Highlight

What's new in Highlight: every release of the theme on the Shopify Theme Store since 2021, with its date and links to the release notes.

On this page

Custom CSS for the whole storeCustom CSS for one sectionHTML or Liquid on a pageCode in the head of your storeCan I use a custom font in Highlight?Is my custom code kept when I update Highlight?How do I undo a change I made to a theme file?How do I tell whether a problem comes from my custom code?Related pages