▶️ How themes work in StoreConnect

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.