In this article, we will show you step by step how to integrate Shopify into Onepage. The main focus is on embedding individual products or collections on your Onepage site as a simple "Buy" button.
📌 Note: The following steps and screenshots are based on the state of the tool at the time this article was created. The user interface or terminology of the tool may have changed since then. If you notice any differences, we recommend checking the current instructions within the tool, consulting the provider’s help center, or contacting the provider’s support team.
Create a Shopify Buy Button
In this example, we’ll show you how to create a product in Shopify and set up the Buy Button. The same process also works for a collection.
Step 1: Create a product in Shopify
First, create the product in your Shopify account that you want to sell on your site.
Click on "Products" → "Add product".
You can create your product as you like, setting the title, description, images, categories, prices, and many other details.
Example for "Handmade Candles":
Then select "Save".
Step 2: Install the Buy Button add-on
Install the official Shopify add-on "Buy Button": Shopify Buy Button
Alternatively, you can also search for "Buy Button channel" directly in the App Store.
Step 3: Select the "Buy" button
After installation, a new “Buy Button” option will appear in the left-hand Shopify menu. Here, you select Product “Buy Button” and choose the desired product.
Step 4: Configure design and behavior settings
You can now configure the design and behavior settings for your Buy Button. The following options are available:
Layout style: Choose how the product is displayed on your page, e.g., Basic, Classic, or Full view.
Action on click: Determine what happens when visitors click the button, e.g., add directly to cart, redirect to check out, or open product details.
Button style: Customize the color, shape, text, and size of the Buy Button so it matches your site’s design.
Layout: Fine-tune spacing, alignment, and arrangement of elements within the product box, as well as text adjustments.
Shopping Cart: Set various texts and colors individually to visually and contextually match the cart to your website.
Advanced settings: Here, you can define how the checkout process works for your customers, either by opening a pop-up window or redirecting in the same tab.
The final result could look something like this:
After completing the customizations, select "Next".
Step 5: Copy the embed code
Now copy the code by clicking "Copy code".
⚠️ Important: All additional settings, such as connecting your domain, setting up payment methods, and other configurations, still need to be completed for customers to actually complete a purchase.
If you have any questions, you can always contact Shopify support.
Insert code into Onepage
In Onepage, you can now embed the code in any section of your page.
Step 1: Create a new section
Open your project in the editor and navigate to the page where the Buy Button should appear. Click the + icon and add a new empty section.
In the search bar, look for "Custom Code" and add the element to your section.
Step 2: Insert the code
Paste the previously copied code into the "HTML" field.
Then click "Publish" or "Update".
🎉 Your product is now successfully integrated into your Onepage project! 🎉
💡Do you have any feedback about this article? Please let us know through our live chat or at support@onepage.io, so we may keep it up to date. Thank you! 🙂