Choose a version:

theme

query

Requires read_themes access scope.

Returns an OnlineStoreTheme by its ID. Use this query to retrieve theme metadata and access the theme's files, which include templates, assets, translations, and configuration files.

Anchor to Arguments

Arguments

Anchor to idid •ID! required: The ID of the theme.

Was this section helpful?

Anchor to Possible returnsPossible returns

Anchor to OnlineStoreThemeOnlineStoreTheme •OnlineStoreTheme: A theme for display on the storefront. Themes control the visual appearance and functionality of the online store through templates, stylesheets, and assets that determine how products, collections, and other content display to customers.

Each theme has a role that indicates its status. Main themes are live on the storefront, unpublished themes are inactive, demo themes require purchase before publishing, and development themes are temporary for previewing during development. The theme includes translations for multi-language support.

Was this section helpful?

Examples

Get file content by theme id and filename

Query

query {
  theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
    id
    name
    role
    files(filenames: ["assets/index.js"], first: 1) {
      nodes {
        body {
          ... on OnlineStoreThemeFileBodyText {
            content
          }
        }
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query { theme(id: \"gid://shopify/OnlineStoreTheme/225007463\") { id name role files(filenames: [\"assets/index.js\"], first: 1) { nodes { body { ... on OnlineStoreThemeFileBodyText { content } } } } } }"
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files(filenames: ["assets/index.js"], first: 1) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files(filenames: ["assets/index.js"], first: 1) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }
QUERY

response = client.query(query: query)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files(filenames: ["assets/index.js"], first: 1) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }`,
});

Response

{
  "theme": {
    "id": "gid://shopify/OnlineStoreTheme/225007463",
    "name": "Comfort",
    "role": "UNPUBLISHED",
    "files": {
      "nodes": [
        {
          "body": {
            "content": "console.log('foo');"
          }
        }
      ]
    }
  }
}

Get theme by id

Query

query {
  theme(id: "gid://shopify/OnlineStoreTheme/529529152") {
    id
    name
    role
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query { theme(id: \"gid://shopify/OnlineStoreTheme/529529152\") { id name role } }"
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/529529152") {
      id
      name
      role
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/529529152") {
      id
      name
      role
    }
  }
QUERY

response = client.query(query: query)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `query {
    theme(id: "gid://shopify/OnlineStoreTheme/529529152") {
      id
      name
      role
    }
  }`,
});

Response

{
  "theme": {
    "id": "gid://shopify/OnlineStoreTheme/529529152",
    "name": "Comfort",
    "role": "MAIN"
  }
}

Get theme files by theme id

Query

query {
  theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
    id
    name
    role
    files {
      edges {
        node {
          filename
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query { theme(id: \"gid://shopify/OnlineStoreTheme/225007463\") { id name role files { edges { node { filename body { ... on OnlineStoreThemeFileBodyText { content } } } } } } }"
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files {
        edges {
          node {
            filename
            body {
              ... on OnlineStoreThemeFileBodyText {
                content
              }
            }
          }
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files {
        edges {
          node {
            filename
            body {
              ... on OnlineStoreThemeFileBodyText {
                content
              }
            }
          }
        }
      }
    }
  }
QUERY

response = client.query(query: query)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files {
        edges {
          node {
            filename
            body {
              ... on OnlineStoreThemeFileBodyText {
                content
              }
            }
          }
        }
      }
    }
  }`,
});

Response

{
  "theme": {
    "id": "gid://shopify/OnlineStoreTheme/225007463",
    "name": "Comfort",
    "role": "UNPUBLISHED",
    "files": {
      "edges": [
        {
          "node": {
            "filename": "assets/index.js",
            "body": {
              "content": "console.log('foo');"
            }
          }
        },
        {
          "node": {
            "filename": "assets/styles.css",
            "body": {
              "content": "p { color: red; }"
            }
          }
        },
        {
          "node": {
            "filename": "layout/theme.liquid",
            "body": {
              "content": "<html><head>{{ content_for_header }}</head><body><p>sandbox</p><div>{{ content_for_layout }}</div></body></html>"
            }
          }
        }
      ]
    }
  }
}

Retrieves a list of assets for a theme

Query

query ThemeFilesPaginated($themeId: ID!) {
  theme(id: $themeId) {
    files(first: 50) {
      edges {
        node {
          body {
            ... on OnlineStoreThemeFileBodyBase64 {
              contentBase64
            }
            ... on OnlineStoreThemeFileBodyText {
              content
            }
            ... on OnlineStoreThemeFileBodyUrl {
              url
            }
          }
          checksumMd5
          contentType
          createdAt
          filename
          size
          updatedAt
        }
        cursor
      }
      pageInfo {
        endCursor
        hasNextPage
        hasPreviousPage
        startCursor
      }
      userErrors {
        code
        filename
      }
    }
  }
}

Variables

{
  "themeId": "gid://shopify/OnlineStoreTheme/225007463"
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query ThemeFilesPaginated($themeId: ID!) { theme(id: $themeId) { files(first: 50) { edges { node { body { ... on OnlineStoreThemeFileBodyBase64 { contentBase64 } ... on OnlineStoreThemeFileBodyText { content } ... on OnlineStoreThemeFileBodyUrl { url } } checksumMd5 contentType createdAt filename size updatedAt } cursor } pageInfo { endCursor hasNextPage hasPreviousPage startCursor } userErrors { code filename } } } }",
 "variables": {
    "themeId": "gid://shopify/OnlineStoreTheme/225007463"
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query ThemeFilesPaginated($themeId: ID!) {
    theme(id: $themeId) {
      files(first: 50) {
        edges {
          node {
            body {
              ... on OnlineStoreThemeFileBodyBase64 {
                contentBase64
              }
              ... on OnlineStoreThemeFileBodyText {
                content
              }
              ... on OnlineStoreThemeFileBodyUrl {
                url
              }
            }
            checksumMd5
            contentType
            createdAt
            filename
            size
            updatedAt
          }
          cursor
        }
        pageInfo {
          endCursor
          hasNextPage
          hasPreviousPage
          startCursor
        }
        userErrors {
          code
          filename
        }
      }
    }
  }`,
  {
    variables: {
        "themeId": "gid://shopify/OnlineStoreTheme/225007463"
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query ThemeFilesPaginated($themeId: ID!) {
    theme(id: $themeId) {
      files(first: 50) {
        edges {
          node {
            body {
              ... on OnlineStoreThemeFileBodyBase64 {
                contentBase64
              }
              ... on OnlineStoreThemeFileBodyText {
                content
              }
              ... on OnlineStoreThemeFileBodyUrl {
                url
              }
            }
            checksumMd5
            contentType
            createdAt
            filename
            size
            updatedAt
          }
          cursor
        }
        pageInfo {
          endCursor
          hasNextPage
          hasPreviousPage
          startCursor
        }
        userErrors {
          code
          filename
        }
      }
    }
  }
QUERY

variables = {
  "themeId": "gid://shopify/OnlineStoreTheme/225007463"
}

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "query": `query ThemeFilesPaginated($themeId: ID!) {
      theme(id: $themeId) {
        files(first: 50) {
          edges {
            node {
              body {
                ... on OnlineStoreThemeFileBodyBase64 {
                  contentBase64
                }
                ... on OnlineStoreThemeFileBodyText {
                  content
                }
                ... on OnlineStoreThemeFileBodyUrl {
                  url
                }
              }
              checksumMd5
              contentType
              createdAt
              filename
              size
              updatedAt
            }
            cursor
          }
          pageInfo {
            endCursor
            hasNextPage
            hasPreviousPage
            startCursor
          }
          userErrors {
            code
            filename
          }
        }
      }
    }`,
    "variables": {
        "themeId": "gid://shopify/OnlineStoreTheme/225007463"
    },
  },
});

Response

{
  "theme": {
    "files": {
      "edges": [
        {
          "node": {
            "body": {
              "content": "console.log('foo');"
            },
            "checksumMd5": "fd33535a878f593c91bf93c7b39da272",
            "contentType": "application/javascript",
            "createdAt": "2024-10-30T22:18:48Z",
            "filename": "assets/index.js",
            "size": "19",
            "updatedAt": "2024-10-30T22:18:48Z"
          },
          "cursor": "ImFzc2V0c1wvaW5kZXguanMi"
        },
        {
          "node": {
            "body": {
              "content": "p { color: red; }"
            },
            "checksumMd5": "5fc2748b49b0a877ea0bb50a105038ab",
            "contentType": "text/css",
            "createdAt": "2024-10-30T22:18:48Z",
            "filename": "assets/styles.css",
            "size": "17",
            "updatedAt": "2024-10-30T22:18:48Z"
          },
          "cursor": "ImFzc2V0c1wvc3R5bGVzLmNzcyI="
        },
        {
          "node": {
            "body": {
              "content": "<html><head>{{ content_for_header }}</head><body><p>sandbox</p><div>{{ content_for_layout }}</div></body></html>"
            },
            "checksumMd5": null,
            "contentType": "application/x-liquid",
            "createdAt": "2010-07-12T19:31:50Z",
            "filename": "layout/theme.liquid",
            "size": "3252",
            "updatedAt": "2010-07-12T19:31:50Z"
          },
          "cursor": "ImxheW91dFwvdGhlbWUubGlxdWlkIg=="
        }
      ],
      "pageInfo": {
        "endCursor": "ImxheW91dFwvdGhlbWUubGlxdWlkIg==",
        "hasNextPage": false,
        "hasPreviousPage": false,
        "startCursor": "ImFzc2V0c1wvaW5kZXguanMi"
      },
      "userErrors": []
    }
  }
}

Retrieves a single asset for a theme

Query

query ThemeFiles($themeId: ID!, $filenames: [String!]!) {
  theme(id: $themeId) {
    files(filenames: $filenames) {
      nodes {
        body {
          ... on OnlineStoreThemeFileBodyBase64 {
            contentBase64
          }
          ... on OnlineStoreThemeFileBodyText {
            content
          }
          ... on OnlineStoreThemeFileBodyUrl {
            url
          }
        }
        checksumMd5
        contentType
        createdAt
        filename
        size
        updatedAt
      }
      userErrors {
        code
        filename
      }
    }
  }
}

Variables

{
  "themeId": "gid://shopify/OnlineStoreTheme/225007463",
  "filenames": [
    "assets/index.js"
  ]
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query ThemeFiles($themeId: ID!, $filenames: [String!]!) { theme(id: $themeId) { files(filenames: $filenames) { nodes { body { ... on OnlineStoreThemeFileBodyBase64 { contentBase64 } ... on OnlineStoreThemeFileBodyText { content } ... on OnlineStoreThemeFileBodyUrl { url } } checksumMd5 contentType createdAt filename size updatedAt } userErrors { code filename } } } }",
 "variables": {
    "themeId": "gid://shopify/OnlineStoreTheme/225007463",
    "filenames": [
      "assets/index.js"
    ]
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query ThemeFiles($themeId: ID!, $filenames: [String!]!) {
    theme(id: $themeId) {
      files(filenames: $filenames) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyBase64 {
              contentBase64
            }
            ... on OnlineStoreThemeFileBodyText {
              content
            }
            ... on OnlineStoreThemeFileBodyUrl {
              url
            }
          }
          checksumMd5
          contentType
          createdAt
          filename
          size
          updatedAt
        }
        userErrors {
          code
          filename
        }
      }
    }
  }`,
  {
    variables: {
        "themeId": "gid://shopify/OnlineStoreTheme/225007463",
        "filenames": [
            "assets/index.js"
        ]
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query ThemeFiles($themeId: ID!, $filenames: [String!]!) {
    theme(id: $themeId) {
      files(filenames: $filenames) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyBase64 {
              contentBase64
            }
            ... on OnlineStoreThemeFileBodyText {
              content
            }
            ... on OnlineStoreThemeFileBodyUrl {
              url
            }
          }
          checksumMd5
          contentType
          createdAt
          filename
          size
          updatedAt
        }
        userErrors {
          code
          filename
        }
      }
    }
  }
QUERY

variables = {
  "themeId": "gid://shopify/OnlineStoreTheme/225007463",
  "filenames": [
    "assets/index.js"
  ]
}

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "query": `query ThemeFiles($themeId: ID!, $filenames: [String!]!) {
      theme(id: $themeId) {
        files(filenames: $filenames) {
          nodes {
            body {
              ... on OnlineStoreThemeFileBodyBase64 {
                contentBase64
              }
              ... on OnlineStoreThemeFileBodyText {
                content
              }
              ... on OnlineStoreThemeFileBodyUrl {
                url
              }
            }
            checksumMd5
            contentType
            createdAt
            filename
            size
            updatedAt
          }
          userErrors {
            code
            filename
          }
        }
      }
    }`,
    "variables": {
        "themeId": "gid://shopify/OnlineStoreTheme/225007463",
        "filenames": [
            "assets/index.js"
        ]
    },
  },
});

