Skip to content
Log in

▶️ How themes work in StoreConnect

On this page

1. What is a Theme?

  • A Theme controls the visual style of your StoreConnect store:

    • Fonts

    • Colors

    • Box shapes & edges

    • Styling effects (e.g. hover zoom on images)

    • Layout structure

  • Themes do not include your website’s content (text, images, products).

2. Assigning a Theme

  1. Go to your Store Record.

  2. Edit the Theme field:

    • Select a pre-imported theme, or

    • Import a new theme (covered in another tutorial).

    • If no theme is applied → StoreConnect uses its built-in base theme.

3. How a Theme is Composed

A theme is made up of 4 components:

a) Theme Templates

  • Dictate how different parts of your website appear.

  • Types of Templates:

    • Blocks → Sections of a page (content blocks).

    • Pages → Code that affects entire pages (e.g. Homepage).

    • Snippets → Reusable code pieces that can appear anywhere.

Example: An image/text block corresponds to a template key like blocks_sl_image_text_overlay, which holds HTML or Liquid code to define how that section looks.

b) Theme Locales

  • Primarily used for translations or text changes.

    • Support for multi-language stores.

    • Ability to change button text (e.g. rename “Cart” to “Donations”).

  • How it works:

    • Create a Theme Locale (e.g. “English”).

    • Under Related → Translations:

      • Assign a new value to any part of the site by referencing its key.

c) Theme Assets

  • These are files used by the theme:

    • CSS, JavaScript, Images, other media.

  • Example:

    • CSS/JS files hosted on StoreConnect’s Content Delivery Network (CDN).

    • Assets referenced by their keys in the theme’s code.

d) Theme Variables

  • Adjust parameters for the theme:

    • Example → Image aspect ratio:

      • Ratio 1:1 = Square images.

      • Different values can create portrait or landscape images.

  • Variables allow themes to be highly flexible without recreating the base code.

4. Theme Inheritance

  • You can create a new theme based on the base theme:

    • Only add templates, locals, assets, variables you want to change.

    • Anything not defined in your theme will fall back to the base theme.

  • This allows you to:

    • Make minor customizations quickly.

    • Avoid duplicating the entire base theme.

Summary

  • A Theme controls visual style — not content.

  • Built from: - Templates → Page structure and block styling. - Locals → Text translations/custom labels. - Assets → Files used (CSS, JS, Images). - Variables → Adjustable design settings.

  • Inherit from base theme — only override what you want to change.

Was this article helpful?

Was this article helpful?