Note: This article covers STUDIO, a no-code site builder service specific to the Japanese market. The information below will not be directly relevant if you are not selling in Japan or do not use this Japan-specific service.
"STUDIO" lets you build a site without writing any code. While it makes it easy to create an originally designed site, it doesn't support the cart and payment features needed to run an e-commerce site.
However, integrating with Shopify allows you to run an online store even on a site built with STUDIO. This article explains in detail how to integrate Shopify with STUDIO.
Differences between Shopify and STUDIO
First, let's look at the characteristics of Shopify and STUDIO.
Shopify
Image source: Shopify
Shopify's key feature is that anyone can easily build and run an e-commerce site. It comes with all the basic features needed to launch and operate an e-commerce site, including site creation, cart and payment functionality, product management features, and customer support features. Since templated themes are provided, you can easily build a site without writing any code. You can also use Shopify POS to support in-person sales.
STUDIO
Image source: STUDIO
STUDIO's biggest appeal is that it lets you implement an original design without writing any code. Many no-code site builders work by having you select and build from a template. However, with STUDIO, you can easily implement an original design from scratch via drag and drop. You can get into fine details such as typefaces and animations.
However, since you cannot directly edit the source code yourself, you cannot implement e-commerce functionality. The inability to implement the cart and payment features needed to launch an e-commerce site is a drawback.
Benefits of integrating STUDIO with Shopify
Integrating STUDIO with Shopify provides mainly the following two benefits.
- You can launch an online store on a site with an original design
- You can run initiatives and services that connect offline and online
Let's look at each of these in detail.
Launch an online store on a site with an original design
The first benefit is that you can build an online store while making the most of STUDIO's major strength: original site design. STUDIO has the appeal of letting you build a completely original site without code, but the drawback has been that it lacks cart and payment features and so cannot run an online store.
However, integrating Shopify makes it possible to run an online store even on a site built with STUDIO.
Run initiatives and services that connect offline and online
Integrating STUDIO with Shopify also makes it possible to handle everything from offline event ticket sales to reservation management in a consistent way.
STUDIO lets anyone easily and quickly create highly design-oriented landing pages and corporate sites. This makes it an ideal tool for building event sites where production speed matters. However, implementing ticket sales or reservation management systems is considered difficult.
By also using Shopify together, you can offer difficult features like ticket sales and reservation management smoothly and securely.
How to integrate Shopify and STUDIO via API
Integrating Shopify and STUDIO via API requires operations on both the Shopify and STUDIO sides. Here, we introduce how to integrate Shopify and STUDIO to sell products on a site with an original design.
The general flow is as follows.
- Copy the Storefront API access token on the Shopify side
- Integrate the Shopify API on the STUDIO side
- Link the design data created in STUDIO with the Shopify API data
- Create a product purchase button
- Display the product purchase button within STUDIO
We explain each step below.
1. Copy the Storefront API access token on the Shopify side
First, you need to copy the Storefront API access token on the Shopify side. The steps to copy it are as follows.
(1) Log in to Shopify and open "Apps and sales channels" on the home screen
Image source: Shopify
(2) Tap "Allow custom app development" from "Develop apps"
(3) Tap "Create an app"
(4) Enter an app name of your choice (e.g., "For STUDIO") and an app developer, then tap "Create app"
(5) Under "API credentials," select "Configure Storefront API" next to the access token
(6) Check "unauthenticated_read_product_listings" among the Storefront API access scope items and save
(7) Tap "Install app" at the top right
(8) From "API credentials," copy the "Storefront API access token"
2. Integrate the Shopify API on the STUDIO side
Next, integrate the Shopify API on the STUDIO side.
(1) Log in to STUDIO and open the design editor
Image source: STUDIO
(2) Tap "Add" from "API" in the left panel of the design editor
(3) Tap "Add new"
(4) Change the method type next to the URL field to "POST"
(5) Enter the URL field
For the URL field, enter "https://(your Shopify store domain)/api/2024-10/graphql.json".
You can find your Shopify store domain in the Shopify admin. The "2024-10" part of the URL varies depending on the Shopify API version, so be sure to check and enter the latest version.
(6) Enter the name and value fields in the header
In the name field, enter "Content-Type" and "X-Shopify-Storefront-Access-Token"; in the value field, enter "application/json" and the Storefront API access token, as shown below.
(7) Enter the JSON code in the body
You can obtain the JSON code from the Shopify API GraphiQL explorer. If you'd like more detail on how to obtain it, please refer to the Shopify Help Center.
(8) Tap to verify the API
(9) After tapping "API request," drag and drop the displayed data into the editor
3. Link the design data created in STUDIO with the Shopify API data
(1) From the product box on the STUDIO editor, select "Layers" in the left panel
(2) Tap "List Component." Drag the API integration data into the box within the editor
(3) Customize the image size, text, and other elements to your preference
Follow the steps above to customize the image size, text, and other elements to your preference.
4. Create a product purchase button
Next, create the product purchase button. The steps to create it are as follows. (1) On the Shopify home screen, tap "Add app"
Image source: Shopify
(2) Install "Buy Button channel"
If "Buy Button channel" doesn't appear after tapping "Add app," try searching for it in the Shopify App Store.
(3) Tap "Create buy button." Select "Product buy button"
(4) Customize the button style, background, and other design elements to your preference, then tap "Next"
Image source: Studio.Blog
(5) Tap "Copy code"
5. Display the product purchase button within STUDIO
Finally, follow the steps below to display the product purchase button within STUDIO, and you're done.
(1) Place a transparent box in the STUDIO editor. Paste the "Shopify Buy Button" code into the box ID in the right panel
(2) Tap "Page" in the left panel. Paste the "Shopify Buy Button" code into the "End of <body>" field in the custom code section
(3) Rewrite the first line of "End of <body>" to <script type="module">
Once you've completed all the steps above, publish your site and check that the product purchase button displays correctly. If there are no issues with the design or functionality, you can start running your e-commerce site.
The blog article below explains the Buy Button channel in detail. If you're considering adopting the Buy Button channel, please use it as a reference.
Build your ideal e-commerce site by integrating Shopify with STUDIO
Integrating Shopify with STUDIO makes it possible to run an e-commerce site with an original design. You can also handle event ticket sales and reservation management safely and smoothly.
Integration requires a few operations on both the Shopify and STUDIO sides. However, if you follow the steps introduced in this article, you should be able to integrate them without issue.
By integrating Shopify with STUDIO, try building your ideal e-commerce site, with attention to every last design detail.
