Building a Theme for Spiffy Stores - Revision history

Admin: /* Example: Previous / Next Product Navigation */

2025-10-18T20:52:50Z

Example: Previous / Next Product Navigation

Admin: /* Best Practices & Tips */

2025-10-18T20:52:13Z

Best Practices & Tips

Admin: /* Liquid Syntax & Platform-Specific Features */

2025-10-18T20:50:29Z

Liquid Syntax & Platform-Specific Features

Admin: /* Theme Structure & Required Templates */

2025-10-18T20:48:25Z

Theme Structure & Required Templates

Admin: /* Folder / Asset Structure */

2025-10-18T20:47:28Z

Folder / Asset Structure

Admin: /* Theme Structure & Required Templates */

2025-10-18T20:46:46Z

Theme Structure & Required Templates

Admin at 20:46, 18 October 2025

2025-10-18T20:46:05Z

Admin at 20:44, 18 October 2025

2025-10-18T20:44:44Z

Admin: /* References */

2025-10-18T20:42:01Z

References

Admin: /* References */

2025-10-18T20:41:01Z

References

@@ Line 144: / Line 144: @@
 Add navigation to <code>product.liquid</code>:
-<syntaxhighlight lang="liquid">
+<pre>
 {% if collection %}
    <nav class="product-nav">
@@ Line 155: / Line 155: @@
    </nav>
 {% endif %}
-</syntaxhighlight>
+</pre>
 Ensure product links in collections use:
-<syntaxhighlight lang="liquid">
 {{ product.url | within: collection }}
-</syntaxhighlight>
+</pre>
 == Migration & Update Considerations ==

@@ Line 132: / Line 132: @@
 * Use <code>global_asset_url</code> helpers.
 * Include SEO tags:
-<syntaxhighlight lang="html">
 <meta name="description" content="{{ header.description }}">
 <meta name="keywords" content="{{ header.keywords }}">
