Skip to main content

Customize Theme

The Soppiya Theme Editor (Customizer) is an interactive, visual workspace designed to give you complete creative control over your online store's design. Built for speed and ease of use, the editor allows you to adjust page layouts, update brand logos, configure purchase options, and manage complex sliding banners entirely through visual settings.

This guide provides step-by-step instructions for manually customizing your theme settings, managing layouts, and configuring global styles without editing any code.

Navigating the Visual Workspace & Template Routing​

The Soppiya Theme Editor is organized into three primary sections to help you customize your store efficiently:

┌────────────────────────────────────────────────────────────────────────┐
│ [Top Bar: Template Search dropdown] - Select and search page views     │
├──────────────────────────────┬─────────────────────────────────────────┤
│ [Left Panel: Structure Tree] │ [Central Visual Preview Area]           │
│ - Manage sections & blocks   │ - Displays live design changes          │
│   - Header Group             │ - Toggle between Desktop and Mobile     │
│   - Body Sections            │                                         │
│   - Footer Group             │                                         │
├──────────────────────────────┼─────────────────────────────────────────┤
│ [Left Sidebar Settings Icon] │ [Right Panel: Contextual Settings]      │
│ - Access Global settings     │ - Edit layout alignments, padding,      │
│   (Logos, Colors, Fonts)     │   borders, and responsive dimensions    │
└──────────────────────────────┴─────────────────────────────────────────┘

The Template Selector & Navigation Dropdown (Top Bar)​

At the top of the editor, a central dropdown menu allows you to search and select different pages of your store.

  • Search Online Store: Type in the search box to find a page template instantly.
  • Default Page Views: You can switch between key layouts, including:
    • Home Page: Your main landing page.
    • 404 Page: The page shown for broken links or error pages.
    • Search: The search results grid layout.
    • Cart: The shopping cart view.
    • Checkout: The order details page.
    • Order: The transaction receipt page.
    • Product: The product detail page.
    • Collection: The product list category pages.

Developer Code Access Menu​

Click the three-dot (...) dropdown menu next to your active theme name (e.g., Canvas Live) in the top-left corner to access advanced options:

  • Theme Details: Displays your active theme name and version (e.g., Canvas 2.0.0 — Design and support by Soppiya).
  • Edit Code: Opens the advanced Theme Code Editor for direct coding adjustments.
  • View: Launches a live, interactive preview of your storefront.

Adding & Customizing Page Layouts (Left Sidebar)​

The Left Panel contains your template tree. This is where you can add sections, organize blocks, and customize page layouts.

  • Adding Sections (+ Add section): Click this button to open a searchable menu and add modular sections (such as Account, Blog Articles, Collection Products, or Custom sections) to your page.
  • Adding Blocks (+ Add Block): Sections can contain smaller blocks inside them. To add a block under a section, click + Add Block to open the block library:
    • Available Blocks: Accordion Item, Accordion, Article, Blog, Button, Collection, Email Subscription, and Group.

Customizing Section Layouts (Right Sidebar)​

When you click on a section in the left panel (such as a Banner or Image-Text section), its settings will appear in the right-hand sidebar.

┌────────────────────────────────────────────────────────────────────────┐
│                        Section Settings Panel                          │
├────────────────────────────────────────────────────────────────────────┤
│ Color Scheme       - Override global styles with local color presets   │
│ Background Type    - Choose between a solid Color or an Image background│
│ Section Padding    - Control spacing above and below on Mobile/Desktop │
│ Border Controls    - Toggle borders and select solid outline styles    │
│ Responsive Layout  - Define alignments, flex flow, and gaps in pixels  │
└────────────────────────────────────────────────────────────────────────┘

