This post will guide you to upgrade your old current Shopify theme to store 2.0. The process is very simple, you just need to duplicate and download your current Shopify theme, and unzip it.
The next step is to install Ruby 2.7+ and Shopify CLI on your development system.
I assume that you already have a Shopify developer account because you require one Shopify partner’s account to connect to a development environment to communicate with your store. You also should connect your store with Shopify partner’s account.
To upgrade Shopify theme to store 2.0, you just require to move JSON supported .liquid files to /sections/ folder with xxxxxx-template.liquid suffix and create JSON files for those xx-template.liquid files but name these JSON files by replacing /xxxxx-template.liquid/ with /xxxxx.json/ in /templates/ folder.
Duplicate & Download Shopify Theme
To duplicate and download current Shopify theme, log in to your Shopify store admin area and
- Log in to Shopify admin
- Click Online Store – themes
- Click Actions on active theme
- Duplicate OR Download Theme Files
- Wait for download email link
- Download theme zip folder from the link in the email
- Unzip the folder and rename
- Open this folder in your text-editor
- Open /templates/ folder and have a look at the files
Install Ruby 2.7+ and Shopify CLI Gem
Depending upon your system, you should download and Ruby 2.7+, once you have installed Ruby 2.7+ on your system. Relaunch your terminal or command line and install Shopify CLI.
gem install shopify-cliConvert xxxx.liquid template to JSON template
I am going to show you how you can convert common and supported x.liquid template files to x.json templates for your Shopify store 2.0
I’ll be using Debut theme to demonstrate this Shopify theme upgrade.
404.liquid to 404.json
To convert your 404.liquid to 404.json liquid, you just need to copy the code from 404.liquid file, create a file in /sections/ folder named 404-template.liquid and paste the code from 404.liquid, or move 404.liquid to /sections/ and rename it to 404-template.liquid.
<div class="page-width">
<div class="empty-page-content text-center">
<h1>{{ 'general.404.title' | t }}</h1>
<p>{{ 'general.404.subtext' | t }}</p>
<p>
<a href="{{ routes.root_url }}" class="btn btn--has-icon-after">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
</p>
</div>
</div>
Now, create a 404.json file in /templates/ folder and paste the following code and save.
{
"sections": {
"main": {
"type": "404",
"settings": {
}
}
},
"order": [
"main"
]
}Convert product.liquid to product.json
To convert your product.liquid to product.json liquid, you just need to copy the code from product.liquid file, create a file in /sections/ folder named product -template.liquid and paste the code from product .liquid, or move product .liquid to /sections/ and rename it to product -template.liquid.
<div class="product-template__container page-width"
id="ProductSection-{{ section.id }}"
data-section-id="{{ section.id }}"
data-section-type="product"
data-enable-history-state="true"
data-ajax-enabled="{{ settings.enable_ajax }}"
>
{% comment %}
Get first variant, or deep linked one
{% endcomment %}
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign compare_at_price = current_variant.compare_at_price -%}
{%- assign price = current_variant.price -%}
{% case section.settings.image_size %}
{% when 'small' %}
{%- assign product_image_width = 'medium-up--one-third' -%}
{%- assign product_description_width = 'medium-up--two-thirds' -%}
{%- assign product_thumbnail_width = 'medium-up--one-third' -%}
{%- assign height = 345 -%}
{% when 'medium' %}
{%- assign product_image_width = 'medium-up--one-half' -%}
{%- assign product_description_width = 'medium-up--one-half' -%}
{%- assign product_thumbnail_width = 'medium-up--one-quarter' -%}
{%- assign height = 530 -%}
{% when 'large' %}
{%- assign product_image_width = 'medium-up--two-thirds' -%}
{%- assign product_description_width = 'medium-up--one-third' -%}
{%- assign product_thumbnail_width = 'medium-up--one-fifth' -%}
{%- assign height = 720 -%}
{% when 'full' %}
{%- assign product_image_width = '' -%}
{%- assign product_description_width = '' -%}
{%- assign product_thumbnail_width = 'medium-up--one-eighth' -%}
{%- assign height = 1090 -%}
{%- assign enable_zoom = false -%}
{% endcase %}
<div class="grid product-single{% if section.settings.enable_payment_button %} product-single--{{ section.settings.image_size }}-image{% endif %}">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
{% for image in product.images %}
{% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_class %}product-featured-img{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', image: image, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
<div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
<div
id="{{ zoom_img_id }}"
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
data-image-id="{{ image.id }}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img id="{{ img_id }}"
class="feature-row__image {{ img_class }} lazyload{% unless featured_image == image %} lazypreload{% endunless %}"
src="{{ image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
tabindex="-1"
alt="{{ image.alt | escape }}">
</div>
</div>
{% endfor %}
# huge file, this is not complete code for product-template.liquid
Now, create a product.json file in /templates/ folder and paste the following code and save.
{
"sections": {
"main": {
"type": "product-template",
"settings": {
}
},
"recommend": {
"type": "product-recommendations",
"settings": {
}
}
},
"order": [
"main",
"recommend"
]
}Theme Upgrade Help
If you are looking for help and support for Shopify theme upgrade to store 2.0, I am happy to help you with this upgrade.