Custom CSS and code

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

Krown support does not provide help with custom code. This page is for developers: it collects CSS and Liquid recipes for changes that Split has no setting for, checked against the Split 5.1.0 files. For a change you cannot make yourself, see Custom work and code changes.

Where to find it: CSS goes into a section's Custom CSS in the theme editor. Code edits are made in Shopify admin → Online Store → Themes → … → Edit code.

Where to add custom CSSCopy Anchor Link

Split has no Custom CSS box in Theme settings. Use Shopify's own Custom CSS field of a section instead:

• In the theme editor, select the section, for example the Header in the Header group, and scroll to the bottom of its settings to Custom CSS.
• Shopify applies that CSS only to the section you added it to, so selectors must target elements inside that section.
• For CSS that has to apply to the whole store, add it to a stylesheet in the theme code (a code edit).

Adding your own fontCopy Anchor Link

Split uses two fonts from Shopify's font library: the heading font for titles (h1 to h6) and the body font for everything else, including the menu, buttons, inputs and selects. There is no separate menu font. To use a font that is not in the library, replace the font code in snippets/head-variables.liquid.

{%- assign headings_font = settings.headings_font -%}
{%- assign body_font = settings.body_font -%}

{%- unless headings_font.system? -%}
  <link rel="preload" href="{{ headings_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

{%- unless body_font.system? -%}
  <link rel="preload" href="{{ body_font | font_url }}" as="font" type="font/woff2" crossorigin>
{%- endunless -%}

@font-face {
  font-family: "MyFont";
  src: url('Your_font_file_URL') format("woff2");
}
@font-face {
  font-family: "MyFont";
  font-weight: 700;
  src: url('Your_bold_font_file_URL') format("woff2");
}
@font-face {
  font-family: "MyFont";
  font-weight: 400;
  font-style: italic;
  src: url('Your_italic_font_file_URL') format("woff2");
}

/* Font variables */

--font-stack-headings: "MyFont", sans-serif;
--font-weight-headings: 400;
--font-style-headings: normal;

--font-stack-body: "MyFont", sans-serif;
--font-weight-body: 400;
--font-weight-body-bold: 700;
--font-style-body: normal;

Using a Google fontCopy Anchor Link

To use a font from Google Fonts, copy the <link> code Google gives you and paste it in layout/theme.liquid, just before the closing </head> tag. For example, for the Poiret One font:

<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">

Then follow the steps above without the @font-face declarations: remove the preload lines and the font-face code, and write the Google font name in the font variables, for example --font-stack-headings: "Poiret One", sans-serif;.

Adding a product badge from a tagCopy Anchor Link

Split shows four badges: Sold out, Sale, Pre Order (product tag preorder, pre order or Pre Order) and New (product tag new, lower case). To show another badge for a tag, add a condition to snippets/product-badges.liquid. The badge then shows in product cards and in the Product header block on the product page.

{%- elsif product.tags contains 'more options' -%}
  <div class="product-badge new text-size--smaller"
    style="background-color: {{ settings.product_card_badge_regular_background_color }}; color: {{ settings.product_card_badge_regular_text_color }}; border-color: {{ settings.product_card_badge_regular_border_color }}"
  ><span>more options</span></div>

The new badge uses the colors of Theme settings → Product card → Product badges (Background color, Text color, Border color), like the New and Pre Order badges.

Centering the logo or the menuCopy Anchor Link

Split has no setting to move the logo or the menu in the header. On screens wider than 1024 px, the header shows the logo on the left and, on the right, the classic menu (with Desktop menu style Classic), then the search, account, cart and menu icons. The CSS below goes into the Header section's Custom CSS.

Classic menu in the middleCopy Anchor Link

With Desktop menu style Classic, this centers the menu in the space between the logo and the icons:

@media screen and (min-width: 1025px) {
  .site-nav.style--classic {
    flex: 1;
  }
  .site-nav.style--classic > .site-nav-container {
    flex: 1;
    justify-content: center;
  }
}

Logo in the center, classic menu on the leftCopy Anchor Link

With Desktop menu style Classic, this puts the logo in the middle of the header and the menu on the left. It works only with a short menu that fits in half of the screen:

@media screen and (min-width: 1025px) {
  .site-header .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .site-nav.style--classic {
    flex: 1;
  }
  .site-nav.style--classic > .site-nav-container {
    flex: 1;
  }
}

Logo in the center with the Drawer menu styleCopy Anchor Link

With Desktop menu style Drawer, this centers the logo and keeps the icons on the right:

@media screen and (min-width: 1025px) {
  .site-header.desktop-view--minimal .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .site-header.desktop-view--minimal .site-nav.style--classic {
    margin-inline-start: auto;
  }
}

Related pagesCopy Anchor Link

• Custom work and code changes: what Krown support covers.
• JavaScript events: events for apps and custom scripts.
• Typography theme settings: the fonts you can pick without code.
• Product card theme settings: the badges Split shows.
• Edit the theme code: how to open the code editor.