Custom CSS and code

Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.

This page lists where you can add your own CSS or code to Kingdom, and three recipes from the old Kingdom docs, updated for Kingdom 6.2.0: a wider product description, a swapped gallery and an extra product badge.

Where to find it: Online Store → Themes → Customize → Theme settings → Custom CSS for CSS; Shopify admin → Online Store → Themes → … → Edit code for theme files.

Before you change codeCopy Anchor Link

• Prefer Custom CSS. Theme settings → Custom CSS is a Shopify field that every theme has. CSS there applies to every page and is kept as a setting when you update Kingdom. Each section also has its own Custom CSS field at the bottom of its settings, for CSS that applies to that section only.
• Use Custom HTML / Liquid for small pieces of HTML or Liquid: the Custom HTML / Liquid section, or the Custom HTML / Liquid block in the Product page section. No file edits are needed.
• Edit theme files last. Duplicate the theme first. Code edits in files are kept after an update only when they do not conflict with the new version. See Edit the theme code and Update Kingdom.
• Check after every update. CSS can stop working when a new version changes the HTML or class names it targets.

Make the product description widerCopy Anchor Link

By default, the product details column on desktop is 40 percent of the page, between 300 and 600 px wide, and the gallery takes the rest. This CSS makes the details column half of the page on screens 1024 px wide or more. Add it to Theme settings → Custom CSS and change the values if needed.

@media screen and (min-width: 1024px) {
  .template-product .product__text {
    width: 50%;
    max-width: none;
  }
}

Swap the gallery and the descriptionCopy Anchor Link

On desktop, Kingdom shows the product details on the left and the gallery on the right. This CSS swaps them on screens 1024 px wide or more:

@media screen and (min-width: 1024px) {
  .template-product .product {
    flex-direction: row-reverse;
  }
}

When you use this CSS, set Gallery style to Slider in the Product page section, so the gallery navigation displays correctly.

Add a custom product badgeCopy Anchor Link

Kingdom's product cards show one badge: Sold Out, the sale badge, Pre Order (tag preorder) or New (tag new). A badge with your own text, such as "Limited", needs a change in snippets/product-item.liquid.

{%- elsif product.tags contains 'limited' -%}
  <span class="product-item__badge product-item__badge--new"><span>Limited</span></span>

To add more badges, repeat the elsif with another tag. A custom badge has the lowest priority: a product that is sold out, on sale, tagged preorder or tagged new shows that badge instead. Tags match exactly, including upper and lower case.

Will my Custom CSS survive a Kingdom update?Copy Anchor Link

Yes. CSS in Theme settings → Custom CSS and in a section's Custom CSS field is saved as a setting, so Shopify carries it over to the updated copy. Check the result after the update: CSS can stop matching when a new version changes the HTML.

Why does my badge code disappear after an update?Copy Anchor Link

Because it is a code edit in snippets/product-item.liquid. Shopify keeps a code edit only when it does not conflict with the new version. Keep a copy of the snippet and paste the badge again after the update.

Related pagesCopy Anchor Link

• Custom fonts: load your own fonts with code.
• JavaScript events: events for scripts and apps.
• Product card theme settings: the built-in badges.
• Custom work and code changes: options when a change needs code.
• Troubleshoot store issues: first steps: find out whether custom code causes a problem.