Add a theme info button

As a theme author, you can include some additional information about your theme behind an info button. It opens as a modal that looks something like this:

Theme info modal

We recommend being brief and including things like:

  • the theme author name
  • the theme version
  • a link to the theme's documentation
  • your company logo.

The info button appears on the Customize theme page beside the name of the theme:

Theme info btn

Add the button to your theme

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

  2. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  3. Click the Configs folder.

    Config folder
  4. Click settings_schema.json to open it in the online code editor.

  5. Copy and paste the following code anywhere between the opening [ and closing ]:

     {
        "name": "theme_info",
        "logo": "https:\/\/cdn.shopify.com\/s\/files\/1\/0070\/7032\/files\/2010_6_23_Shopify-Green_256x256.jpg",
        "settings": [
          {
            "type": "header",
            "content": "Shopify Cool Theme"
          },
          {
            "type": "paragraph",
            "content": "v1.0.0.5"
          },
          {
            "type": "paragraph",
            "content": "See the theme [documentation](https:\/\/help.shopify.com\/themes) on the Shopify site for more information about this wonderful theme."
          }
        ]
      },
    
  6. Edit the plain text information to match your theme's info.

Code requirements

At a minimum, your theme info button code must contain:

  • "name": "theme_info".
  • "settings" with at least 1 header or paragraph.

This means the minimum viable info button code looks like:

{ "name": "theme_info",
  "settings": [
      {
        "type": "header",
        "content": "Shopify Cool Theme"
      }
    ]
 },

If you choose to include a logo, it must be accessible through the https:// protocol.

Want to discuss this page?

Visit the Shopify Community