When recording a test flow in Rewind Monitor, you are able to include parts of your Shopify store that utilize custom elements and shadow DOMs.
What is a custom element?
Custom elements are pieces of code injected into your Shopify store (or any website) where the element itself is hosted elsewhere but rendered on your store. For example, you might create a contact form using a third-party app, paste a small snippet of code onto your store, and that form will appear seamlessly on your store’s contact page as if it were a part of the theme itself.
What is a shadow DOM?
A shadow DOM is a self-contained set of styling rules. These are commonly used in custom elements on Shopify, but don’t have to be. In our contact form example, your store’s theme might be set to use black text as default, but if you edited your form within the third-party app to have red text, it will appear red on your store. The styling rules are self-contained and will not be overwritten by the theme’s existing code.
Why did we build this?
Most Shopify stores use a multitude of third-party apps to accomplish anything from discount popups to in-cart upsells. These apps commonly “inject” code into the store using custom elements and shadow DOMs. This allows them to appear integrated with the online store without editing the theme code itself within Shopify.
Previously, we were unable to interact with these custom elements and shadow DOMs in order to simulate clicks during a test flow. By including these in test flows, you have the flexibility to record a multitude of interactions that are important to your business, such as:
- In-cart upsells
- Cookie banners
- Slide-out carts
- Review widgets
- Customer survey apps
- Restock alert apps
- Custom font apps
- Third-party chat apps
What about iframes?
At this time, Rewind Monitor is unable to record test flows using elements hosted within iframes. However, custom elements and shadow DOMs should cover the majority of use cases for tracking your user journeys.