-</syntaxhighlight>
+</pre>
-See [https://www.spiffystores.net.au/kb/Liquid_Template_Variables_-_header Liquid Template Variables – header].
 * Maintain version control (e.g. Git) and backups.

@@ Line 63: / Line 63: @@
 == Liquid Syntax & Platform-Specific Features ==
-Since Spiffy Stores uses Liquid (the same templating language as Shopify), familiar concepts like objects, tags, filters, loops, and conditionals apply.
+Since Spiffy Stores uses Liquid (the same templating language as Shopify), familiar concepts like objects, tags, filters, loops and conditionals apply.
 === Basic Syntax ===
@@ Line 74: / Line 74: @@
 * '''Global assets''' – Include common JS/CSS via:
-<syntaxhighlight lang="liquid">
 {{ 'filename.js' | global_asset_url | script_tag }}
-</syntaxhighlight>
+</pre>
-See [https://www.spiffystores.net.au/kb/Using_Global_Javascript_Assets Using Global Javascript Assets].
 * '''Collection navigation example''' – On a product page:
-<syntaxhighlight lang="liquid">
 {% if collection %}
    {% if collection.previous_product %}
@@ Line 89: / Line 92: @@
    {% endif %}
 {% endif %}
-</syntaxhighlight>
+</pre>
-See [https://www.spiffystores.co.nz/kb/Liquid_Collection_Navigation Liquid Collection Navigation].
 * '''URL helper''' – Maintain collection context:
-<syntaxhighlight lang="liquid">
 {{ product.url | within: collection }}
-</syntaxhighlight>
+</pre>
 === Theme Settings ===
-Theme settings (colours, fonts, etc.) are configurable via the Toolbox and referenced in templates with <code>{{ settings.&lt;name&gt; }}</code>. See the [https://www.spiffystores.com.au/kb/ Knowledge Base] for details.
+Theme settings (colours, fonts, etc.) are configurable via the Toolbox and referenced in templates with <code>{{ settings.&lt;name&gt; }}</code>.
 == Assets, Scripts & Performance ==

@@ Line 34: / Line 34: @@
 </pre>
-Use the query parameter ''?view=&lt;view&gt;'' in a URL to load an alternate template.
+Use the query parameter <code>?view=&lt;view&gt;</code> in a URL to load an alternate template.
 === Folder / Asset Structure ===

@@ Line 39: / Line 39: @@
 A recommended structure for your theme:
-<syntaxhighlight lang="text">
 /assets/         (CSS, JS, fonts, images)
 /layouts/        (theme.liquid)
@@ Line 45: / Line 46: @@
 /snippets/       (header.liquid, footer.liquid)
 /config/         (theme settings file if used)
-</syntaxhighlight>
+</pre>
 Themes are usually uploaded as a ZIP archive or edited directly through the Toolbox. Editing via WebDAV is also supported.

@@ Line 28: / Line 28: @@
 You can also create '''alternative templates''' for specific layouts by appending a view name, for example:
-<code>
 collection.grid.liquid
 product.long.liquid
-</code>
+</pre>
-Use the query parameter <code>?view=&lt;view&gt;</code> in a URL to load an alternate template.
 === Folder / Asset Structure ===

@@ Line 1: / Line 1: @@
 = Building a Theme for Spiffy Stores =
-This article describes how to create and customise a theme for the '''Spiffy Stores''' e-commerce platform using its legacy templating system (HTML + CSS + Liquid tags). This system is analogous to building a Shopify theme, and uses the Liquid syntax.
+This article describes how to create and customise a theme for the '''Spiffy Stores''' e-commerce platform using the templating system (HTML + CSS + Liquid tags). This system is analogous to building a Shopify theme, and uses the Liquid syntax.
 == Overview ==
-A ''theme'' in Spiffy Stores is essentially a set of HTML/CSS/Liquid template files, plus related assets (images, JavaScript, fonts), packaged (typically as a ZIP) or edited via the store’s '''Toolbox''' theme editor.
+A ''theme'' in Spiffy Stores is essentially a set of HTML/CSS/Liquid template files, plus related assets (images, JavaScript, fonts), packaged (typically as a ZIP) or edited via the store's '''Toolbox''' theme editor.
-According to the official theme guide:
+Spiffy Stores uses Liquid tags to render dynamic store data (products, collections, pages, blogs) inside the templates. For background on Liquid syntax, see [[Liquid Basics].
-Spiffy Stores uses Liquid tags to render dynamic store data (products, collections, pages, blogs) inside the templates. For background on Liquid syntax, see [https://www.spiffystores.com.au/kb/Liquid_Basics Liquid Basics].
+Because many developers are already familiar with Shopify themes, it is fair to say the workflow is very similar. However, there are platform-specific differences such as template names, theme settings and asset helpers.
 == Theme Structure & Required Templates ==
@@ Line 34: / Line 28: @@
 You can also create '''alternative templates''' for specific layouts by appending a view name, for example:
-<syntaxhighlight lang="text">
+<code>
 collection.grid.liquid
 product.long.liquid
-</syntaxhighlight>
+</code>
 Use the query parameter <code>?view=&lt;view&gt;</code> in a URL to load an alternate template.

@@ Line 175: / Line 175: @@
 * [[Using Global Javascript Assets]]
 * [[Liquid Collection Navigation]]
-* [[Liquid Template Variables]]
+* [[Liquid Variable Reference]]

@@ Line 172: / Line 172: @@
 == References ==
-* [https://www.spiffystores.co.nz/kb/The_Spiffy_Theme_Guide The Spiffy Theme Guide]
+* [[The Spiffy Theme Guide]]
-* [https://www.spiffystores.net.au/kb/Using_Global_Javascript_Assets Using Global Javascript Assets]
+* [[Using Global Javascript Assets]]
-* [https://www.spiffystores.co.nz/kb/Liquid_Collection_Navigation Liquid Collection Navigation]
+* [[Liquid Collection Navigation]]
-* [https://www.spiffystores.net.au/kb/Liquid_Template_Variables_-_header Liquid Template Variables – header]
+* [[Liquid Template Variables]]