JS load before dom into theme app extension

offjeff91
Shopify Partner
2 0 1

We have a feature in our app which changes something in the DOM visually like, for example, the color of a button, which works fine when we do it directly into the theme.liquid of our store, for example, but not when it runs on app extension, because differently from the change into theme.liquid, it run later in the app extension so the button is , for example, already displayed and we change the color of the button giving a bad experience. Any idea how to tackle it?

Also we notice other apps that do something similar they add js script to the store page even when their app extension is deactivated. Maybe it is scripttag but shopify team recommended us to remove for our app this resource. could it be asset api? or other form?

Thanks a lot.

Replies 2 (2)

NomtechSolution
Astronaut
1245 113 150

To tackle the issue of changing the appearance of elements in the DOM after they have already been displayed when using your app extension, you can consider the following approaches:

  1. Use dynamic CSS: Instead of relying solely on modifying the DOM after it has been rendered, you can dynamically generate and apply CSS rules based on the desired changes. This way, the CSS rules will be applied during the initial rendering, ensuring the intended visual changes are reflected immediately.

  2. Trigger changes earlier in the rendering process: Explore ways to trigger the changes in the DOM earlier in the rendering process. You can leverage JavaScript events or hooks provided by the Shopify platform to execute your app's logic before the page is fully rendered. This will allow you to modify the appearance of elements before they are displayed.

offjeff91
Shopify Partner
2 0 1

Hi NomtechSolution, I really appreciate your answer. I think the first one is a good approach, with exception for the case that some of our changes (like text in the content) is not CSS.

 

About this one:

You can leverage JavaScript events or hooks provided by the Shopify platform to execute your app's logic before the page is fully rendered. 

 

It looks amazing. Could you name some of these techniques so i can do deeper search?

 

Thanks a lot!