Access liquid objects from CSS in theme app extension

diego-navarro
Shopify Partner
20 1 13

In order to follow the UX guidelines for theme app extensions, Shopify says that App blocks should inherit styling properties from the theme, such as typography and colors. 

 

Is there a way to access the colors and typograhpy of the theme directly on the stylesheet of the theme app extension?

 

A workaround could be to style directly on the liquid file of the theme app extension, by accesing the properties such as settings.colors_background_1, but that is not a clean solution.

 

I think Shopify is currently providing an awful developer experience in theme app extension. There is not enough documentation, and only a few people knows the answers of the problems of the community.

 

Thanks in advance.

Replies 2 (2)

wristbands
Shopify Partner
20 3 8

I'm having the exact same problem! So far I've been able to get some similar styling in my theme app extension by inspecting the files from the theme and copying the class names of certain HTML elements, but it's not perfect.

Liam
Shopify Staff
2731 302 777

Hi Diego,

 

As you mentioned, you can apply styles directly within the Liquid file of the theme app extension. While this isn't the best solution, it's a direct way to access theme settings and apply them to your app's elements. To keep things organized, you should consider using this method only for properties that need to inherit from the theme, and use external stylesheets for all other styles.

Another option would be to use JavaScript to read computed styles from theme elements and apply them to your app's elements. This can be done using the `window.getComputedStyle()` method.
This is a dynamic solution that adapts to changes in the theme's styles, but it requires additional JavaScript processing, which might impact performance.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog