Themes

What is a theme?

A CartOS theme is a complete storefront design built on the Liquid templating language. Themes determine everything your shoppers see — from your homepage and product pages to your cart and checkout flow. You can use a theme as-is, customize it through the Theme Customizer, or have a developer build a fully bespoke theme from scratch.

CartOS comes with professionally designed themes ready to publish the moment your store goes live. All themes are fully responsive and optimized for mobile, tablet, and desktop.

Browsing and installing themes

To browse available themes, go to Admin → Online Store → Themes. You'll see your currently installed theme at the top, followed by the CartOS theme library below.

To install a free theme from the library:

1. Click Add theme in the Themes section.
2. Browse the theme library and click a theme to preview it.
3. Click Install theme — the theme is added to your theme list in an unpublished state.

Installing a theme doesn't change your live storefront. You can customize and preview a theme before publishing it.

The Theme Customizer

The Theme Customizer lets you change your theme's look without touching any code. To open it, click Customize next to any installed theme.

Inside the Customizer you can adjust:

• Colors — primary, accent, background, and text colors across your storefront.
• Typography — heading and body font families, sizes, and weights.
• Header & footer — logo upload, navigation menus, announcement bar text, and social links.
• Homepage sections — hero banners, featured collections, promotional blocks, testimonials, and more. Sections can be reordered, shown, or hidden.
• Product pages — layout options, image display style, and what information to show alongside each product.
• Cart behavior — drawer cart vs. full-page cart, upsell display, and cart note options.
• Custom CSS — an advanced field for merchants who want to add their own style overrides without modifying theme files directly.

All changes in the Customizer are previewed in real time. Click Save to apply them to your theme — changes won't appear on your live store until the theme is published.

Publishing a theme

You can have multiple themes installed, but only one theme is live at a time. To publish a theme, click Publish next to it in the Themes list. Your storefront switches to the new theme immediately — there is no downtime during the switch.

Your previously published theme stays installed and is not deleted. You can roll back to it at any time by publishing it again.

Duplicating a theme

Before making major changes to your live theme, it's a good idea to duplicate it first. Click the ⋯ menu next to any theme and choose Duplicate. This creates an identical copy you can edit freely, leaving your live theme untouched.

Editing theme code

For advanced customization, CartOS includes a built-in code editor. Click the ⋯ menu next to a theme and choose Edit code. The editor shows your theme's full file tree:

• Layout — theme.liquid is the master template that wraps every page. It loads your header, footer, and global assets.
• Templates — one file per page type: index.liquid (homepage), product.liquid, collection.liquid, cart.liquid, page.liquid, blog.liquid, article.liquid, and 404.liquid.
• Sections — reusable page components (hero banners, featured collections, etc.) that can be placed and configured in the Customizer.
• Snippets — small, reusable Liquid fragments included inside templates and sections with {% include 'snippet-name' %}.
• Assets — theme CSS, JavaScript, images, and fonts.
• Config — settings_schema.json defines the Customizer controls for your theme, and settings_data.json stores the saved values.
• Locales — translation strings for multi-language storefronts.

Liquid templating basics

CartOS themes use the Liquid template language. Liquid uses two types of tags:

• Output tags — {{ variable }} — render a value onto the page.
• Logic tags — {% tag %} — control flow, loops, and includes.

Common Liquid objects available in CartOS templates include:

• shop — store name, currency, locale, and meta information.
• product — the current product's title, description, images, variants, and price.
• collection — the current collection and its products.
• cart — cart items, totals, and item count.
• customer — logged-in customer data.
• settings — all theme Customizer settings, accessed as settings.your_setting_name.
• navigation.header and navigation.footer — your store's navigation menus.

To include a snippet inside a template or section, use:

{% include 'snippet-name' %}

To pass a variable to a snippet:

{% include 'product-card', product: item %}

Bolt hooks

CartOS Bolts (apps) can inject content into your theme at designated hook points. Themes that support Bolts include {% bolt_hook 'hook_name' %} tags at key locations — for example, after the add-to-cart button, in the cart drawer, or before the closing </body> tag.

If you're building or editing a theme and want to ensure Bolt compatibility, refer to the Bolts documentation for the list of standard hook names.

Theme settings

Theme settings are defined in config/settings_schema.json and accessed in Liquid as settings.setting_name. For example, if your schema defines a color setting called accent_color, you access it in your templates as {{ settings.accent_color }}.

Settings are organized into sections in the schema file. Each setting has a type (color, text, select, checkbox, image_picker, range, etc.), a label shown in the Customizer, and a default value.

Renaming and deleting themes

To rename a theme, click the ⋯ menu next to it and choose Rename. Giving your themes descriptive names (such as "Holiday 2025 – Live" or "Redesign – In Progress") makes it easy to stay organized when you have several installed.

To delete a theme, click the ⋯ menu and choose Delete. You cannot delete your currently published theme — you must publish a different theme first.

Getting a custom theme built

If you'd like a theme designed specifically for your brand, CartOS Partners can build one for you. Visit the Hiring CartOS Partners article to learn how to find and work with a certified CartOS developer.