Response

{
  "theme": {
    "files": {
      "nodes": [
        {
          "body": {
            "content": "console.log('foo');"
          },
          "checksumMd5": "fd33535a878f593c91bf93c7b39da272",
          "contentType": "application/javascript",
          "createdAt": "2024-10-30T22:18:46Z",
          "filename": "assets/index.js",
          "size": "19",
          "updatedAt": "2024-10-30T22:18:46Z"
        }
      ],
      "userErrors": []
    }
  }
}

Retrieves a single theme by its ID

Query

query Theme($id: ID!) {
  theme(id: $id) {
    createdAt
    id
    name
    prefix
    processing
    processingFailed
    role
    themeStoreId
    updatedAt
  }
}

Variables

{
  "id": "gid://shopify/OnlineStoreTheme/529529152"
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query Theme($id: ID!) { theme(id: $id) { createdAt id name prefix processing processingFailed role themeStoreId updatedAt } }",
 "variables": {
    "id": "gid://shopify/OnlineStoreTheme/529529152"
  }
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query Theme($id: ID!) {
    theme(id: $id) {
      createdAt
      id
      name
      prefix
      processing
      processingFailed
      role
      themeStoreId
      updatedAt
    }
  }`,
  {
    variables: {
        "id": "gid://shopify/OnlineStoreTheme/529529152"
    },
  },
  );
  const json = await response.json();
  return json.data;
}

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query Theme($id: ID!) {
    theme(id: $id) {
      createdAt
      id
      name
      prefix
      processing
      processingFailed
      role
      themeStoreId
      updatedAt
    }
  }
QUERY

variables = {
  "id": "gid://shopify/OnlineStoreTheme/529529152"
}

response = client.query(query: query, variables: variables)

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: {
    "query": `query Theme($id: ID!) {
      theme(id: $id) {
        createdAt
        id
        name
        prefix
        processing
        processingFailed
        role
        themeStoreId
        updatedAt
      }
    }`,
    "variables": {
        "id": "gid://shopify/OnlineStoreTheme/529529152"
    },
  },
});

Response

{
  "theme": {
    "createdAt": "2024-10-30T22:18:09Z",
    "id": "gid://shopify/OnlineStoreTheme/529529152",
    "name": "Comfort",
    "prefix": "/t/1",
    "processing": false,
    "processingFailed": false,
    "role": "MAIN",
    "themeStoreId": 1234,
    "updatedAt": "2024-10-30T22:18:09Z"
  }
}

Examples

Open in GraphiQL

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {

const { admin } = await authenticate.admin(request);

const response = await admin.graphql(

`#graphql

query {

theme(id: "gid://shopify/OnlineStoreTheme/225007463") {

name

role

files(filenames: ["assets/index.js"], first: 1) {

nodes {

body {

... on OnlineStoreThemeFileBodyText {

content

}

}`,

);

const json = await response.json();

return json.data;

}

GQL

query {
  theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
    id
    name
    role
    files(filenames: ["assets/index.js"], first: 1) {
      nodes {
        body {
          ... on OnlineStoreThemeFileBodyText {
            content
          }
        }
      }
    }
  }
}

cURL

curl -X POST \
https://your-development-store.myshopify.com/admin/api/2025-01/graphql.json \
-H 'Content-Type: application/json' \
-H 'X-Shopify-Access-Token: {access_token}' \
-d '{
"query": "query { theme(id: \"gid://shopify/OnlineStoreTheme/225007463\") { id name role files(filenames: [\"assets/index.js\"], first: 1) { nodes { body { ... on OnlineStoreThemeFileBodyText { content } } } } } }"
}'

React Router

import { authenticate } from "../shopify.server";

export const loader = async ({request}) => {
  const { admin } = await authenticate.admin(request);
  const response = await admin.graphql(
    `#graphql
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files(filenames: ["assets/index.js"], first: 1) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }`,
  );
  const json = await response.json();
  return json.data;
}

Node.js

const client = new shopify.clients.Graphql({session});
const data = await client.query({
  data: `query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files(filenames: ["assets/index.js"], first: 1) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }`,
});

Ruby

session = ShopifyAPI::Auth::Session.new(
  shop: "your-development-store.myshopify.com",
  access_token: access_token
)
client = ShopifyAPI::Clients::Graphql::Admin.new(
  session: session
)

query = <<~QUERY
  query {
    theme(id: "gid://shopify/OnlineStoreTheme/225007463") {
      id
      name
      role
      files(filenames: ["assets/index.js"], first: 1) {
        nodes {
          body {
            ... on OnlineStoreThemeFileBodyText {
              content
            }
          }
        }
      }
    }
  }
QUERY

response = client.query(query: query)

Response

JSON

{

"theme": {

"id": "gid://shopify/OnlineStoreTheme/225007463",

"name": "Comfort",

"role": "UNPUBLISHED",

"files": {

"nodes": [

{

"body": {

"content": "console.log('foo');"

}

]

}