Best practice to style elements via Script Tag that will work consistently among different themes?

Shopify Partner
132 5 21

Newbie question. I'm using Script tag to style a html table loaded with app proxy

The table looks great in one theme, e.g. Simple, but falls a part from other themes.

For example:

Simple Theme (looks good)



Debute (not so good)




I could adjust CSS for each theme to make it look good. But there are hundreds if not thousands themes, no way I test them all!

So what is the best approach to make elements to look consistent  across different themes?

Replies 2 (2)
Shopify Partner
84 8 12

I also have a similar use case for my app. From what I have learnt in the past few days, every theme has a different html and css markup which makes it impossible to use the same selectors for different themes. To be 100% accurate, separate selectors for each theme can be used.

There is one exception though i.e the section id, 

When Shopify renders sections, it wraps each section in a <div> element with a unique id attribute:


<div id="shopify-section-[id]" class="shopify-section">
  [output of the section template]



Shopify Partner
132 5 21

Perfect, finally something can be relied on. Thanks for the tip.

For my purpose, I am using a multiple selector as fallback

document.querySelector('#EmptyCart, .cart--continue-browsing, main .wrapper, main .grid, main')?.insertAdjacentHTML('...')