Buy Button: Guide to Setup and Use

The Buy Button app offers a direct and streamlined purchasing experience for customers while expanding the sales reach to more channels for merchants. Download our Buy Button app here.

Here are the benefits of using this app: 

• Convenient Purchase Process: Embed the Buy Button on any webpage, allowing customers to complete purchases without navigating away. This streamlined process showcases product images, descriptions, and prices, enabling quicker transactions.
• Easy Sales and Order Management: With the Buy Button, you can efficiently manage sales and orders. Orders placed through the Buy Button are tracked for unified management and comprehensive sales data analysis.
• Flexible Settings: The Buy Button offers diverse customization options to suit different webpage requirements, providing flexibility in design and functionality.

How to Use the Buy Button

Please follow the steps outlined below:

1. To generate a Buy Button for a single product or an entire category, click on Create > Go Now.
   
2. Select the products you want to set up with Buy Button app, and click Manage next to Sales Channel under the Product settings section. Tick Buy Button > Add. If there are already products under the Buy Button channel, you can select the products and proceed to the next step.
   
3. After selecting the products or categories, you can flexibly configure the display style and layout based on actual scenarios and page display requirements.
   
   
4. Click Next step button to generate a code snippet. Copy the code.
   
5. Paste the code into the corresponding page editor where you want to display it. For instance, you can paste the code into the rich text editor of a blog post.
   
6. If you wish to integrate the Buy Button code into a SHOPLINE custom page, you'll need to apply additional modifications to the generated code. Copy the following supplementary code:

   <script type="text/javascript">
         var shoplineBuyContainer = document.createElement("div");
         shoplineBuyContainer.id = "collection-component-XXXXXX";var container = document.body.querySelector(".custom-page-render-container");
         container.append(shoplineBuyContainer);
   </script>

   

Best Practices for Sales Expansion

Expanding Sales Channels to Maximize Your Sales Opportunities in All Possible Scenarios

With the Buy Button feature, you can effortlessly generate a snippet of the Buy Button code for your product with just a few clicks. This code can then be pasted into various consumption scenarios, such as your brand's website, social media accounts, online stores, blog posts, KOL promotion platforms, and marketing emails. Any space that allows custom HTML code can be transformed into a valuable sales channel.

Many KOLs have successfully attracted a significant amount of traffic by creating high-quality content. However, consumers can't make direct purchases on their content pages. By adding a Buy Button on relevant content pages, consumers can complete online purchases directly, converting traffic into increased sales.

For instance, take Ben, who sells beauty products in his store. He created a Buy Button for his best-selling product and posted a blog about improving skin texture on WordPress. While visitors read his post, they have the convenience of making purchases directly by clicking on the Buy Button.

Besides blog posts, you can integrate the SHOPLINE Buy Button into various other scenarios with existing audiences and a need for traffic conversions but lacking built-in e-commerce purchasing capabilities. These scenarios include website pages, KOL recommendation pages, and dedicated product showcase pages.

Ben can also embed a Buy Button on the description page of a product for pre-sale or in other stores owned by competitors who share the same customer profile, to boost product sales.

‍‍Shortening the Path to Purchase for Higher Conversion Rates

The presence of a Buy Button serves as a shortcut for customers to make purchases. In the past, merchants used external links for product promotion on blogs or external website pages, and customers were unable to directly complete purchase transactions. They had to navigate to store websites to place orders, resulting in a lengthened conversion path and an increased probability of loss.

With the Buy Button, consumers can complete the entire purchasing process directly within the blog or webpage they are visiting, eliminating the need for navigation to the store's website. This streamlined approach significantly reduces potential losses caused by navigation and effectively boosts conversion rates.

Creating New Sales Methods at Low Costs to Increase Sales

With a buy button, you can easily translate your ideas into increased sales at low costs. For instance, you can embed a makeup tutorial video along with a buy button on a web page, enabling viewers to make purchases directly while watching the video. Additionally, you can embed a buy button on the description page of a product for pre-sale.

Furthermore, you can embed a buy button in complementary stores. For example, if you run a bakery, you can embed a buy button for your products in a coffee bean store to encourage complementary sales.

You can also showcase single products or product categories and customize the appearance of Buy Button based on specific sales channels and promotional scenarios. These settings include displaying product details (such as a single button, product overview, or product details), customizing the button (text, color, size, etc.), adjusting cart settings (background, text, etc.), and providing navigation options to the order-placing page.