Color Scheme & Background Customization​

  • Overwrite Color Scheme: Check this box to force the active section to use a unique local color preset instead of your global theme styles. Use the Change button under the dropdown menu to select a preset (e.g., Light, Dark, Aurora).
  • Enable Background: Check this box to turn background rendering on for the active section.
  • Background Type: Choose between Color or Image:
    • Color: Select Background color and use the hex color picker to set a background color (e.g., #ffffff).
    • Image: Upload a background graphic to fit behind the section content.

Section Padding & Spacing​

  • Padding (Mobile): Adjusts the spacing (breathing room) above and below the section on mobile screens using a slider.
  • Padding (Desktop): Adjusts the vertical padding above and below the section on desktop screens.

Section Borders​

  • Enable Border: Check this box to display an outline around the section boundary.
  • Border Style: Select your border styling (e.g., Solid outlines).
  • Border Color: Use the color picker to set a color for your section borders (e.g., #000000).

Responsive Layout Configurations​

You can set separate layout options for desktop and mobile displays to ensure your pages look clean and professional on all devices:

  • Flex Direction (Mobile / Desktop): Defines how content blocks stack inside the section:
    • Column: Elements stack vertically on top of each other.
    • Row: Elements sit horizontally side-by-side.
    • Row reverse: Reverses the horizontal order of elements.
    • Column reverse: Reverses the vertical stacking order of elements.
  • Align Items: Adjusts the alignment of items along the vertical axis (e.g., aligning elements to the Center of their container).
  • Justify Content: Adjusts the horizontal spacing of elements:
    • Start: Elements align to the left.
    • Center: Elements are centered.
    • End: Elements align to the right.
    • Space between: Distributes elements evenly across the width, pushing the first and last items to the outer edges.
    • Space around: Distributes elements evenly with equal spacing around them.
    • Space evenly: Distributes elements with equal spacing between each item and the container edges.
  • Gap (Mobile / Desktop): Adjusts the spacing (in pixels) between individual content blocks inside the section.

Configuring Banner & Carousel Settings​

For sections that contain sliding banners or product sliders, click on the Slider element to configure carousel transitions, autoplay speeds, and spacing:

  • Carousel Style: Choose how slides transition between each other:
    • Slide: Standard horizontal slide transitions.
    • Fade: Subtle fade-in and fade-out effects.
    • Cube: Turns your slides into a rotating 3D cube.
    • coverflow: A fluid, curved layout depth effect.
    • flip: Interactive 3D flip card animations.
    • cards: Displays slides stacked like cards.
  • Interactive Controls:
    • Enable Pagination: Displays slide dots or indicators at the bottom of the slider.
    • Enable Navigation: Displays interactive navigation arrows on the left and right sides of the slider.
    • Enable Loop: Allows slides to loop infinitely rather than stopping at the last slide.
    • Enable Auto Play: Automatically shifts to the next slide at set intervals.
  • Slides per View:
    • Slidesper view (Mobile): Set the number of active slides shown simultaneously on mobile screens.
    • Slidesper view (Desktop): Set the number of active slides shown simultaneously on desktop displays.
  • Slide Gaps: Adjust the spacing (in pixels) between active slides using the slider.
  • Padding top / Padding bottom: Add extra spacing above or below your sliding banner section.

Global Brand Settings (Theme Settings)​

To customize global theme properties like branding assets, colors, and button layouts, click the Theme Settings (Gear Icon) in the left-hand sidebar.

Logo & Favicon​

  • Primary Logo (for light backgrounds): Displays your brand's uploaded image. Click Change to select a new logo file.
  • Logo width (Mobile): Adjusts your logo's width on mobile displays using the slider.
  • Logo width (Desktop): Adjusts your logo's width on desktop monitors.
  • Logo vertical padding: Adjusts the vertical spacing above and below your logo within your navigation header.
  • Favicon (Browser tab icon): Click Select Image to upload a small icon (typically an icon-only version of your logo) to display next to your store title in browser tabs.

Global Colors​

Soppiya includes six pre-configured color schemes to keep your branding consistent.

  • Dynamic Color Schemes: Select from preset color profiles, including Light, Dark, Aurora, Crimson, Sunset, and Mystic.
  • Change Palette: Click Change under the active scheme to apply a new color profile across your storefront instantly.

Typography​

  • Body font: Sets the primary font for paragraph texts and standard descriptions (e.g., Noto Sans Canadian Aboriginal Regular).
  • Sub heading font: Sets the font style for subheadings (e.g., Montserrat Regular 400).
  • Heading font: Sets the font style for primary headers (e.g., Noto Sans Malayalam Regular 900).
  • Accent font: Sets the font style for buttons, highlighted actions, and detail labels (e.g., Montserrat Regular 400).

Theme Container Width​

  • Theme Container: Choose the outer boundary profile for storefront sections:
    • Page: Centers your content within a standardized container width.
    • Full: Extends your layout edge-to-edge for a full-bleed widescreen view.

Section Animations​

  • Reveal sections on scroll: Check this box to automatically fade or slide sections into view as the customer scrolls down your pages.

Global Buttons​

  • Button border thickness: Adjusts the thickness of button borders using a pixel slider.
  • Button border radius: Adjusts the roundedness of your buttons. Set to 0 px for sharp rectangular borders, or increase the value for softer, rounded buttons.

Variant Option Swatches​

  • Variant pills border thickness: Adjusts the outline border thickness around variant option swatches (e.g., size, color, or material options) on product pages.
  • Variant pills border radius: Adjusts the roundedness of variant pill selectors. Set to 0 px for sharp boxes, or increase the value (e.g., 70 px) to round them into circular shapes.

Input Fields​

  • Input field border radius thickness: Sets the border outline thickness for search bars, text fields, and entry inputs.
  • Input field border radius: Adjusts the roundedness of search boxes and input fields.

Cards (Product Grids)​

  • Card border radius thickness: Adjusts the border outline thickness of product cards.
  • Card border radius: Adjusts the roundedness of product card corners.

Social Media Chat Plugin​

Integrate customer support tools directly into your store:

  • Enter Whatsapp number (+880123456789): Input your support phone number (e.g., +8801624888999) to display an interactive WhatsApp chat bubble.
  • Enter your facebook page link: Input your Facebook page URL to display a direct Messenger chat plugin on your storefront.

Technical Developer Guidelines (Next Steps)​

While the Visual Theme Editor covers standard storefront layouts, advanced developers can write custom styles, logic, and integrations directly within the theme files.

To learn more about theme layouts, directory architectures, custom Liquid logic, and client-side APIs, please proceed to Track B: Advanced Theme Development in the following technical sub-documents: