If you’re a Showit user looking to sell products directly from your beautifully designed website, integrating Shopify’s Buy Button is a seamless solution. This guide will walk you through the process, ensuring your e-commerce setup is both functional and aesthetically pleasing.

Why Integrate Shopify Buy Button with Showit?

Showit excels in design flexibility, allowing users to create visually stunning websites without coding. However, it lacks built-in e-commerce capabilities. Shopify’s Buy Button bridges this gap by enabling product sales through embedded codes, combining Showit’s design prowess with Shopify’s robust e-commerce functionality.

Prerequisites

Before proceeding, ensure you have:

• A Showit account with an active website.
  
• A Shopify account (the Starter plan suffices for Buy Button functionality).
  

Read More: How to Add a Sales Page in Showit

Step-by-Step Integration Guide

1. Set Up Your Product in Shopify

• Log in to Shopify: Access your Shopify dashboard.
  
• Add a Product: Navigate to the “Products” section and click “Add product.”
  
• Enter Product Details: Fill in the product title, description, price, and upload images.
  
• Save: Click “Save” to store your product information.
  

2. Activate the Buy Button Sales Channel

• Access Sales Channels: In the Shopify dashboard, click the “+” button next to “Sales Channels.”
  
• Add Buy Button: Select “Buy Button” from the list and click “Add.”
  

3. Generate the Buy Button Code

• Navigate to Buy Button: Click on “Buy Button” in the Sales Channels menu.
  
• Create Buy Button: Click “Create a Buy Button.”
  
• Select Product: Choose the product you want to create a button for and click “Select product.”
  
• Customize Button: Adjust the button style, layout, and action (e.g., add to cart or direct checkout).
  
• Generate Code: Click “Next” and then “Copy code” to copy the generated HTML code.
  

4. Embed the Buy Button in Showit

• Open Showit Editor: Log in to your Showit account and open the website editor.
  
• Select Page: Navigate to the page where you want to add the Buy Button.
  
• Add Embed Code Box: Click on the “Embed Code” icon (</>) to add an embed code box to your page.
  
• Paste Code: Double-click the embed code box, paste the Shopify Buy Button code, and click “Save.”
  
• Position and Resize: Move and resize the embed code box to fit your design layout.
  

5. Customize Button Appearance

To maintain design consistency:

• Overlay Technique: Place the Shopify Buy Button over a Showit-designed button.
  
• Adjust Opacity: Set the opacity of the Shopify embed code box to 0%, making it invisible while retaining functionality.
  
• Design Cohesion: This method allows you to use your custom-designed Showit button while leveraging Shopify’s e-commerce capabilities.
  

Read More: Gradients and Drop Shadows in Showit

6. Test the Integration

• Preview: Use Showit’s preview function to test the Buy Button.
  
• Functionality Check: Ensure the button adds products to the cart and redirects to Shopify’s checkout as intended.
  
• Mobile Responsiveness: Verify that the button functions correctly on mobile devices.

Tips for Enhanced Integration

• Cart Icon Visibility: To display the cart icon on all pages, add a hidden Shopify Buy Button embed code to a global canvas (e.g., footer). Set its opacity to 0% and height to 1 pixel.
  
• SEO Considerations: For better SEO, include product titles, descriptions, and keywords directly on your Showit pages, even if the Buy Button is embedded.
  
• Consistent Styling: Match the Buy Button’s colors and fonts with your website’s branding for a cohesive look.
  

Conclusion

Integrating Shopify’s Buy Button into your Showit website allows you to combine Showit’s design flexibility with Shopify’s e-commerce functionality. By following this guide, you can create a seamless shopping experience for your visitors without compromising on design or functionality.