Theme Development Engine

Themes in ShopsWired are built using Liquid templates, HTML, CSS, and JavaScript. Our Server-Side Rendering (SSR) engine ensures lightning-fast page loads and perfect SEO, while giving merchants deep control over their storefront design via the theme editor.

1. The `manifest.json`

The manifest defines the configuration UI available to the merchant. By declaring settings here, you allow merchants to change colors, layouts, and typography without editing code.

Example: Theme Settings

{
  "id": "default",
  "name": "Default Theme",
  "version": "1.0.0",
  "extends": "",
  "settings": [
    {
      "tab": "General",
      "key": "store_name",
      "type": "text",
      "label": "Store Name",
      "description": "The name displayed in the header."
    },
    {
      "tab": "Homepage",
      "key": "homepage_layout_data",
      "type": "layout",
      "label": "Homepage Layout"
    },
    {
      "tab": "Navigation",
      "key": "main_menu",
      "type": "menu",
      "default": [
        { "label": "Home", "url": "/" },
        { "label": "Shop", "url": "/search" }
      ]
    },
    {
      "tab": "Overrides",
      "key": "head_end",
      "type": "html",
      "label": "Before Head End",
      "description": "Code injected right before closing ."
    }
  ]
}

Notice the variety of types: text, layout, menu, and html. You can access these settings in any Liquid template using {{ theme.settings.key_name }}.

2. Advanced Liquid Features

The `layout_render` Filter

When you define a setting of type layout, merchants can use the drag-and-drop block builder in the admin dashboard. To render this complex structure in your theme, simply use the layout_render filter.

<!-- index.liquid -->
{{ theme.settings.homepage_layout_data | layout_render }}

Rendering Menus

For settings of type menu, iterate over the links object to build dynamic navigation bars.

<nav>
    <ul>
        {% "{%" %} for link in theme.settings.main_menu {% "%}" %}
            <li><a href="{{ link.url }}">{{ link.label }}</a></li>
        {% "{%" %} endfor {% "%}" %}
    </ul>
</nav>

HTML Overrides & Snippets

Allow merchants to inject custom tracking scripts (like Google Analytics) by providing html setting types and outputting them directly in your layout.liquid.

<head>
    <title>{{ theme.settings.store_name }}</title>
    {{ theme.settings.head_end }}
</head>

3. Built-in Liquid Filters

ShopsWired extends Liquid with specific filters tailored for e-commerce environments:

Filter	Description
`{{ price \| money }}`	Formats an integer value (cents) to dollars, automatically adapting to the shop's active currency.
`{{ product \| product_url }}`	Generates the canonical URL for a product to ensure SEO compliance.
`{{ product \| in_stock }}`	Returns a boolean indicating if the product or any of its variants have positive inventory.
`{{ 'style.css' \| asset_url }}`	Resolves to the theme's static asset directory (e.g., `/theme/assets/style.css`).
`{{ 'image.jpg' \| cdn_url }}`	Resolves the URL against the platform's global Cloudflare CDN for lightning-fast image delivery.

4. Plugin Hook Locations

A well-built theme should include hook targets so that plugins can dynamically inject UI elements (like review stars or chat widgets) without requiring the merchant to manually edit the theme code.

<!-- Inject content at the bottom of the product page -->
{% "{%" %} hook 'product_bottom' {% "%}" %}