What are you trying to accomplish
I hope to accomplish 1 thing, which is to display different currencies (each currency has its own pricing, not direct conversion) on the Page built with Builder.io. The currency and the pricing can be queried from the Shopify Storefront API.
How to hook up the API which required authentication?
Here is a quote from the link above:
“The GraphQL Admin and REST Admin APIs require a Shopify access token (for public apps and custom apps) or an API password (for private apps) for making authenticated requests.”
Can Builder do this? Or is there any workaround to achieve the query?
How to get & display on Builder the right currency pricing from the queried Price List?
If possible hope you could make 1 example of those! Thanks
If you are using Builder’s Shopify App, and the page you have built in Builder is using product boxes, you might not have to do anything (depending on what it is exactly you are trying to do). Product boxes have built in logic to show international pricing if the product has different prices based on locale. They way it does this is by looking at the current page the customer is on to determine if they have selected a particular currency or locale, and then when querying the product box api we send that along to get the proper price. That means the product box price will always show the correct currency automatically.
If you are instead trying to list all the product prices in one list, you might need to do a specific query from the Builder page to get that data. Can you tell me more about what it is exactly you are trying to do, and provide a builder content link (e.g. builder.io/content/some-id), so I can be more specific on what APIs to use and how to do it in Builder?
At a very general level, you can totally do custom queries for data and incorporate them into Builder content. You would just need to generate a public key for the Storefront Shopify API. If you follow the steps in this guide, you can create a public token that will let you access storefront data. Just make sure to not use the secret credentials for the admin api, as those should not be shared. The storefront token is okay to share in client facing apps (i.e. in javascript on your Builder page), but the other credentials are not.
Once you have created the storefront token, you can fetch data from within Builder using fetch in the custom code section of Builder. This guide walks through a general example of how to do it (don’t worry, the UI is a bit different in that video since it is an older guide, but all the concepts still apply). As a reminder, do not place any secret credentials in the custom JS section in Builder, since that is javascript that will be used on your page and can be seen by anyone visiting the page.
Understood that the Builder Shopify App is well integrated with the international pricing! That’s good news!
Then I think the issue I am facing now is about how to show this on my page? Since it is not showing at the moment, here is the website URL, and the Builder Page
We have to show Euro (EUR), Pounds (GBP), dollar (USD), Australian dollar (AUD) and Canadian Dollar (CAD). Thank you!
Hi @korey , I just updated the product box, it seems to be working at first!
But when I updated the international pricing settings, the Product Box didn’t update accordingly. How frequent does this update? Should I expect it to be updated later in time or is this a bug?
Ah, I think I know what is happening here @alison. It looks like the product boxes on that page are of an older format that does not have the logic necessary to update the price based on the selected currency.
To fix it, you will need to drag a new product box on to the page, and then take all the contents of the current one and move them to be inside the new product box. Doing this will ensure that the product box is using the latest updates that include multiple currencies. You might need to also replace some of the pieces within the product box as well (like product price), so make sure to test everything.
A handy tip when moving around blocks is that you can right click a block to bring up a menu. There are lots of powerful features there, but one of them is copy styles, as well as paste styles. Those commands allow you to quickly transfer styles from one block to another, which can be very helpful when replacing blocks like you need to do here. Another tip is to use grouping, which you can accomplish by selecting multiple layers in the layers tab (hold down command or shift to select multiple layers) and then right click to open the menu and select group selection.
@korey I had the same problem. I think the product page templates include the old product box, as following your instructions also fixed my problem with pricing. The page was only created yesterday so the only place it could have come from was a new template.
