Custom CSS and code

Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.

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

Custom CSS for the whole storeCopy Anchor Link

Add it in Theme settings → Custom CSS. This field is a Shopify feature that every theme has, not a Seventh 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 sectionCopy Anchor Link

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 pageCopy Anchor Link

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

• The Custom HTML / Liquid section adds a full-width area to a page. Add it with Add section, then put your code in the Custom HTML / Liquid block inside it. See Custom HTML / Liquid section.
• The Custom HTML / Liquid block adds code inside a section or card, next to other blocks. See Custom HTML / Liquid block.
• The Announcement bars section has its own Custom HTML / Liquid block for code in the announcement bar. See Announcement bars section.

Code in the head of your storeCopy Anchor Link

Seventh has no theme setting for code in the <head> of the page, such as verification tags or tracking scripts. Use an app instead. Krown recommends the free XO Insert Code app, 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 Seventh?Copy Anchor Link

Not with theme settings. The Font family settings in Theme settings → Typography offer the fonts in Shopify's font library only. Seventh does not support uploading your own font files in the theme editor.

A custom font needs changes to the theme code, which Krown support does not provide and which you must repeat after each theme update. See Custom work and code changes. To choose among the available fonts, see Typography theme settings.

Is my custom code kept when I update Seventh?Copy Anchor Link

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 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) are carried over only when they do not conflict with the update. Otherwise you must copy them into the new version yourself.

See Update Seventh.

How do I undo a change I made to a theme file?Copy Anchor Link

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. Files in the assets folder have no original version to compare against.

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

Test the same page in a fresh copy of Seventh, 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 Online Store Issue - first steps.

Related pagesCopy Anchor Link

• JavaScript events: the events and functions developers can hook into.
• Custom work and code changes: who to contact when a change needs code.
• Editing the theme files: how Shopify's code editor is organized.
• Shopify related FAQ: checkout, default theme content and other Shopify-owned topics.