Buy Button

Genstore Buy Button is a lightweight sales tool that allows merchants to embed purchase entry points on any webpage. It enables customers to complete purchases without leaving the current page. This guide covers the core features, use cases, installation steps, configuration options, and common FAQs to help you use Buy Button effectively and boost your conversion rate.

Key benefits

Buy Button offers the following capabilities to streamline the shopping experience and improve sales performance:

• Seamless purchase experience: Easily embed the button on any page (e.g., blog, brand website, social media, or partner sites) and allow customers to purchase instantly.
• Centralized order management: All Buy Button orders are tracked and managed within the Genstore admin, making it easier to analyze sales performance.
• Flexible customization options: Supports multiple display styles to match different page layouts and brand aesthetics.

Use cases

Buy Button can be applied in a wide range of scenarios to help merchants explore low-cost and innovative sales strategies:

• Content-to-commerce conversion: Embed Buy Button in blog posts, forums, or influencer pages to drive purchases directly from high-quality content. For example, a beauty brand can include the button in a skincare article to prompt purchases.
• Multi-channel distribution: Embed Buy Button in brand websites, social media pages, traffic landing pages, or email campaigns to turn traffic into sales.
• Cross-sell opportunities: Use Buy Button on related or complementary product pages. For example, embed a coffee grinder purchase button on a coffee beans product page.
• Pre-orders and product launches: Add Buy Button to product introduction pages to support pre-sale and early access campaigns.

Install and authorize

1. Go to the Genstore App Store.
2. Search for Genstore Buy Button and open the app detail page.
3. Click Install, and the system will redirect you to the Genstore admin.
4. Follow the prompts to complete the installation and authorization process to enable the Buy Button channel.
5. (Optional) Pin the app to the sidebar for easier access in the future.

Create a Buy Button

1. In the Genstore admin, go to Apps -> Buy Button.
   • If not pinned, go to Apps -> Installed apps, find Buy Button, and click Launch app.
2. Click Create next to Product or Product collection.
3. Select the product or collection and proceed to style configuration.

Style and behavior settings

During the creation process, you can customize the button's appearance and behavior through an intuitive visual interface.

Layout styles (preview mode)

On the left panel, choose the desired layout style. The center panel will preview the effect in real time. Common styles include:

• Basic: Displays only the button; suitable for pages that already include product details.
• Classic: Shows product image and price for quick product awareness.
• Full: Displays product name, image, price, and description—ideal for feature or landing pages.

You can preview how the button appears on different devices (desktop, tablet, mobile) using the top preview toggles.

Button behavior

Under Click button action, choose what happens when a customer clicks the button:

• Add to cart (default)
• Checkout now
• View product details

Changes will be reflected immediately in the preview panel.

Style design (visual and interactive settings)

The Design section offers quick access detailed customization options:

Button style

Customize the button’s background color, text color, border radius, font, and font size.

Global typography

• Set alignment of product name, price, and button (left, center, etc.)
• Customize button text (e.g., “Buy now”, “Add to cart”)
• Enable or disable the quantity selector
• Configure text color, font, and size for product name and price

Redirect behavior

In the Checkout redirect settings, choose how the checkout page opens:

• Open in a new window (recommended, default)
• Open in the current window

TIP

These settings apply only to the current Buy Button. They do not affect your original product page or theme.

Embed the code

• After completing the setup, click Next step to generate the embed code.
• Copy the code and paste it into the HTML editor of your target webpage (e.g., blog editor, CMS, or static website).
• Save the page and preview the effect to confirm the button works correctly.

FAQs

Q1: Will the Buy Button content adjust based on the customer’s location?
Yes. Genstore detects the customer’s market using their IP address and checks whether the product is available in that market. If not, the customer will receive a notice during checkout and cannot complete the purchase. Make sure your product is enabled in the target market.

Q2: Can I modify the button style after it’s embedded on the page?
No real-time updates are supported. The button’s style is fixed when the embed code is generated. To change the style, you must reconfigure the button in the Genstore admin and replace the old embed code.

Q3: Can I embed multiple Buy Buttons on one page?
Yes. However, we recommend keeping the click actions consistent (e.g., all buttons use Add to cart or Checkout now) to ensure a smooth and unified customer experience.