I'm building a Shopify store and I got curious about how AI systems, like ChatGPT, parse product pages for recommendations. I've implemented Product schema correctly with price, availability, and descriptions, and checked that it's being recognized properly. However, I've noticed some odd behaviors: even with the same product and schema, when I rearrange the DOM structure, the recommendations change. This has led me to wonder if the order of the DOM is influencing how AI parses the data or if I'm missing something in my markup. Also, in default Shopify themes, the product details like price and availability are split across different components, which might be causing issues for AI agents trying to connect the information. I've observed that different AI systems behave differently with identical schema; for instance, GPT tends to favor content that is higher in the DOM, while Gemini focuses more on the right positioning. I still have a couple of specific questions: 1) Does the DOM order actually affect AI parsing independently of schema? 2) If I want to change the DOM order in a Shopify theme without touching templates, how can I do that?
3 Answers
Yes, the DOM structure does matter beyond just the schema. In my experience, testing various layouts can show how AI systems parse content differently, even when the structured data is identical. If product details are scattered, it may confuse the AI and affect its recommendations since they can't easily connect the dots. Also, if you want to change the DOM order on Shopify, you'll likely need to edit the liquid templates because CSS alone won’t do the trick; you need to reorder the actual HTML elements to achieve the desired effect.
Schema and DOM structure serve different purposes. Schema provides the essential data points to the AI, but the DOM structure indicates what's important on the page. If you change the layout, it can impact how language models prioritize information, which is crucial when determining recommendations. The way information is organized visually plays a big role in its parsing, so having a price highlighted distinctly compared to it being hidden away affects its visibility to the AI. It looks like you've figured out something that many developers overlook!
Exactly! Schema sets the meaning while the DOM controls emphasis. It's surprising how much just repositioning elements can change performance across similar pages.
Have you noticed any improvements on your website after these changes? Have you been able to track those results?
Yes, we are seeing early positive results! We've been testing prompts before and after making page changes and monitoring how consistently products show up across different AI tools. The biggest improvements came from reordering the DOM, focusing on clearer product intent up top, and tightening up descriptions, rather than just relying on schema alone.
That totally makes sense! It's like the AI interprets schema meaning but also relies heavily on how the content is arranged visually. And yeah, it seems clear that some real template changes are necessary.