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?
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 element with a unique id attribute:
[output of the section template]
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(‘…’)