Integrate with Shopify

​

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. Once you’ve created a project, you can publish it to the internet so that others can access your site. This guide will walk you through the steps to publish your project online.

​

2. Before You Start

Before starting the connection process, please ensure you have completed the following preparations:

• An active Shopify store with the products ready to sell.
• A React project or a React - Next.js project in Readdy (currently only these two project types support Stripe).

• Your Readdy project is already connected to Supabase (Shopify integration requires Supabase. How to connect Supabase).

Once these are ready, let’s connect Shopify.

​

3. Access the Shopify Integration

In the Readdy’s editor interface, click Integration in the top-right navigation bar. From the dropdown, select Shopify. After opening the Shopify feature panel, you need to enter your Store Domain and Storefront API to connect your Shopify store.

Store connection is a one-time setup - you won’t need to enter the domain and API again for future use of this feature.

​

4. Get Store Domain and Storefront API

​

4.1. Get Store Domain

Visit https://www.shopify.com/, log in to your Shopify account, and switch to the store you want to connect. Click the “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.

• If your store has a custom domain configured, copy and save the custom domain from the first row marked as “Primary for Online Store”.
• If your store doesn’t have a custom domain configured, only the default domain will be displayed - copy and save this default domain.

​

4.2. Get Storefront API

Once get your store domain, you’ll need to get the Storefront API access. Navigate to “Apps and sales channels” in the left sidebar, then locate and click the “Develop apps” button on the right. Click the “Create an app” button in the up right corner. Enter a name for your app, then click “Create app”.

The name can be anything you prefer—just choose something you’ll recognize easily, such as “Connect to Readdy”.

Once the app is created, click “Configure Storefront API scopes”. Select the following permissions and click “Save”:

unauthenticated_read_checkouts
unauthenticated_read_product_listings
unauthenticated_read_product_inventory
unauthenticated_read_product_pickup_locations
unauthenticated_read_product_tags

Once the configuration is saved, click “Install app”. Click “Install” in the confirmation popup that appears. Once the app is installed, the page should automatically redirect to the “API credentials” tab. If this doesn’t happen automatically, manually click on this tab. You’ll find a 32-character alphanumeric Storefront API key displayed—this serves as the essential “key” required to connect your Shopify store. Make sure to copy and store this API key in a safe place. You have now successfully got your Store Domain and Storefront API. Please return to the Readdy platform to proceed with the next steps.

​

5. Connect Your Shopify Store

Go back to Readdy, input the Store Domain and Storefront API that you just acquired, then click “Connect”. Once the connection is established, follow the on-screen instructions to select the product connection area from the page displayed on the left. 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 informations in Shopify (including product names, images, etc.) will automatically sync to your Readdy page. Note that you’ll need to refresh the page to see the updated information.

​

6. Conncet 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.

​

7. 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 publish your website first, and the payment process will work on your online website.

---

​

Need Help?

If this guide doesn’t resolve your issue, contact us at hi@readdy.ai or use our live chat. We’re here to help! Thank you for using Readdy — and best of luck with your website launch! ❤️