This article will explain how to embed your custom Shopify Buy Button directly into the Classic Builder, using the HTML widget.
Did you want to create a Shopify button in Unbounce with a customized Shopify link (instead of an embed code)? Check out our detailed help guide here: Adding a Customized Shopify Button in Unbounce.
Are you using Smart Builder? See this article to learn how to add a Buy Button to your page, powered by Unbounce Apps: Adding a Shopify Buy Button to Smart Builder.
Embedding A Shopify Buy Button to Your Landing Page
- Create a Shopify Buy Button (check out Shopify's Adding a Buy Button or embedded collection to your website guide for instructions on creating your button and how to retrieve your HTML embed code).
- Copy the embed code from Shopify for your buy button.
- Head back into Unbounce and navigate to the page you would like to this Shopify button. Open this page in the Unbounce Builder.
- Drag the Custom HTML widget in the Page Builder onto the screen where you want your Shopify Buy Button to display.
- Paste your code into the HTML field and click Done.
- Save and Publish your landing page to finalize these changes.
- If necessary, adjust the size of the custom HTML element to ensure the entire button is visible.
Custom HTML is only visible within Preview mode or the published page (not within the builder).