Using SkillSuite with custom Shopify themes

The SkillSuite Shopify App offers you an easy way to add custom sections to your store, which allows your students to access their courses within your store. However, the sections functionality can only be used with JSON templates.

If your current theme is not using JSON templates, you will need to create a custom JSON page to insert the SkillSuite section. Follow the steps below to create this JSON page:

Step 01

In your Shopify dashboard, click on Online Store (side menu) and then click on Themes. On this new page, click on the menu button (…) and then on Edit code.

Step 02

Under the Templates folder, click in Add a new template. On the modal window, select the template page, check the option for JSON and give the file the name: skillsuite. Click on Done to finish.

On this new template (page.skillsuite.json), insert the following code:

{
  "sections": {
    "SkillSuite": {
      "type": "apps",
      "settings": {}
    }
  },
  "order": [
    "SkillSuite"
  ]
}

Step 03

Under the Sections folder, click in Add a new section. On the modal window, give the file the name: skillsuite. Click on Done to finish.

On this new section (skillsuite.liquid), insert the following code:

{% schema %}
  {
    "name": "SkillSuite Blocks",
    "settings": [],
    "blocks": [
      {
        "type": "@app"
      }
    ],
    "presets": [
      {
        "name": "SkillSuite Blocks"
      }
    ]
  }
{% endschema %}

Step 04

Now you can follow the process of creating a new page: click on Online Store and then on Pages. Add a new page (you can give it any name you like) and on the template selector, choose the skillsuite template.

Conclusion

Your page is now ready to receive the SkillSuite custom section on the theme editor. Follow the tutorial inside the app to display courses to your students.

Reference links:

https://shopify.dev/themes/architecture/templates/json-templates

https://shopify.dev/themes/architecture/sections/app-blocks#support-app-blocks-in-the-section