Migrating from Legacy Shopify Theme to Shopify 2.0: A Complete Product Template Transformation

Project Overview

We successfully migrated a legacy Shopify theme’s product page to Shopify 2.0 architecture, enabling merchants to select different product templates and customize their shopping experience like never before.

Key Migration Steps

Template architecture transformation
- Before: Single product.liquid template with hardcoded layout
- After: Multiple JSON templates with flexible, customizable sections
- Result: Merchants can choose from different product page layouts
Created Shopify 2.0 JSON templates
- templates/product.default.json
- templates/product.alternative.json
- templates/product.minimal.json
Section modernization
- New section: sections/main-product.liquid with clean Shopify 2.0 schema
- Backward compatibility: Kept original product-template.liquid for existing stores
- Enhanced settings: Added customizable options for better merchant control

Major Improvements

Template flexibility
- Multiple layout options: Default, Alternative, and Minimal templates
- Customizable settings: Button text, layout options, media display
- Merchant control: Easy template switching in theme editor
Enhanced customization
- Custom button text: Change “Add to cart” to “Buy now”, “Purchase”, etc.
- Layout variations: Stacked vs thumbnail galleries, different button sizes
- Feature toggles: Enable/disable vendor display, social sharing, quantity picker
Developer experience
- Clean code structure: Proper separation of concerns
- Translation support: Maintained localization capabilities
- Schema validation: Proper JSON schema for theme editor

Technical Implementation

Template structure

templates/
  product.default.json
  product.alternative.json
  product.minimal.json
sections/
  main-product.liquid
  product-template.liquid  (legacy, retained for compatibility)

Minimal example of a 2.0 product JSON template:

{
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {
        "add_to_cart_button_text": "Add to cart",
        "media_layout": "stacked",
        "show_vendor": true,
        "show_share": true,
        "show_quantity": true,
        "enable_dynamic_checkout": true
      }
    }
  },
  "order": ["main"]
}

Section architecture

Key settings added to sections/main-product.liquid:

{% schema %}
{
  "name": "Main product",
  "settings": [
    { "type": "text", "id": "add_to_cart_button_text", "label": "Button text", "default": "Add to cart" },
    { "type": "select", "id": "media_layout", "label": "Media layout", "options": [
      { "value": "stacked", "label": "Stacked" },
      { "value": "thumbnails", "label": "Thumbnails" }
    ], "default": "stacked" },
    { "type": "checkbox", "id": "show_vendor", "label": "Show vendor", "default": true },
    { "type": "checkbox", "id": "show_share", "label": "Show social sharing", "default": true },
    { "type": "checkbox", "id": "show_quantity", "label": "Show quantity picker", "default": true },
    { "type": "checkbox", "id": "enable_dynamic_checkout", "label": "Show dynamic checkout button", "default": true }
  ],
  "blocks": [
    { "type": "variant_picker", "name": "Variant picker" },
    { "type": "buy_buttons", "name": "Buy buttons" }
  ],
  "presets": [{ "name": "Main product" }]
}
{% endschema %}

Key features added

Custom button text setting: add_to_cart_button_text
Flexible media layout: Stacked vs thumbnail options
Enhanced product options: Radio buttons vs dropdown selectors
Payment button integration: Dynamic checkout options

Template Variations

Default template
- Full‑featured product page
- Vendor display enabled
- Social sharing included
- Product recommendations
Alternative template
- Different media layout (thumbnails)
- Custom button text (e.g., “Buy now”)
- Simplified recommendations
Minimal template
- Clean, distraction‑free design
- Large purchase button
- No extra features

Migration Benefits

For merchants

Easy template switching: No code changes required
Customizable experience: Tailor product pages to their brand
Better performance: Optimized Shopify 2.0 architecture
Future‑proof: Compatible with latest Shopify features

For developers

Maintainable code: Clean, organized structure
Extensible design: Easy to add new templates
Best practices: Follows Shopify 2.0 guidelines
Documentation: Comprehensive README and inline comments

Business Impact

Enhanced user experience

Flexible layouts: Different templates for different product types
Brand consistency: Customizable button text and styling
Improved conversion: Optimized layouts for better sales

Operational efficiency

Quick customization: No developer intervention needed
A/B testing ready: Easy template switching for experiments
Scalable solution: Works across all product types

Why Upgrade to Shopify Online Store 2.0 — No New Theme Required

You don’t need to replace your theme to benefit from Shopify 2.0. Most stores can upgrade their current theme by introducing JSON templates and modern sections, then progressively migrating legacy files. This preserves your brand styling and avoids a full redesign.

Why 2.0 is better

Flexible JSON architecture: Section‑based pages across templates enable true drag‑and‑drop composition—not just on the homepage.
App blocks & embeds: Install/uninstall features without editing theme code, reducing maintenance and merge conflicts.
Metafields & dynamic sources: First‑class content modeling surfaces right in the theme editor for non‑technical updates.
Performance & stability: Cleaner separation of concerns leads to leaner assets and fewer regressions over time.
Editor UX improvements: Per‑product templates, better previewing, and safer experimentation for merchants.
Future compatibility: Built to support Shopify’s newest features without re‑platforming.

No theme switch needed

We can retrofit your existing theme by:

Adding product JSON templates alongside legacy product.liquid
Migrating core sections to 2.0 schema while keeping styles
Enabling app blocks and dynamic checkout
Rolling out progressively to minimize risk

Need help upgrading without a full redesign? Contact us — we’ll scope a lightweight 2.0 upgrade path for your current theme.

Key Takeaways

Shopify 2.0 migration transforms static templates into flexible, customizable experiences
Merchant empowerment: Store owners control their product presentation
Developer efficiency: Clean, maintainable code that’s easy to extend
Future‑ready: Built on modern Shopify architecture for long‑term success

Future Possibilities

Product‑specific templates: Different layouts for different product categories
Seasonal templates: Special layouts for holidays or sales
A/B testing integration: Easy template switching for conversion optimization
Advanced customization: More granular control over product page elements

This migration demonstrates how Shopify 2.0’s flexible template system can transform a basic product page into a powerful, customizable shopping experience that grows with your business.