Hi. How can we help?

Setting up the Buy Button on any website

The Buy Button lets you embed a customizable product card and secure checkout with a simple piece of code on any external website that is not Lightspeed eCom. You can choose between a full-size product card displaying the product image, description, and price or a compact version with just a button. Customers can browse, add items to their cart, and complete the purchase—all without leaving your site.

Any updates to a product in your POS will automatically reflect on the product card. You can easily customize the text, color, and appearance to match your brand. Orders placed through the Buy Button appear in your POS and on the My Sales → Orders page in your eCom admin, making tracking and managing purchases seamless.

Ways to use the Buy Button

The Buy Button is a versatile tool that lets you sell products, services, subscriptions, or even accept donations from virtually any online platform. Since it’s an embeddable, clickable button, you can add it to websites, blogs, emails, and even social media posts—turning any digital space into a checkout-ready storefront.

Here are some great ways to use Buy Buttons:

  • Sell directly from your blog: Embed a Buy Button within blog posts to showcase and sell products related to your content.
  • Feature products on your existing website: Keep your best-selling or featured items visible on every page.
  • Add checkout to existing product pages: If you already list products on your site, simply insert the Buy Button to enable online checkout.
  • Create a product showcase: Build a dedicated page that highlights every advantage of your product, complete with a direct Buy Button for easy checkout.

With the Buy Button, any online space can become a sales channel, making it easier than ever to reach customers and increase conversions.

Before you start

To start using the Buy Button, you’ll first need to set up your eCom store:

  1. Enable a payment gateway. The Buy Button requires a compatible payment processor to accept payments. You can add payment methods from the Online → Settings → Payments page.
  2. Set up a shipping method. You can offer customers carrier shipping, local delivery, or in-store pickup.
  3. Configure general settings of your online store

Once your store is ready, you can generate Buy Buttons to embed on your website, blog, or other online platforms—making it easy for customers to shop seamlessly.

The Buy Button layouts

There are three ways to show a Buy Button on your site—button, compact, or full-size view:

Buy Button in eCom.png

Layout

Use case

Button only Just a Buy Now button without any image or price.
Works best for blog posts and pages with complete product descriptions. For example, if you describe a product or have already showcased it on the page, add a Buy Button to offer an online checkout.
Compact A minimalistic product card with a Buy Now button.
It suits best site pages with a detailed product description. Add a short product summary using its image, name, and price. Additionally, you can display product variants, input fields, and item quantity. If you have a promotion running, it will also be displayed.
Full-size

A full-scale product card with an Add to Bag button.
Use this layout for landing pages or in a blog post. You can choose from two layout options:

  • 2 columns — in case you want to draw attention to product images
  • 3 columns — in case you want to draw attention to product description

There can be only one full-size layout per page. The related products section will not be displayed on the product card.

Creating a Buy Button

Before creating a Buy Button, you need to have at least one product in your POS and set up your store by adding payment and shipping options.

When generating a Buy Button, you can select a layout style and customize its color, text, and appearance. To embed a Buy Button on a webpage or blog, copy the automatically generated integration code and paste it where on your website you want the button to appear. The product card can be placed anywhere on the page, including a sidebar, footer, or even an error page.

To create a Buy Button:

  1. From your POS, go to Online and click Go to eCom.
  2. In your eCom admin, select Sales Channels in the menu on the left. 
  3. Scroll down to the Buy buttons card and click Get Started:

    Buy Button.png
  4. On the opened page, click Pick Product and use the search bar to pick a product you’d like to embed.

    You can also access the Buy Button creation wizard for a specific product straight from its product's details page ("Buy Now" Button tab → Embed Product).

  5. Customize your Buy Button—pick a layout and click Appearance to choose what product details to show.
  6. Click Generate Code, then click Copy Code.
  7. Open the site editor of your site builder, or log into your website backend. If you don’t know how to go to your store’s backend, contact your site administrator or a designer who created the site.
  8. Select the page where you want to display the Buy Button.
  9. Paste the integration code to a page. Depending on your website, that may be an HTML or source tab or a separate button to add codes. If you are not sure how to add custom codes to your website, contact your website developer for more detailed instructions.

That’s it!

Any updates made to a product after placing a Buy Button—such as renaming, changing the price, or updating the description—will automatically reflect on the button. If a product or product variant goes out of stock, the "Buy Now" or "Add to Bag" button will be disabled, preventing customers from purchasing the sold-out item. However, the Buy Button itself will remain visible on the page.

With the Buy Button, customers can place orders directly on your site without being redirected elsewhere. All orders made through a Buy Button will appear in your POS and on the My Sales → Orders page in your eCom admin.

Changing text on the Buy Button

You can customize the text on the Buy Button to match your brand's tone and messaging. Whether it’s “Buy Monstera,” “I Want This!” or “Request a Quote,” you have full control over what your customers see. The default “Buy Now” or “Add to Bag” text can be modified using the Store Label Editor in your eCom admin.

When you change the text, it's changed for all buy buttons in your store, including those that appear on your site.

To change the wording on your Buy Button:

  1. From your POS, go to Online and click Go to eCom.
  2. Hover your mouse over Settings at the manu on the left and select Edit Store Labels.
  3. Click Get started.
  4. Use the search bar to find the necessary label. For example, “Buy Now”.
  5. Enter your custom text to the field. For instance, enter “Order now” instead of “Buy Now”.
  6. Changes will automatically apply for all Buy buttons in your store.

Customizing appearance of the Buy Button

Beyond customizing the text on your Buy Button, you can also adjust its appearance to align with your brand and website design:

  • Hide the bottom navigation menu or breadcrumbs from product details pages. You can do it from your eCom site builder editor. For this, go to your site editor and from the Page dropdown at the top select Products, then click Settings at the top right and select Store Design. Click Product details. Click different settings dropdown to make navigation changes. Once you're done editing, click Publish.

    Changes affect all the products in your store.

  • Change the look of the product card and buttons to match your website’s theme. You can do it from your eCom site builder editor. For this, go to your site editor and from the Page dropdown at the top select Catalog, then click Settings at the top right and select Store Design. Click Categories & product grid. Click different settings dropdown to make changes. Once you're done editing, click Publish.

 

Was this article helpful?