Hello,
I’m working with a Shopify Theme App Extension (built in React.js) that I am embedding on a Shopify product page. I am already receiving most of the product-related information (mostly meta fields, form IDs etc) through my app-block.liquid file inside the extension’s code.
Now, I want to modify the existing Shopify product page design. Specifically, I need to:
- Access and edit the product page’s HTML structure from my Theme App Extension.
- Render dynamic changes to the main product image based on user input from a custom field inside my extension.
- Ensure that the modified product image comes from my Theme App Extension’s code, while still integrating with Shopify’s existing page design.
To illustrate, if a user enters a name in a text field, that name should appear dynamically on the product image. This product image would be handled by my extension but needs to be embedded seamlessly with Shopify’s existing Product layout.
I’ve attached a screenshot for reference. Additionally, here’s a competitor website with a similar workflow that we’re trying to achieve:
Competitor Website
My key question:
Can I access and modify the existing Shopify product page’s HTML using my Theme App Extension to inject dynamic images? If so, what is the best approach to achieve this?
Here’s the Shopify documentation I’ve been reviewing:
Shopify Theme App Extensions Guide
Here’s how I build my app theme extension
Thanks in advance guys!
The only way I know of is by altering the DOM with javascript. This is messy, and you will have to implement a solution tailored to the different themes that you want to support. In the perfect world, themes would probably need to be built with blocks for all the different elements on the page, so you could swap out individual components of the page with theme extensions.
The way I’ve dealt with this in the past, is by using the Shopify object from the window object to grab the theme name: window.Shopify.theme.schema_name and making my own “theme handler” that runs different DOM mutations based on that.
Would be great if we didn’t have to rely so much on javascript for theme extensions, since I do think it generally gives a poor user experience swapping out elements after page load, but I don’t currently see a way around that.
Just had a look at the competitors website that you provided a link for. And they seem to be doing what I described. You’ll notice that the product image section gets completely overwritten after the page has loaded.
One thing to look out for, when making customisations to product pages, and overwriting default behavior, is to ensure you’re not breaking accessibility standards for customers using screen readers and other assistive tooling.
thank you Magnus.
can you see the classes that are being rendered on the competitor’s site (screenshot attached)? Looks like they aren’t any of the shopify classes, instead he’s been using his custom ones, right? So, in my case, I would need to replace the elements for the divs separately or the whole component needs to be changed too?
In the screenshot you have provided, it does seem like they are completely replacing the themes built-in image gallery with their own.
There is a lot of ways to go about it. Implementing your own gallery provides you with full control over the behavior of the component, and probably makes it easier to support multiple themes.
as you told you have worked with it in the past, do you happen have a hold on any of the documentation for this particular usecase or even something close to it? would be really helpful!
I have not been able to find much in terms of documentation around this subject. I don’t think Shopify really has any.
The implementation varies a lot depending on what themes you want to support. The best I can give in this case is what I explained in a previous reply. Using window.Shopify.theme.schema_name and doing specific DOM mutations that would apply to the theme.
1 Like
