Fixing AI Agent Compatibility on a Shopify Store

Where Shopify stores lose AI shoppers

A shopping agent is given a job such as "find a waterproof walking jacket in medium under £120 and put it in my basket". To do that on your store it has to land on a page, get past whatever appears on top of it, search or browse to a product, choose a size and colour, add it to the cart, reach the cart and start checkout. Somewhere near payment it hands control back to the person, who confirms and pays.

Shopify itself handles much of this well. Its themes produce server-rendered HTML, the Online Store 2.0 themes such as Dawn use proper form controls for variants, and the checkout is run by Shopify rather than by your theme. Most of the problems on real stores come from three places:

• Apps that inject scripts into the storefront. Email capture pop-ups, spin-to-win wheels, age gates, country pickers, chat bubbles, upsell drawers and custom swatch apps all add markup after the page loads. Many of them cover the page or replace native controls with styled boxes that have no name an agent can read.
• Theme customisations. Edits made by a freelancer or copied from a forum often swap a real link or button for a clickable element that only works in script, or make the cart open only as a drawer.
• Store settings aimed at bots. Spam protection on forms, required customer accounts and password protection all make sense for some shops but can stop an agent working for a genuine customer.

This guide is about agents using the store. If your concern is whether AI crawlers can read your products at all, including robots.txt.liquid and app content that crawlers never see, that is covered in the Shopify agent readiness guide.

The shopping journey, stage by stage

Map your store against the stages below. The middle column is what the agent needs; the right-hand column is the usual Shopify cause when it does not get it.

App pop-ups, overlays and drawers

Overlays are the most common reason an agent stops on a Shopify store. A browser-driving agent looks at a screenshot and at the accessibility tree. If a pop-up covers the page and its close control is an unlabelled "x" drawn with CSS, the agent may not recognise it as a way out, and every click it makes on the page underneath is swallowed by the overlay.

What a well-behaved overlay looks like

• It waits: it appears after a delay, on scroll or on exit intent, rather than the instant the page loads.
• It uses a dialog element or role="dialog" with aria-modal="true" and a heading, so the agent knows what it is looking at.
• Its close button is a real <button> with a name such as "Close" or "No thanks", and pressing Escape closes it.
• It does not come back on every page once dismissed.

<div role="dialog" aria-modal="true" aria-labelledby="signup-title">
  <h2 id="signup-title">Get 10% off your first order</h2>
  <form action="/contact#newsletter" method="post">
    <label for="signup-email">Email address</label>
    <input id="signup-email" type="email" name="contact[email]" autocomplete="email">
    <button type="submit">Sign up</button>
  </form>
  <button type="button" class="modal-close">No thanks</button>
</div>

Most pop-up apps let you set a delay, choose which pages it appears on and limit how often it shows. Setting a delay and keeping it off product and cart pages removes most of the harm without losing sign-ups from people who browse.

Age gates and country pickers

If you sell age-restricted goods you may need an age check, and that is a point where an agent should hand back to the person. Make it a clear dialog with labelled buttons, and do not reset it on every page. For countries, Shopify Markets can show local prices and currency without a blocking pop-up; a small selector in the header or footer is far easier for an agent than a modal on arrival that insists on a choice.

Variant pickers and swatches

Choosing a size and colour is where many agents pick the wrong item. The agent needs to know what options exist, which is selected and which are sold out. Dawn and most current Shopify themes do this with radio inputs inside a fieldset with a legend, which is exactly what an agent can read. Problems start when an app or customisation replaces those inputs with styled boxes.

<!-- Hard for agents: a box with a colour, a script click handler and nothing else -->
<div class="swatch" data-value="Forest"></div>

<!-- Works: a real radio with a name, even if it is styled as a swatch -->
<fieldset>
  <legend>Colour</legend>
  <input type="radio" id="colour-forest" name="Colour" value="Forest" checked>
  <label for="colour-forest">Forest green</label>
  <input type="radio" id="colour-navy" name="Colour" value="Navy" disabled>
  <label for="colour-navy">Navy (sold out)</label>
</fieldset>

The label text can be visually hidden if the design only shows a coloured circle, but it must be there. Say "sold out" in text rather than only with a strike-through line, and keep the price and the product URL in step with the chosen variant. Shopify themes update the address with ?variant= and the variant ID when an option is chosen; if a customisation has broken that, an agent that shares or revisits the link lands on the default variant instead of the one it picked.

The cart, search and filters

Cart drawers

Slide-out cart drawers are fine as long as the store still has a working /cart page and the drawer is a labelled dialog with a real checkout button. Some themes and apps remove the cart page or redirect it to the home page. An agent that cannot open a page listing what is in the cart cannot check its own work, and a person handed the task has nothing to review. Keep the cart page, link to it from the drawer with a "View cart" link, and make sure the header cart icon is a link to /cart with an accessible name that includes the item count.

Shopify also supports cart permalinks, addresses in the form /cart/VARIANT_ID:QUANTITY that fill a cart and go to checkout. They are handy for testing and for links in emails, and they show whether checkout works independently of your theme.

Search and filters

Shopify's search page lives at /search?q= and collection filters from the Search & Discovery app appear in the address as parameters such as filter.v.availability=1 or filter.v.price.lte=120. That is ideal for agents: every filtered view has its own URL, it can be loaded directly, and the result is server-rendered. Third-party filter and search apps vary. Some keep filters only in the page's script state, so a filtered list cannot be reached by address and the filter controls are unlabelled checkboxes drawn with CSS. If you use one, check that choosing a filter changes the URL, that loading that URL gives the same results, and that the search box is a form with a submit button rather than a predictive dropdown only.

The fix, step by step

Checkout on Shopify: what you control and what you do not

Shopify runs the checkout, so the core fields, their labels and the payment step are the same on every store and generally well built. That is good news for agents. What you can change are the things around it:

• Checkout apps and extensions. Shopify has moved stores from the old checkout.liquid customisation to Checkout Extensibility, where apps add blocks through checkout UI extensions. These use Shopify's own components, which are more consistent than hand-written HTML, but an app can still ask for information in a confusing way. Keep checkout blocks few and optional.
• Accelerated checkout buttons. Shop Pay, Apple Pay, Google Pay and PayPal buttons on product and cart pages are a quick route for people. For an agent they usually mean a hand-over, because they open a payment sheet or a separate window that the person must confirm. Keep the standard Check out button visible alongside them so the agent always has a route it can follow.
• Customer accounts. Shopify's newer customer accounts sign people in with a one-time code sent by email. An agent cannot read the customer's inbox, so a forced login always means handing back to the person. Guest checkout avoids that.
• Bot protection at checkout. Shopify can add its own checks at checkout, particularly on high-demand launches, and these are not settings a theme can switch off. That is a reasonable place for a check, and the person will complete it when the agent hands over.

Keeping the store agent-friendly after changes

• Test after every app install. Most regressions on Shopify come from a new app. Walk the journey from step one after installing or updating anything that touches the storefront, the cart or the checkout.
• Keep a note of app embeds. A short list of which embed does what saves time when something starts covering the page months later.
• Update the theme with care. A theme update can bring back a native variant picker you replaced, or drop a fix you made to the cart link. Duplicate the theme, update the copy, check the journey, then publish.
• Watch your contact form spam. If you loosen reCAPTCHA and spam rises, add a honeypot field or a simple server-side check rather than a challenge on every submission.
• Re-run the audit quarterly on a product page and a collection page, because apps change their code without asking you.

For the underlying techniques, the forms guide covers labels and autocomplete in depth, and the checkout guide covers the hand-over to the customer.