In today’s eCommerce world, Instagram is a powerful platform for driving sales and engaging with customers. Adding an “Order on Instagram” button to your Shopify product page can help you leverage this platform by providing an easy way for customers to place orders directly through Instagram. In this guide, we’ll walk you through the steps to seamlessly integrate this feature into your Shopify store.

Why Add an “Order on Instagram” Button?

1. Enhance Customer Experience: Simplifies the purchasing process for Instagram users.
2. Increase Conversions: Redirecting traffic to Instagram can drive higher engagement and sales.
3. Leverage Social Media Presence: Capitalizes on your Instagram audience to boost sales.

Steps to Add the “Order on Instagram” Button

Step 1: Add the Code to Your Shopify Theme

To get started, you’ll need to edit your Shopify theme to include the “Order on Instagram” button. Here’s how:

1. Go to your Shopify admin dashboard.
2. Navigate to Online Store > Themes.
3. Find your live theme and click Actions > Edit Code.
4. Locate the product page template file. This is typically named product.liquid or main-product.liquid.
5. Paste the following code snippet where you want the button to appear:

<!-- HTML: Order on Instagram Button -->
<div class="order-on-instagram">
  <a href="https://www.instagram.com/youraccount" target="_blank" class="instagram-button">
    Order on Instagram
  </a>
</div>

<!-- CSS: Style for the Button -->
<style>
  .order-on-instagram {
    margin: 20px 0;
    text-align: center;
  }

  .instagram-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #E1306C; /* Instagram pink */
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, box-shadow 0.3s;
  }

  .instagram-button:hover {
    background-color: #C13584; /* Darker Instagram pink */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
  }
</style>

<!-- Optional JavaScript: Open Instagram in a New Tab -->
<script>
  document.querySelector('.instagram-button').addEventListener('click', function () {
    window.open(this.href, '_blank');
  });
</script>

Step 2: Customize the Button

• Replace yourusername in the href attribute with your Instagram handle.
• Adjust the button’s style in the CSS section if needed to match your store’s design.

Step 3: Test the Button

1. Save the changes to your theme.
2. Visit a product page on your Shopify store to ensure the button appears correctly.
3. Click the button to verify that it redirects to your Instagram profile.

Video Tutorial

For a step-by-step walkthrough, watch our video tutorial below:

Conclusion

Adding an “Order on Instagram” button to your Shopify product page is a simple but effective way to integrate your social media presence with your eCommerce store. By following this guide, you can enhance the shopping experience and connect more effectively with your Instagram audience. Start implementing this feature today to boost sales and engagement!