Start a new topic

Shopify Plugin Setup

The Shopify plugin is currently in beta, to ensure we handhold customers, as we iron out our documentation & setup process.

Here is a summary of steps involved:

  1. Install Shopify plugin.
  2. Copy code snippet in Shopify themes.
  3. Setup ChargeBee account & create products in ChargeBee.
  4. Copy & paste the Plan URL in the plugin to redirect to checkout page.
  5. Complete the other configuration steps in ChargeBee (including hosted checkout page, invoice logo, emails & payment gateway). 
  6. Go LIVE.


Shopify App Installation Steps:



In the next step, the list of products available in Shopify are listed with empty text boxes to map ChargeBee plan URL. 




Insert the following code snippet into your Themes, Product code.




Click on "Template Editor" to edit the code.




Look for Product.liquid or the code snippet under which the following code exists ("Add to cart"). Search for "Add to cart" in the code and add the following code snippet, as in the image:


 

              <!--ChargeBee code snippet - starts-->
              
              {% assign cb = product.metafields.chargebee %}
              {% unless cb == empty %}
              <a href="{{cb.cb_url}}" class="btn">Subscribe</a>	
              {% endunless %}
              
              <!--ChargeBee code snippet - ends-->
              

 




Here is a quick hack to verify if the integration setup is correct:

 

Copy the following URL and paste it in the text box, against one of the products in plugin.

https://labs-test.chargebee.com/hosted_pages/plans/m_s_socks 

  


Save and refresh your website. You should be able to see the Subscribe button as below. Clicking on that should redirect you to a secure URL page that can be customized to look exactly like your website. 






Now let us get started with setting up the ChargeBee Account:


If you do not have a ChargeBee account, click on the below mentioned URL to signup for a new account. 


https://www.chargebee.com/trial-signup.html


Complete the email verification and "claim your account" to complete the signup process. You will be redirected to a TEST site to complete the configuration.



Email ChargeBee customer support for completion of setup, with the name of your Shopify & ChargeBee site and we will assist you with the process.


Email: support@chargebee.com









1 person has this question

Hey Jeremy,


We do currently support Shopify in this way,


For your business use case, you will just need to create a single Shopify page with the different plans next to each other. Each of this plan can be linked to a “hosted checkout page” on Chargebee.




The checkout V3 is an in-app popup based modal box and doesn’t include a redirection. If you wish to redirect customers to the checkout pages from your Shopify pricing page, you can generate the Plan URL in the below format:


https://<site-name>.chargebee.com/hosted_pages/plans/<plan-id>


The complete integration is in works currently and we do not have an ETA on it. We will let you know once we release it.


 

Hi Pranathi,


Will this new build cater subscription and non-subscription items in a single order? Thanks


Regards.

Hey Yousuf,


It is certainly possible to have a recurring and non-recurring (add-ons) charges in the same subscription. It would be helpful if you could elaborate on your use case, so that I can guide you in how to set it up.


Hope this helps.


Can we get an updated ETA please?

Hey Alistair,


I will get back to you on this through an email.


Hope this helps.

Login or Signup to post a comment