When building theme app extensions you’ll definitely need a way to detect the version of the theme (Vintage or Online Store 2.0). Because the integration for every version will be different.

The official Shopify docs provide only instruction for Node.js. So I’d like to share the approach for Rails that I was using in my latest Product Color Swatches app.

To detect the version I use shopify_api and extend Theme object by adding #version method. I found this solution the cleanest and easy to use. Doing the same in GraphQL will be extremely verbose so I stick with REST and shopify_api for this task.

You’ll need to add the following code to config/initializers/shopify_app.rb:

class ShopifyAPI::Theme
  # Specify templates required by the app (where app block will be installed).
  # E.g. %w[product collection index]
  APP_BLOCK_TEMPLATES = %w[product]

  def assets
    ShopifyAPI::Asset.find(:all, params: { theme_id: self.id })
  end

  def version
    @version ||= begin
      theme_assets = assets
      template_json_files = theme_assets.select do |asset|
        APP_BLOCK_TEMPLATES.any? { |t| asset.key ==  "templates/#{t}.json"}
      end
      return :vintage if template_json_files.size != APP_BLOCK_TEMPLATES.size

      template_main_sections = template_json_files.map do |template|
        asset = ShopifyAPI::Asset.find(template.key, params: { theme_id: self.id })
        json = JSON.parse(asset.value)

        main = json["sections"].find { |k, v| k == "main" || v["type"].start_with?("main-") }
        if main
          theme_assets.find { |asset| asset.key == "sections/#{main[1]["type"]}.liquid" }
        elsif template.key == "templates/index.json"
          theme_assets.find { |asset| asset.key == "sections/apps.liquid" }
        else
          nil
        end
      end.compact

      sections_with_app_block = template_main_sections.map do |asset|
        accepts_app_block = false
        file = ShopifyAPI::Asset.find(asset.key, params: { theme_id: self.id} )
        match = file.value.match(/\{\%[-\s]+schema[-\s]+\%\}([\s\S]*?)\{\%[-\s]+endschema[-\s]+\%\}/m)
        schema = match && JSON.parse(match[1])
        if schema && schema["blocks"]
          accepts_app_block = schema["blocks"].any? { |b| b["type"] == "@app" }
        end

        accepts_app_block ? file : nil
      end.compact

      if sections_with_app_block.size > 0
        :os2
      else
        :vintage
      end
    end
  end
end

You can customize which templates should be checked for app blocks support in APP_BLOCK_TEMPLATES constant. It will be different for every app. In my app users can only add app block to the product page so I need to check only product template for blocks support.

After adding this code you can use it like this:

theme = ShopifyAPI::Theme.find(THEME_ID)
theme.version
# => :os2 or :vintage

Very easy. I like that solution and I wish we could add this code to shopify_api gem eventually. In the next articles, I will tell more about my experience building theme extension.

If you like reading about Shopify app development follow me on Twitter.

UPD Nov 20, 2022:

I’ve updated the code to support ShopifyAPI 10+:

# config/initializers/shopify_app.rb

Rails.application.config.after_initialize do
  class ShopifyAPI::Theme
    # Specify templates required by the app (where app block will be installed).
    # E.g. %w[product collection index]
    APP_BLOCK_TEMPLATES = %w[product]

    def assets
      ShopifyAPI::Asset.all(theme_id: self.id)
    end

    def version
      @version ||= begin
        theme_assets = assets
        template_json_files = theme_assets.select do |asset|
          APP_BLOCK_TEMPLATES.any? { |t| asset.key ==  "templates/#{t}.json"}
        end
        return :vintage if template_json_files.size != APP_BLOCK_TEMPLATES.size

        template_main_sections = template_json_files.map do |template|
          asset = ShopifyAPI::Asset.all(theme_id: self.id, asset: {key: template.key}).first
          json = JSON.parse(asset.value)

          main = json["sections"].find { |k, v| k == "main" || v["type"].start_with?("main-") }
          if main
            theme_assets.find { |asset| asset.key == "sections/#{main[1]["type"]}.liquid" }
          elsif template.key == "templates/index.json"
            theme_assets.find { |asset| asset.key == "sections/apps.liquid" }
          else
            nil
          end
        end.compact

        sections_with_app_block = template_main_sections.map do |asset|
          accepts_app_block = false
          file = ShopifyAPI::Asset.all(theme_id: self.id, asset: {key: asset.key}).first
          match = file.value.match(/\{\%[-\s]+schema[-\s]+\%\}([\s\S]*?)\{\%[-\s]+endschema[-\s]+\%\}/m)
          schema = match && JSON.parse(match[1])
          if schema && schema["blocks"]
            accepts_app_block = schema["blocks"].any? { |b| b["type"] == "@app" }
          end

          accepts_app_block ? file : nil
        end.compact

        if sections_with_app_block.size > 0
          :os2
        else
          :vintage
        end
      end
    end
  end
end