Webflow is absolutely great for us marketers, because it empowers us to build pages and test ideas faster than ever. The downside is that sometimes we’re limited when you want to build some features. There’s still no real solution to building localized pricing experience into Webflow, until today. And I’m going to show how to do it with Pricery.
Requirements
- Webflow premium. To deploy multi-currency pricing with Webflow requires that you add 2 lines of JavaScript in your website. That’s a Webflow premium feature, therefore, make sure you can do it before setting up Pricery.
- Stripe. Right now, Pricery is only compatible with Stripe. If you’re interested in connecting a new Payment Provider, submit it (or upvote it) on our feature board.
- Pricery.io. Pricery will add the magic on your /pricing page and is the place where you’ll manage all your prices and currencies. Use the free plan if you have little traffic, prices increment with traffic size.
Other useful informations: Pricery documentation and Live Webflow demo page
1. Connect Stripe to Pricery
First, log in to your Pricery.io account. Connect your Stripe account with Pricery. Follow the steps until you see all your Stripe products in Pricery.
2a. Create your new prices in Pricery
If you haven’t already, create your new prices in the currencies you want to implement. You can do this either in Stripe or in Pricery. I’d recommend doing it in Pricery since it comes with a bunch of helpful tips like the conversion rate of the day.
Before you save the price, pick the countries where you’d like to offer it. No big deal if you skip this since.you’ll be able to do it later.
Don’t forget to create both the monthly and the yearly prices for each one of your products or plans.
2b. Assign your prices to specific countries
In case you already have created Stripe prices in local currencies, simply go to each product’s page and assign those prices to the targeted countries.
3. Connect Pricery to Webflow
Now, let’s go to Webflow. Open your project’s Setting, and go to the “Custom Code” tab. This section is only accessible to Premium Webflow projects as mentioned in this article “Requirements”.
You’ll need to add 2 lines of code and replace the here-your-public-key bit by your actual key which can be found in your Pricery’s account settings.
<script src="https://www.pricery.io/pricery.js"></script>
<script async="">new Pricery("here-your-public-key").init()</script>
4. Inject prices in your Webflow pricing page
To inject the text and links required to make your pricing page dynamic, Pricery uses data-elements. You can edit data elements in Webflow by going into the setting’s of any HTML element.
Identify the product’s parent element
First, identify the parent element that’ll include every information about your product. To specify a product parent’s element, you need to create a data-pricery element, and fill in the Stripe ID of the targeted product. Stripe IDs look something like that prod_123456789.
Specify the data to inject in each text element
If you want a text element to be filled with the above mentionned product’s price, you’ll need to create a new data-pricery-content element. Give it any of the value listed here.
Specify URLs and non-visual elements
If you need to inject non-visual elements, create a data-pricery-href data attribute. Give it any value available in the values listed above and the href will be replaced by the new value.
5. Add a monthly/yearly switch
Pricery can give new properties to some of your pages’ elements. One of which is the switch between plans’ or products’ variants. Adding this to a Webflow element is super easy:
Create 2 buttons: One yearly, one monthly. Add the data-pricery-switch element and as a value give it the variant you want. Your switch should look something like this:
Simple as that!
Are we missing any feature?
Pricery.io is on a mission to make any digital business competitive on the global scale. If you have any feature idea that you think is missing and would help us on this mission, you can submit it here.
And if you want to talk, book a call with us or just send an email at jules ~at~ pricery.io