App blocks inherit styling properties

blue-project
New Member
2 0 2

Hi! 

I have an app under review and I have been rejected because the elements that I am adding to the store front doesn't follows the compliance:

  • App blocks inherit styling properties from the theme, such as typography and colors.

Source: UX guidelines for theme app extensions

Currently I am adding a custom button into the product section. I have checked the theme documents and seems like there is no standard way to look up for typography or colors, neither how to inherit button styles from the theme.

Seems like the class names are really arbitrary, and the CSS env vars also are arbitrary depending of the theme it makes a little bit confusing how to follow this guideline. 

I don't think that in the case of a button the solution is just change the CSS to inherit color/typography, because will be tied to the container that wraps the block, and could be totally different depending of where it is placed. 

Then if we would like to find the elements from the theme options this will work only for 2.0 themes, and if, they are using the same base configuration file, because as I know, they could be highly customisable. I can't see an obvious way to solve this issue. 

I only found one potentially related post on the forum here: https://community.shopify.com/c/technical-q-a/app-blocks-theming/m-p/1284209#M63672 but with no answers yet.

I would really appreciate your help.

Thanks.

Reply 1 (1)
Sage_
Shopify Partner
1 0 0

Hi, I would like to know how to do this too. Did you find a solution?

SAGE Apps | Shopify App Development | Get a free quote for a custom app