Buy Button

Genstore Buy Button is a lightweight sales tool that allows merchants to embed purchase buttons on any webpage, enabling customers to complete purchases without leaving the current page. This guide covers key benefits, installation and authorization, step-by-step creation and configuration, and FAQs to help you use Buy Button effectively and boost conversion rates.

Key benefits

Buy Button provides the following features to optimize the shopping experience and drive sales:

• Seamless purchase experience: Embed the button on any page (e.g., blog, website, social media, partner sites) so customers can purchase instantly.
• Centralized order management: All Buy Button orders are tracked and managed in the Genstore admin, simplifying sales analysis.
• Flexible customization: Multiple display styles and design options adapt to your page layout and brand identity.
• Multi-channel reach: Embed Buy Button in your website, social media, landing pages, or email campaigns to quickly turn traffic into sales.

Install and authorize

1. Visit the Genstore App Store.
2. Search for Genstore Buy Button and open the app detail page.
3. Click Install. The system will redirect you to your Genstore admin.
4. Follow the prompts to complete installation and authorize the Buy Button channel.
5. (Optional) Pin the app to your sidebar for easier access later.

Create and configure Buy Button

Step 1: Access Buy Button

• In your Genstore admin, go to Apps -> Buy Button.
• If not pinned, navigate to Apps -> Installed apps, find Buy Button, and click Launch app.

Step 2: Select target products or collections

On the app page, click Create next to Product or Product collection, then select the product or collection you wish to generate a Buy Button for.

Step 3: Set layout style and preview

• In the left Layout style panel, choose your preferred layout:
  • Basic: Only displays the Buy Button.
  • Classic: Shows product image and price.
  • Full: Includes product details, image, and price.
• The center preview updates in real time. You can switch device views (desktop, mobile) at the top of the preview.

Step 4: Configure button behavior and interactions

Under Click button action, choose what happens when customers click the button and configure behavior-specific settings:

• Add to cart (default)
  • Customize cart appearance, including title, helper text, button label, cart background color, and text color.
• Checkout now
  • Configure how the checkout page opens:
    • Open in a new window
    • Open in the current window
• View product details
  • Customize the product details pop-up, including button label, quantity selector, and typography (font, size, and color for product name and price).

Step 5: Global style design

Beyond the click behavior styles above, you can use the Design module to customize overall styles, including:

• Button styles: background color, text color, border radius, font, and font size.
• Global layout: alignment of text and button, and quantity selector toggle.

TIP

These settings apply only to the generated Buy Button. They will not affect your original product page or store theme.

Embed the code

• After completing your setup, click Next step to generate the embed code.
• Copy the code and paste it into your webpage’s HTML editor (e.g., blog platform, CMS, or static website).
• Save and preview the page to ensure the button functions correctly.

FAQs

Q1. Will Buy Button content adjust automatically based on customer location?

A: Yes. Genstore identifies the customer’s market via their IP address and checks if the selected product is available there. If it’s unavailable, a message will appear during checkout and the order cannot be completed. Ensure your product is enabled in the target market.

Q2. Can I edit the Buy Button style after embedding it on my page?

A: No. The style is fixed when the embed code is generated. To change the style, reconfigure the button in your Genstore admin and replace the embed code.

Q3. Can I embed multiple Buy Buttons on a single page?

A: Yes, you can. We recommend setting consistent click behaviors (e.g., all using Add to cart or Checkout now) to maintain a smooth, unified purchasing experience.