FROM CACHE - en_header

Displaying subscription plan options on storefront product page

Solved
yogendra
Shopify Partner
8 0 0

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.

Accepted Solution (1)

Accepted Solutions
_JB
Shopify Staff
Shopify Staff
836 99 211

This is an 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. 

 

 

JB | Solutions Engineer @ Shopify 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

View solution in original post

Replies 6 (6)
_JB
Shopify Staff
Shopify Staff
836 99 211

This is an 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. 

 

 

JB | Solutions Engineer @ Shopify 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

yogendra
Shopify Partner
8 0 0

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

Pengyi
Shopify Partner
7 0 0

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
Shopify Staff
Shopify Staff
836 99 211

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.

JB | Solutions Engineer @ Shopify 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

manektech
Tourist
6 0 1

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
New Member
2 0 0

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