App Developers: What's best way to determine which Shopify theme the user is viewing?

Solved
Highlighted
Excursionist
14 1 3

I'm creating an app that adjusts certain parts of the UI depending on the theme that the user is viewing. 

 

For example, there's 8 Free Shopify Themes available for shop owners to install:

  • Narrative
  • Debut
  • Venture
  • Boundless
  • Simple
  • Brooklyn
  • Supply
  • Minimal

Ideally, it'd be nice if there was an ID on the <html> tag to hook into with javascript so you can do things like:

const VentureTheme = document.querySelector('#ventureTheme');

But sadly this does not exist.

 

I'm curious if any developers can share any tips n tricks on what they've learned along the way for targeted theme customization.

 

Thanks!

0 Likes
Highlighted

This is an accepted solution.

The Shopify rest api has a theme object that includes a 'name' property.

https://help.shopify.com/en/api/reference/online-store/theme

 

Hope that helps.

 

 

Regards,

Tom

 

 

Shopify Partner & Developer
If it's a problem you can't solve the job is not too small - get in touch
littleventures.net
contact@littleventures.net

Print or download a PDF catalog for your store in minutes - Shop-2-Doc
1 Like
Highlighted
Excursionist
14 1 3

Thanks! I actually inspected the code and did a ctrl+f for "theme" and found all the hooks.

 

So with any theme you come across, you can use the following code and print out the theme name:

 

Shopify.theme.name
0 Likes
Highlighted
Excursionist
14 1 3

just to be completely thorough, the code I'm using to generate a theme body class is:

 

let themeName = Shopify.theme.name;
let className = 'oneezy__theme-' + themeName.split(" ")[0].toLowerCase();
let body = document.querySelector('body')

body.classList.add(className);

Result: <body class="oneezy__theme-name">

0 Likes