Displaying subscription plan options on storefront product page

[yogendra]

I am trying newly launched Shopify Subscription APIs on my dev store which has approved access. I created subscription plan group with plans and added a product to the group. I also installed the Argo admin and deployed the Subscription extension on Shopify using Shopify-CLI. Now I can see subscription option in product page for admin but I am not seeing the plan options on storefront product page, as displayed here: shopify-subscription-apis-demo.gif

I did not find any documentation regarding the same. May be I missed something. Do I need to insert any script or code in product.liquid for this?

Would be great if anyone can help.

Thanks.

[_JB · Accepted solution]

Hey @yogendra,

We actually have a few docs that talk about implementing this on the front end:

Our selling plan product page tutorial contains instructions and code examples when implementing elements into a theme.

The online store subscriptions UX guide goes into more detail by talking about different considerations to keep in mind when designing UI elements for subscriptions.

Lastly, the subscriptions API migration guide takes you through all the steps needed to create a subscription app, including code implementations on the theme. 

[yogendra]

Thank a lot @_JB. Not sure, how I missed it. Will give this a try.

[Pengyi]

Hi @_JB ,

I followed the instructions, but the options still don't show up.

I can see selling plans are created through GraphQL query response, but when I implemented the code in selling plan product page tutorial

The selling plan group is empty, I also tried product Ajax API.

Anything I missed?

Thanks,

Pengyi

{
  "data": {
    "products": {
      "edges": [
        {
          "node": {
            "id": "gid://shopify/Product/6154090217623",
            "sellingPlanGroupCount": 2
          }
        },
        {
          "node": {
            "id": "gid://shopify/Product/6193789206679",
            "sellingPlanGroupCount": 1
          }
        }
      ]
    }
  },
  "extensions": {
    "cost": {
      "requestedQueryCost": 12,
      "actualQueryCost": 4,
      "throttleStatus": {
        "maximumAvailable": 1000,
        "currentlyAvailable": 996,
        "restoreRate": 50
      }
    }
  }
}

[_JB]

Hey @Pengyi,

These features are currently in beta, so you'll need to apply for access if you haven't already done so. See this section of the doc. 

If you're still not seeing it even while using a development store with access to the beta, please provide the shop_id and we can investigate further.

[manektech]

I am facing same issue, I am building shopify product subscription extension using newly launched subscription API. I have beta access for the store and app both. I have created the selling plans and added the code to the theme files by referring this documentation https://shopify.dev/tutorials/customize-theme-showing-selling-plan-groups-and-selling-plans  but still selling plans are not seeing at the product page in store front even while using a development store with access to the beta.

my store is : https://mysubscriptioncistore.myshopify.com/products/test-product.

Can anyone please check if anything is missing to show plans at storefront?

Thanks!

[ga2]

Hi,

Can you please send me me all implementation from starting how you have do this ? I want to use the shopify subscription API like bold APP have. So please let me know how can I achieve this ?

Thanks