Shopify

On Shopify you install Grona as an app and switch on its app embed in the theme editor, so there is no theme code to edit. If your store cannot use the app embed, you can paste Grona’s snippet into your theme’s theme.liquid file instead. Use this page when you connect a Shopify store to Grona for the first time, and when you set up conversion goals for a Shopify campaign.

Before you start

• A Shopify store on an active plan.
• Admin access to the Shopify store.
• Access to your Grona dashboard, and the install link for the Grona app.
• For the theme.liquid path only: permission to edit your theme’s code, and your Grona workspace id from the dashboard. See Install the Grona script.

Install

Use the app embed unless your store cannot. Use one path only, not both.

App embed (recommended)

1. Add the Grona app to your store. Open the install link for the Grona app and approve it for your store. Grona connects as a theme app extension, so no theme code changes.

2. Open the theme editor. In your Shopify admin, go to Online Store > Themes, then select Customize on your live theme.

3. Open App embeds. In the theme editor sidebar, open App embeds.

4. Turn Grona on and save. Toggle Grona on, then select Save. The embed is now active across the storefront.

The app embed is a theme setting, not a code edit, so updating your theme does not remove it. If you switch to a different theme, open App embeds in the new theme and turn Grona on again.

theme.liquid

1. Open layout/theme.liquid. Open the code of your live theme and select the layout/theme.liquid file.

2. Paste the snippet at the top of <head>. Put it directly after the opening <head> tag, above every other script. Replace YOUR_WORKSPACE_ID in both script URLs with your workspace id:

   <link rel="preconnect" href="https://cdn.grona.ai">
   <script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/antiflicker.js" data-grona-af-bg="#ffffff"></script>
   <script src="https://cdn.grona.ai/workspaces/YOUR_WORKSPACE_ID/main.js" async></script>

   Keep all three lines together and in this order. Do not add async or defer to the anti-flicker script.

3. Save and verify. Save the file, then check the live store as described in Verify.

The snippet lives in one theme’s code. After you switch themes or update your theme, check that the snippet is still at the top of <head> in layout/theme.liquid, and paste it again if it is missing. Do not add Grona through Google Tag Manager on Shopify.

Platform notes

Where Grona runs. Both install paths apply to the whole storefront. You decide where each change shows with the URL rules of each campaign in the Grona dashboard, not in Shopify. See Target pages with URL rules.

Checkout and the order status page. Grona does not run on Shopify checkout pages or on the thank-you page after an order, because those pages do not run theme code. Campaigns can change product, collection, cart and other storefront pages only.

Consent. Grona reads Shopify’s customer privacy consent when your workspace is set to Wait for consent. Under that setting, orders sent by the Shopify custom pixel are always dropped, because the pixel runs in a sealed-off frame where Grona cannot see the shopper’s consent. See Consent and storage and Consent platforms.

Verify

Open your live store in a new private window, open your browser’s developer tools and filter the Network tab by grona. Grona’s scripts should load with status 200 or 304. With the app embed, also confirm in the theme editor that the Grona app embed shows as enabled. With theme.liquid, view the page source and confirm that the three Grona lines sit at the top of <head>. For the dashboard check and what each result means, see Verify your installation.

Track conversions

Shopify offers two goal paths. Use add-to-cart: Grona cannot credit pixel orders to the variation the shopper saw.

Add-to-cart from the storefront (recommended). Create a custom-event goal in the Grona dashboard that fires when a shopper adds a product to the cart, for example a click trigger on your add-to-cart button. Storefront goals run in the same browser context as the campaign, so Grona can credit them to the variation the shopper saw. See Track conversions and custom events.

Orders through a Shopify custom pixel. For an order goal, the Grona dashboard gives you a snippet to install as a custom pixel in your Shopify admin under Settings > Customer events. Grona stores the orders it receives this way.

Pixel orders are not credited to variations

Shopify runs custom pixels in a sandboxed frame that does not share the storefront’s browser storage, so a pixel order carries a different visitor id from the one the shopper had on the storefront, and Grona cannot credit it to the variation they saw. Use add-to-cart as the goal for Shopify campaigns. Under Wait for consent, pixel orders are always dropped.

Remove Grona

In the theme editor, open App embeds, turn Grona off and select Save. If you used theme.liquid, delete the three Grona lines from layout/theme.liquid and save. To remove the app completely, uninstall the Grona app from your Shopify admin. If you installed an order goal as a custom pixel, delete it under Settings > Customer events. For what to clean up in the Grona dashboard, see Remove Grona.

Next steps

• Implementation checklist
• Track conversions and custom events