GemPages | RecurrinGO

GemPages is a Shopify page builder that lets you design custom product and landing pages to optimize conversions.

Because GemPages product pages are custom-built, the RecurrinGO subscription widget is added with a small code snippet placed in a custom code block, rather than through the usual selector setup. You paste the snippet in the GemPages builder and set a few values in its config section.

⚠️ Note: Depending on how your page is built, this integration may need some manual adjustment. If the widget doesn't appear or behaves unexpectedly, our support team can help — reach out via live chat or at [email protected]

Before you start

RecurrinGO is installed on your store.
You have a product page built in GemPages.
You know (or can find) the product ID and variant ID of the product on the page — see How to find your product and variant IDs below.

Step 1 — Add a custom code block in GemPages

In the GemPages editor, open your product page and add a custom code element (the HTML / Liquid / Code element) where you want the subscription options to appear — usually next to the variant selector or just above the Add to cart button.

Step 2 — Paste the RecurrinGO snippet

Paste the snippet below into the custom code element:

<!-- RecurrinGO subscription widget — GemPages custom code -->
<div id="recurringo-subscription-widget"></div>

<script>
  window.recurringoWidgetConfig = {
    /* ================= CONFIG — edit the values below ================= */

    /* productId (required)
       The Shopify product ID of the product shown on this page.
       Example: "8412345678901" */
    productId: "YOUR_PRODUCT_ID",

    /* variantId (required)
       The Shopify variant ID the subscription applies to.
       Use the default/first variant, or the variant selected on the page.
       Example: "45123456789012" */
    variantId: "YOUR_VARIANT_ID",

    /* frequencies (required)
       The delivery/billing frequencies offered to the customer.
       Each entry has:
         - label        text shown to the customer
         - intervalUnit  "day" | "week" | "month" | "year"
         - intervalCount a number (how many units between charges) */
    frequencies: [
      { label: "Every 2 weeks",  intervalUnit: "week",  intervalCount: 2 },
      { label: "Every month",    intervalUnit: "month", intervalCount: 1 },
      { label: "Every 3 months", intervalUnit: "month", intervalCount: 3 }
    ],

    /* mountSelector (optional)
       CSS selector of the element where the widget is rendered.
       Defaults to the container above. */
    mountSelector: "#recurringo-subscription-widget",

    /* addToCartSelector (optional)
       CSS selector of the Add to cart button on your GemPages page, so the
       widget can attach the chosen subscription plan when adding to cart. */
    addToCartSelector: ".gem-add-to-cart button"

    /* =============== END CONFIG — do not edit below ================= */
  };
</script>

<!-- Keep the line below exactly as provided by RecurrinGO.
     It loads and initializes the widget using the config above. -->
<script src="REPLACE_WITH_RECURRINGO_WIDGET_LOADER_URL" async></script>

Step 3 — Update the config values

In the CONFIG section at the top of the snippet, update at least these three values:

productId — the Shopify product ID of the product on this page.
variantId — the Shopify variant ID the subscription should apply to. For a single-variant product, use its only variant. For a product with multiple variants, use the variant you want to offer on subscription (or the one selected on the page).
frequencies — the list of subscription frequencies customers can choose. Edit the label, intervalUnit, and intervalCount for each option, and add or remove entries to match the plans you want to offer.

Each parameter is described in the comments inside the snippet. Leave the optional values as they are unless you need to change where the widget mounts or which Add to cart button it attaches to.

How to find your product and variant IDs

There are a few ways to get these values — use whichever is easiest for you:

From the Shopify admin URL: Open the product in your Shopify admin (Products → [your product]). The product ID is the number at the end of the URL (.../products/8412345678901). To get a variant ID, open the variant; its ID appears at the end of that URL.
From the storefront: On a standard product page, the current variant ID is available in the URL as ?variant=45123456789012 when a variant is selected.
Advanced (Liquid): If your custom code element has access to the product Liquid object, you can insert {{ product.id }} and {{ product.selected_or_first_available_variant.id }} instead of hardcoding the IDs, so the same block works across products.

Step 4 — Save and publish

Save and publish your GemPages page, then open it on your storefront and confirm the subscription options appear and can be added to cart.

If anything doesn't render correctly, this is where a little manual adjustment may be needed — contact our support team and we'll help you get it set up.

Need help?

If you have any questions or need help with the setup, please contact our support team.

📩 Contact Support: Reach out to us via live chat or send an email to [email protected]