> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gocertify.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Integration

> Start building loyal communities with targeted, gated offers.

Gocertify has a native integration with Shopify. This allows you to easily promote Gocertify offers across your Shopify site. To install your Shopify app follow the Shopify specific instructions in [Integrate on Site](/section/gettingStarted/integrateOnSite#shopify). We also can connect directly to your [Shopify discounts](/section/buildRewardFlows/discounts#integrating-with-shopify) to create unique codes for each shopper.

## Adding Gocertify Blocks

Once installed you will be able to add Gocertify blocks in your Shopify theme editor. To add a block, switch to the **Apps** tab and select from the available Gocertify blocks.

<Frame caption="Gocertify blocks can be added directly to your site using the Shopify builder">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-gocertify-blocks.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=997a7cf027d71f88e05686188554fd47" alt="Gocertify blocks in Shopify theme editor" width="2584" height="1804" data-path="images/integrations/ecommerce/shopify/shopify-gocertify-blocks.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-gocertify-blocks.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=997a7cf027d71f88e05686188554fd47" alt="Gocertify blocks in Shopify theme editor" width="2584" height="1804" data-path="images/integrations/ecommerce/shopify/shopify-gocertify-blocks.png" />
</Frame>

### On-Site Message

The **On-Site Message** block lets you add targeted promotional messages anywhere on your site. Use this to display exclusive offers to eligible shoppers on product pages, collection pages, or anywhere else in your store.

To link the block to a specific on-site message, enter the **Placement ID** from your Gocertify dashboard (found under the On-Site Messaging tab).

<Frame caption="Configure the On-Site Message block with your placement ID">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-on-site-message.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=ab757f74975f0eb4943c30f8eea9060b" alt="On-Site Message block configuration" width="2652" height="1728" data-path="images/integrations/ecommerce/shopify/shopify-on-site-message.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-on-site-message.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=ab757f74975f0eb4943c30f8eea9060b" alt="On-Site Message block configuration" width="2652" height="1728" data-path="images/integrations/ecommerce/shopify/shopify-on-site-message.png" />
</Frame>

<Note>
  Other types of on-site messages (floating button, sticky bar, etc.) can be enabled directly from the Gocertify dashboard without adding any blocks.
</Note>

### Checkout On-Site Message

The **Checkout On-Site Message** block displays promotional messages directly on your checkout page, allowing you to promote offers at the point of purchase.

<Steps>
  <Step title="Navigate to Themes">
    In your Shopify admin, go to **Online Store > Themes**.

    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/RjC2YFo3irz0n_V5/images/integrations/ecommerce/shopify/shopify-checkout-osm-step1.png?fit=max&auto=format&n=RjC2YFo3irz0n_V5&q=85&s=7bbe7bc96aa3b94d917bd23b617526cd" alt="Shopify Online Store Themes" width="2388" height="1276" data-path="images/integrations/ecommerce/shopify/shopify-checkout-osm-step1.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/RjC2YFo3irz0n_V5/images/integrations/ecommerce/shopify/shopify-checkout-osm-step1.png?fit=max&auto=format&n=RjC2YFo3irz0n_V5&q=85&s=7bbe7bc96aa3b94d917bd23b617526cd" alt="Shopify Online Store Themes" width="2388" height="1276" data-path="images/integrations/ecommerce/shopify/shopify-checkout-osm-step1.png" />
    </Frame>
  </Step>

  <Step title="Open Checkout Customisation">
    Click **Customize**, then use the page selector dropdown and choose **Checkout and customer accounts**.

    <Frame>
      <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/RjC2YFo3irz0n_V5/images/integrations/ecommerce/shopify/shopify-checkout-osm-step2.png?fit=max&auto=format&n=RjC2YFo3irz0n_V5&q=85&s=9e43d4e7dd881b93e8f669d806ee37a1" alt="Select Checkout and customer accounts" width="2492" height="1400" data-path="images/integrations/ecommerce/shopify/shopify-checkout-osm-step2.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/RjC2YFo3irz0n_V5/images/integrations/ecommerce/shopify/shopify-checkout-osm-step2.png?fit=max&auto=format&n=RjC2YFo3irz0n_V5&q=85&s=9e43d4e7dd881b93e8f669d806ee37a1" alt="Select Checkout and customer accounts" width="2492" height="1400" data-path="images/integrations/ecommerce/shopify/shopify-checkout-osm-step2.png" />
    </Frame>
  </Step>

  <Step title="Add the Checkout Extension">
    In the checkout editor, add the **gocertify-checkout-osm-extension** block and configure:

    * **Banner heading**: The title shown in the checkout banner (e.g. "Student Discount")
    * **Banner description**: The offer description (e.g. "Get 20% off for Students")
    * **Link URL**: URL to your hosted Gocertify page for that campaign

    <Frame caption="Configure the checkout banner with your offer details">
      <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/RjC2YFo3irz0n_V5/images/integrations/ecommerce/shopify/shopify-checkout-osm-step3.png?fit=max&auto=format&n=RjC2YFo3irz0n_V5&q=85&s=49f279e55b753e87dac99d998943ab80" alt="Checkout OSM extension configuration" width="2494" height="1686" data-path="images/integrations/ecommerce/shopify/shopify-checkout-osm-step3.png" />

      <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/RjC2YFo3irz0n_V5/images/integrations/ecommerce/shopify/shopify-checkout-osm-step3.png?fit=max&auto=format&n=RjC2YFo3irz0n_V5&q=85&s=49f279e55b753e87dac99d998943ab80" alt="Checkout OSM extension configuration" width="2494" height="1686" data-path="images/integrations/ecommerce/shopify/shopify-checkout-osm-step3.png" />
    </Frame>
  </Step>
</Steps>

### OfferHub

The **OfferHub** block embeds your OfferHub directly into any page. Simply add the block and it will automatically display all your available offers. No additional configuration required.

<Frame caption="The OfferHub block displays all your available offers">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-offer-hub.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=e8031a45177722cfc2cd7d8ed20d6da5" alt="OfferHub block" width="1956" height="1400" data-path="images/integrations/ecommerce/shopify/shopify-offer-hub.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-offer-hub.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=e8031a45177722cfc2cd7d8ed20d6da5" alt="OfferHub block" width="1956" height="1400" data-path="images/integrations/ecommerce/shopify/shopify-offer-hub.png" />
</Frame>

### iFrame

The **iFrame** block adds a Gocertify landing page to your site. By default, it displays your brand page, but you can specify a **campaign slug** to show a specific campaign's landing page.

This is useful if you want different landing pages for different audiences. For example, you could create separate pages for your `student` discounts and `key-worker` offers.

<Frame caption="Optionally specify a campaign slug to display a specific landing page">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-iframe.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=f03646b27dd3726f10f3f630dd5d38cb" alt="iFrame block with campaign slug" width="2590" height="1684" data-path="images/integrations/ecommerce/shopify/shopify-iframe.png" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-iframe.png?fit=max&auto=format&n=aclxa2EwA86mbaJa&q=85&s=f03646b27dd3726f10f3f630dd5d38cb" alt="iFrame block with campaign slug" width="2590" height="1684" data-path="images/integrations/ecommerce/shopify/shopify-iframe.png" />
</Frame>

### Variant Price Updater

The **Variant Price Updater** block keeps on-site messages accurate on product pages with multiple variants. When a shopper selects a different size or colour, the savings amount automatically updates to reflect the new price.

Add this block to your product page template. It's invisible to shoppers and works automatically so the position doesn't matter.

<Frame caption="The savings amount updates automatically when the shopper changes variant">
  <img className="block dark:hidden" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-variant-price-updater-working.gif?s=e311ee1b7d07b5e0221a14a911b3dc28" alt="Variant Price Updater in action" width="800" height="515" data-path="images/integrations/ecommerce/shopify/shopify-variant-price-updater-working.gif" />

  <img className="hidden dark:block" src="https://mintcdn.com/gocertify-db9cc6b8/aclxa2EwA86mbaJa/images/integrations/ecommerce/shopify/shopify-variant-price-updater-working.gif?s=e311ee1b7d07b5e0221a14a911b3dc28" alt="Variant Price Updater in action" width="800" height="515" data-path="images/integrations/ecommerce/shopify/shopify-variant-price-updater-working.gif" />
</Frame>
