Adding Customizable Templates to Vintage Shopify Themes

Adding Customizable Templates to Vintage Shopify Themes

Vintage Shopify themes, while powerful, often lack the flexibility that Online Store 2.0 (OS 2.0) offers with its “sections everywhere” feature. Fortunately, you can add customizable templates to these older themes without losing their existing features. This guide will walk you through the process of creating custom page, collection, and product templates using JSON-like structures to mimic OS 2.0 functionality.

Step-by-Step Guide

1. Understanding the JSON Template Structure

For each type of page (custom page, collection, product), we’ll define a template using a JSON-like structure. Here’s a breakdown of each part of the structure:

wrapper: Specifies a unique wrapper element ID for the template.
sections: Defines the main section for the template.
order: Determines the order of the sections.

2. Creating a Custom Page Template

First, let’s create a custom page template. This template allows you to customize individual pages using the Shopify customizer.

JSON Template for Custom Page

{
  "wrapper": "div#page-sections-template",
  "sections": {
    "main": {
      "type": "page-sections-template",
      "settings": {}
    }
  },
  "order": ["main"]
}

Explanation

wrapper: div#page-sections-template is a unique identifier for the page template.
sections: Defines a single section named main with a type of page-sections-template.
order: Specifies that the main section is the only section and should appear first.

Example

Create the Section File: In your theme’s sections directory, create a file named page-sections-template.liquid.

<div id="page-sections-template">
  <!-- Custom page content goes here -->
  {% section 'page-sections-template' %}
</div>

Add the Template: In your theme’s templates directory, create a file named page.sections.liquid.

{% layout 'page' %}
<div id="page-sections-template">
  {{ content_for_layout }}
</div>

3. Creating a Custom Collection Template

Next, we’ll create a custom collection template. This template will allow you to customize collection pages.

JSON Template for Custom Collection

{
  "wrapper": "div#collection-template",
  "sections": {
    "main": {
      "type": "collection-template",
      "settings": {}
    }
  },
  "order": ["main"]
}

Explanation

wrapper: div#collection-template uniquely identifies the collection template.
sections: Defines a single section named main with a type of collection-template.
order: Specifies that the main section should appear first.

Example

Create the Section File: In your theme’s sections directory, create a file named collection-template.liquid.

<div id="collection-template">
  <!-- Custom collection content goes here -->
  {% section 'collection-template' %}
</div>

Add the Template: In your theme’s templates directory, create a file named collection.sections.liquid.

liquidCopy code{% layout 'collection' %}
<div id="collection-template">
  {{ content_for_layout }}
</div>

4. Creating a Custom Product Template

Finally, let’s create a custom product template. This template allows you to customize individual product pages.

JSON Template for Custom Product

{
  "wrapper": "div#product-template.product-2-0",
  "sections": {
    "main": {
      "type": "product-template",
      "settings": {}
    }
  },
  "order": ["main"]
}

Explanation

wrapper: div#product-template.product-2-0 uniquely identifies the product template and adds a class for further styling.
sections: Defines a single section named main with a type of product-template.
order: Specifies that the main section should appear first.

Example

Create the Section File: In your theme’s sections directory, create a file named product-template.liquid.

<div id="product-template" class="product-2-0">
  <!-- Custom product content goes here -->
  {% section 'product-template' %}
</div>

Add the Template: In your theme’s templates directory, create a file named product.sections.liquid.

{% layout 'product' %}
<div id="product-template" class="product-2-0">
  {{ content_for_layout }}
</div>

5. Using the New Templates

To use these new templates:

Navigate to a Page, Collection, or Product: In your Shopify admin, go to the page, collection, or product you want to customize.
Select the New Template: In the template section of the page settings, select the new template you created (page.sections, collection.sections, product.sections).
Customize in Theme Editor: Open the Shopify customizer to edit the sections and settings for your newly templated page, collection, or product.

Conclusion

By following these steps, you can add the ability to use customizable templates in vintage Shopify themes without losing their existing features. This approach allows you to take advantage of some of the flexible and powerful features found in Online Store 2.0, providing a more dynamic and engaging experience for your customers.