Your storefront is the digital face of your business. The Themes module lets you customize the entire visual presentation of your e-commerce site without writing a single line of code. Switch between professionally designed layouts, adjust your brand colors, upload logos — create a shopping experience that feels unmistakably yours.
Selecting a Theme Template
Sevenledger provides several optimized templates out of the box, each designed for different industries and catalog sizes.
Access the Theme Library
Navigate to Online Store > Themes.
Browse Templates
Explore the available options in the Theme Library. Each template highlights different strengths — large hero images for fashion, grid-heavy layouts for electronics, minimal designs for luxury brands.
Preview and Apply
Click Preview on any theme to see how your current catalog looks with the new design. Found the right fit? Click Publish to make it your active storefront theme.
Customizing Your Brand Identity
Once a theme is active, fine-tune it to match your company’s branding.
Click Customize on your active theme to open the visual editor.
General Settings
- Logos: Upload your primary logo, a secondary version (for dark modes or footers), and a favicon (the small icon in the browser tab).
- Typography: Select a primary font for headings and a secondary font for body text. You get access to a wide range of modern, readable web fonts.
- Color Palette: Define your brand’s core colors:
- Primary Color: Used for major buttons (“Add to Cart”) and active links.
- Background Colors: Adjust page backgrounds to light, dark, or a subtle brand shade.
Consistency is everything: Make sure your primary button color stands out clearly from your background. High contrast = higher conversion rates.
Page Layouts
Depending on your selected theme, you can customize specific page structures:
- Home Page: Toggle sections on or off — featured categories, newsletter sign-ups, Hot Deals carousels, and more.
- Product Pages: Choose layout options like image gallery placement (left vs. right) or sticky product descriptions.
Advanced CSS (Developers Only)
For teams with in-house developers who need pixel-perfect control beyond the standard settings:
- Navigate to the Advanced tab within the Theme Customizer.
- Enter standard CSS rules to override the theme defaults.
Use with caution: Bad CSS can break your storefront layout, especially on mobile. Only use this if you’re comfortable with web development.