Skip to main content

​
1. What is Shopify?

Shopify is a leading global e-commerce platform that provides businesses and individuals with a complete solution for creating and managing online stores. You can connect your Shopify account to Readdy’s project, enabling you to sell the Shopify products on your Readdy-generated websites.

​
2. Before You Start

You need to connect to Supabase before setting up Shopify integration. In the Readdy editor, click the Toolcase icon at the bottom of the screen.
From the tools panel, find Supabase and click “Add” to connect it first.
For detailed instructions, see How to connect Supabase.

​
3. Access the Shopify Integration

Once Supabase is connected, open the Toolcase again and select Shopify.
After opening the Shopify panel, you’ll see three fields to fill in: Store Domain, Client ID, and Secret Key.
Store connection is a one-time setup — you won’t need to enter these credentials again for future use of this feature.
The following steps will guide you through obtaining each of these three values from your Shopify account.

​
4. Get Your Store Domain

Visit https://www.shopify.com/, log in to your Shopify account, and switch to the store you want to connect. Click “Settings” in the bottom-left corner of the page.
Click “Domains” in the left sidebar. On the right side, you’ll see your store’s domain.
  • Copy and save the default Shopify domain (the one ending in .myshopify.com).
  • Do not use your own custom domain.
Save the domain for later — you’ll enter it in Readdy at the final step.

​
5. Create a Shopify App

Click “Apps” in the left sidebar, then click “Develop apps”.
Click the black button shown below to navigate to the Shopify Developer Dashboard.
Then click “Create app” in the Developer Dashboard.
Enter a name for your app, then click “Create”.
The name can be anything you prefer — just choose something you’ll recognize easily.

​
6. Configure API Scopes

After the app is created, click “Select scopes” to configure the API permissions.
In the scopes selection popup, search for and enable the following Storefront API permissions (do not select Admin API): Search “checkout” and select:
  • unauthenticated_read_checkouts
Search “product” and select:
  • unauthenticated_read_product_pickup_locations
  • unauthenticated_read_product_inventory
  • unauthenticated_read_product_listings
  • unauthenticated_read_product_tags
Click “Done” to save the scopes. Next, you need to release a version of your app. Click “Release”.
Confirm the release in the popup.

​
7. Get Client ID and Secret

After the release, go to the app’s Settings page in the Developer Dashboard. You’ll find your Client ID and Client secret displayed here. Copy and save both values.

​
8. Install the App

Go back to the Developer Dashboard Home page and click “Install app”.
You’ll be redirected to your store’s homepage. Select your store to proceed.
Review the permissions and click “Install”.
Once the installation is complete, you’ll see a success confirmation.

​
9. Connect Your Store in Readdy

Go back to Readdy’s Shopify panel. Enter the Store Domain you saved earlier.
Enter the Client ID and Secret Key you copied from the Developer Dashboard, then click “Connect”.

​
10. Connect Products to Your Website

Once the connection is established, follow the on-screen instructions to select the product section on the page displayed on the left.
We recommend selecting the entire product section instead of individual elements like a single piece of text, one image, or other minor components within the product information.
Once you’ve made your selection, click “Start to Connect Products”.
Within the panel, select the products you want to connect, then click “Connect x Products”.
Wait briefly for the AI to connect your selected products to the page. After successful connection, when you edit the product information in Shopify (including product names, images, etc.), it will automatically sync to your Readdy page. Note that you’ll need to refresh the page to see the updated information.

​
11. Connect to Shopify Checkout

Once product connection is successful, you must establish the corresponding payment workflow to enable customer purchases on your website. Please follow these recommended procedures:
  1. Begin by implementing the shopping cart functionality within your web project, ensuring all features operate correctly including: adding products to cart, removing cart items, enforcing stock quantity limits, accurate price calculations, and other essential cart operations.
  2. Within the shopping cart interface, instruct the AI by saying “When the payment button is clicked, connect to my Shopify payment page.” The AI will then generate the appropriate payment integration functionality.
  3. Upon completion of the payment setup, thoroughly test the entire payment workflow to verify that products can be purchased without issues.

​
12. Tips

Best Practices for Improving Product Connection Success:
  • Proper Area Selection: When selecting regions for product connection, choose complete product sections rather than individual elements such as isolated text, images, or buttons
  • Quantity Alignment: Ensure the number of selected products matches the actual product count displayed on the page. To adjust quantities, first request the AI to modify the page display, then proceed with connection
Troubleshooting Common Issues:
  • Mock data persistence: Use “Delete the mock data in the xxx area, keep the Shopify-connected data”
  • Incorrect product ordering: Use “The product display order in the xxx area should be: …”
  • Unwanted additional products: Use “Remove the xxx product from the xxx area, keep the xxx product”
  • Missing product attributes: Use “The page is missing the xxx attribute, connect the product’s xxx attribute”
  • Shopify-pay page cannot be accessed: Shopify payment pages cannot be accessed directly from Readdy’s editor. Please use your project’s share link to open the project, or publish your website first and visit your domain — the payment process will work correctly there.

​
Need Help?

If this guide doesn’t resolve your issue: We’re here to help! Thank you for using Readdy — and best of luck with your website launch!