Theme Customization
Customizing Your Store Theme
Cartly's theme system lets you control the look and feel of your storefront without writing code. The ThemeConfig entity stores all visual settings that are applied globally.
Accessing Theme Settings
Navigate to Online Store ā Theme in the admin sidebar. The theme editor opens with a live preview of your storefront alongside the settings panel.
Color Palette
Configure your store's color scheme with the following options:
- Primary color ā Used for buttons, links, and accents. Choose a color that represents your brand.
- Secondary color ā Used for secondary buttons and less prominent elements.
- Background color ā The main page background color.
- Text color ā The default text color for body content.
- Header background ā The background color of your store header.
- Footer background ā The background color of the footer section.
Typography
Select fonts for headings and body text. Cartly includes a curated set of web fonts optimized for performance. Changes apply instantly in the preview panel. You can set font sizes, weights, and line heights for different text elements.
Header Configuration
The header settings control your store's top navigation bar:
- Logo ā Upload your store logo. Supported formats: PNG, SVG, JPEG. Recommended size: 200x60 pixels.
- Layout ā Choose between centered or left-aligned logo with navigation.
- Sticky header ā Keep the header visible as customers scroll.
- Announcement bar ā Show a dismissible banner above the header for promotions or notices.
Footer Configuration
Customize the footer with:
- Column layout (1-4 columns)
- Social media links
- Newsletter signup form
- Copyright text
- Payment method icons
Saving and Publishing
All changes are previewed in real time. Click Save to apply your changes to the live storefront. There is no separate publish step ā saved changes are immediately visible to your customers.
Theme Presets
Cartly includes several pre-configured theme presets for different store styles: Minimal, Bold, Classic, and Modern. Select a preset to apply its color palette and typography settings, then customize further to match your brand.