Your theme controls how your store looks and feels. CartOS themes are customizable through a visual editor—no coding required to adjust colors, fonts, layouts, and content. This guide covers how to use the theme editor to make your store your own.
Accessing the theme editor
Go to Online Store › Themes and click Customize on your current theme. The theme editor opens with a live preview of your store on the right and settings panels on the left.
Changes you make appear instantly in the preview. Nothing is published until you click Save, so you can experiment freely.
Editor layout
Left panel
The left panel shows either section controls or theme settings depending on what you're editing. Click on sections in the preview or use the panel to select and configure them.
Preview
The center area shows a live preview of your store. Click any element to select and edit it. Use the device icons at the top to preview how your store looks on desktop, tablet, and mobile.
Page selector
The dropdown at the top lets you switch between different pages—homepage, product pages, collection pages, cart, and more. Each page type has its own sections and layout options.
Theme settings
Click Theme Settings in the left panel to access global settings that apply across your entire store.
Colors
Set your store's color palette:
- Primary color – Used for buttons, links, and key actions. Choose a color that stands out and reflects your brand.
- Secondary color – Accent color for secondary elements
- Background colors – Main background, section backgrounds, and alternate backgrounds for visual variety
- Text colors – Headings, body text, and muted text
- Button colors – Button background and text for primary and secondary buttons
Most themes include color presets to get you started. Select a preset and fine-tune from there, or build your palette from scratch.
Typography
Choose fonts for your store:
- Heading font – Used for page titles, section headers, and product names. Something bold and distinctive works well.
- Body font – Used for descriptions, paragraphs, and general text. Prioritize readability.
- Font sizes – Adjust base sizes for headings and body text. These scale proportionally across elements.
CartOS includes a curated library of web fonts. All fonts are optimized for fast loading. If you need a specific font not in the library, you can add custom fonts through theme code.
Logo
Upload your logo and configure how it displays:
- Logo image – Upload your logo file (PNG with transparency works best)
- Logo width – Set the maximum width for your logo
- Mobile logo – Optionally upload a different logo for mobile (perhaps a simplified version)
- Favicon – The small icon that appears in browser tabs. Upload a square image at least 32x32 pixels.
Buttons
Configure button styling across your store:
- Border radius – Sharp corners, slightly rounded, or fully rounded (pill-shaped)
- Button style – Solid fill, outline, or other styles depending on your theme
- Hover effects – How buttons react when customers hover over them
Layout
Control overall page structure:
- Content width – Maximum width for page content. Wider feels more modern; narrower improves readability.
- Section spacing – Vertical space between sections. More space feels airy and premium; less feels compact and dense.
- Container style – Full-width or boxed layout
Social media
Add your social media links. These appear in your footer and anywhere your theme displays social icons:
- Instagram, Facebook, Twitter/X, TikTok, Pinterest, YouTube, LinkedIn
Enter just your username or the full URL—the theme handles formatting.
Cart
Configure cart behavior:
- Cart type – Slide-out drawer, popup modal, or dedicated cart page
- Cart notes – Allow customers to add notes to their order
- Cart upsells – Show related products in the cart
Checkout
Some checkout appearance settings are controlled here, though checkout has its own dedicated settings in Settings › Checkout.
Sections
Sections are the building blocks of your pages. Each section is a modular content area—a slideshow, featured products, text with image, testimonials, and more.
Adding sections
Click Add Section in the left panel to see available section types. Click one to add it to the page. New sections appear at the bottom—drag to reorder.
Section types
Available sections depend on your theme, but common ones include:
- Slideshow / Hero – Large banner images with text overlay, great for announcements and branding
- Featured collection – Display products from a specific collection
- Featured product – Highlight a single product with details
- Image with text – Image alongside text content, versatile for storytelling
- Rich text – Text-only section for announcements or content
- Video – Embed a video from YouTube or Vimeo
- Testimonials – Customer quotes and reviews
- Newsletter – Email signup form
- Image gallery – Grid or carousel of images
- Collection list – Links to multiple collections
- Logo list – Display partner, press, or certification logos
- FAQ / Accordion – Expandable question-and-answer content
- Contact form – Built-in contact form
- Map – Google Maps embed for physical locations
- Custom HTML – Add your own code for embeds or custom content
Configuring sections
Click any section to open its settings. Each section has unique options, but common settings include:
- Content – Text, images, links, and products to display
- Layout – Number of columns, alignment, image position
- Colors – Override theme colors for this section
- Spacing – Padding above and below the section
- Visibility – Show on desktop, mobile, or both
Blocks within sections
Many sections contain blocks—individual items within the section. A slideshow section contains slide blocks; a testimonials section contains testimonial blocks. Add, remove, and reorder blocks within each section.
Removing sections
Click a section and click the trash icon to remove it. You can also hide a section temporarily using the visibility toggle without deleting it.
Page-specific customization
Different page types have different section options:
Homepage
Your homepage is fully customizable with whatever sections you want. Most stores use a hero/slideshow, featured collections, about content, and newsletter signup.
Product pages
Product pages have a defined structure—product images, title, price, description, add to cart—but you can customize the layout and add sections below the main product content like related products, reviews, or FAQ.
Collection pages
Configure how products display in collections: grid vs. list layout, products per row, filtering and sorting options, and sections above or below the product grid.
Cart page
If using a cart page (vs. drawer), customize the layout and add cross-sell sections.
Blog and article pages
Control blog layout, sidebar content, and article page structure.
Header and footer
The header and footer appear on every page. Access their settings from the theme editor:
Header
- Layout – Logo position (left, center), menu style, header height
- Sticky header – Header stays visible when scrolling
- Transparent header – Header overlays the first section (good for hero images)
- Announcement bar – Optional banner above the header for promotions or messages
- Search – Search icon, search bar, or predictive search configuration
Footer
- Footer columns – Add menu links, text blocks, newsletter signup, contact info
- Payment icons – Show accepted payment method logos
- Copyright text – Customize the copyright line
- Social links – Display social media icons (uses links from theme settings)
Mobile customization
Preview mobile view using the device toggle in the editor. Some settings are mobile-specific:
- Mobile menu – How navigation works on small screens (hamburger menu style, animations)
- Mobile section visibility – Hide certain sections on mobile to simplify the experience
- Mobile image sizing – Some sections let you set different images or crops for mobile
Always preview on mobile before publishing. More than half of e-commerce traffic is mobile—make sure it looks good.
Saving and publishing
Click Save to publish your changes. They go live immediately on your store.
If you want to experiment without affecting your live store, duplicate your theme first. Go to Online Store › Themes, click the three dots on your theme, and select Duplicate. Customize the copy, then publish it when ready.
Reverting changes
CartOS saves a version history of your theme. If you need to undo changes:
- Go to Online Store › Themes
- Click the three dots on your theme and select Version History
- Browse previous versions and restore the one you want
This is useful if you've made changes you regret or need to rollback after testing something that didn't work.
Custom CSS
For tweaks beyond what the theme settings offer, you can add custom CSS. In the theme editor, go to Theme Settings › Custom CSS and add your styles.
Custom CSS applies globally. Use browser developer tools to identify the elements you want to style, then write CSS targeting those selectors. This requires some CSS knowledge but gives you fine-grained control.
Theme code
For deeper customization, you can edit theme code directly. Go to Online Store › Themes, click the three dots, and select Edit Code.
CartOS themes use Liquid templating, HTML, CSS, and JavaScript. If you're comfortable with web development, you can modify templates, create new sections, or completely rework the theme structure.
Always duplicate your theme before editing code, and consider hiring a developer for significant changes if you're not experienced with web development.