Customize Theme
In the Soppiya e-commerce ecosystem, a Theme serves as the visual and functional interface of your online storefront. It dictates how your brand is perceived by customers, encompassing layout, typography, color schemes, and user experience.
Soppiya provides a flexible theme management system that allows merchants to toggle between multiple designs, customize them via a modular visual interface, or perform advanced modifications through direct source code access.
Theme Availability and Plan Limits
Access to the Soppiya theme catalog and the number of concurrent themes allowed in your library is determined by your subscription plan. This ensures that as your business scales, your ability to test and deploy different visual identities grows with you.
| Plan | Theme Storage Limit | Staff Accounts | Media Storage |
|---|---|---|---|
| Spark | 2 Themes | 0 | 150 MB |
| Ignite | 3 Themes | 4 | 250 MB |
| Fusion | Themes | 9 | 500 MB |
| Unleash | Themes | 24 | 1000 MB |
Theme Storage includes both your active (published) theme and any unpublished themes stored in your "Theme Library" for testing or seasonal purposes.
The Themes Dashboard
Accessible via Shop > Themes, the dashboard is divided into three primary sections:
Current Theme
This is the live version of your store. Changes saved here are immediately visible to customers.
- Customize: Launches the real-time visual "no-code" editor.
- View your store: Opens your live website in a new tab for final verification.
Theme Library
Your private development area. Themes here are not visible to the public.
- Actions Menu (...): Options to Visit (preview), Rename, Edit Code (for developers), or Uninstall.
- Publish: Swaps your current live theme with this specific version.
Featured Themes
A catalog of pre-built, high-performance designs. Clicking Install adds these to your library, allowing you to begin customization immediately.
The Visual Editor Interface (No-Code)
Soppiya’s Visual Editor provides a real-time "What You See Is What You Get" (WYSIWYG) experience. The interface is divided into three functional zones:
Structural Sidebar (Left Panel)
This panel displays the hierarchy of your page.
- Header Group: Manage global navigation elements.
- Template Sections: Add, remove, or reorder modular sections such as Carousels, Product Lists, and Pull Quotes.
- Blocks: Within sections, you can manage specific units (e.g., adding a new "Slide" block within the "Carousel" section).
- Footer Group: Control the bottom-of-page content.
Component Settings (Right Panel)
When a section or block is selected, this panel reveals specific parameters for fine-tuning:
- Appearance: Control vertical padding for both mobile and desktop views to ensure pixel-perfect layouts.
- Functionality: Adjust "Slide change speed" and "Slide change time" using interactive sliders.
- UI Controls: Change navigation styles (Arrows/None), pagination displays (Dots/Numbers), and container width/height (Full/Contained).
- Transitions: Toggle "Enable automatic slide transitions" to automate movement.
The Main Canvas (Center)
This provides a live preview of your store. Any change made in the panels—such as updating an image or changing a text alignment—is reflected instantly on the canvas.
Advanced Customization (Pro-Level)
For brands requiring unique functionality, Soppiya provides direct access to the theme files via the Edit Code option.
- Logic: Modify Liquid templates to create custom data-driven flows.
- Styling: Write custom CSS/SCSS to override default theme aesthetics.
- Interactivity: Inject custom JavaScript for advanced UI behavior or third-party tracking.
Technical Note: Direct code edits are permanent and can impact site stability. Always duplicate your theme before performing manual code modifications.
Best Practices
- Mobile-First Design: Use the Appearance settings in the editor to adjust padding specifically for mobile devices to ensure a seamless experience.
- Performance: All featured themes are optimized out-of-the-box. When adding custom sections or high-resolution carousels, monitor page load speeds.
- Version Control: Utilize the "Rename" feature in the library to track different versions of your work (e.g., "Summer Launch V1").