Log in

Creating a Buy Button

After youadd the Buy Button sales channelin your Shopify admin, you can create a Buy Button fora productora collection.

After you create a Buy Button, you copy the automatically generated code and then add the code to the webpage or blog post where you want the button to appear. For example, you might want to add the Buy Button to your Wordpress blog or Squarespace website.

The appearance of the Buy Button cannot be changed after you embed it on your website. If you want to change it, then you must create a new button in the channel and replace the original code with the new code.

On this page

Customizing Buy Buttons

哟u can customize a Buy Button's appearance and how it behaves:

  • its color
  • its size
  • its font
  • the action that happens when the button is clicked
  • whether the checkout opens in a new browser window

As you customize the button, you can preview your changes. You can test the behavior of the Buy Button by clicking the preview.

Layout style

哟u can choose the layout of the Buy Button.

Available layouts for Buy Buttons
Basic Select this layout to add a Buy Button without any product image. You might want to do this if you already display your products elsewhere online but just want to add button to make the purchase.
Classic Select this layout to display a product image and price beside the Buy Button. This layout is useful for a quick product preview, such as in a blog post.
Full view Select this layout to display a product image, price, and description beside the Buy Button. This layout emulates a product details page in your online store.

Buy Button actions

When you create a Buy Button, you can select the action that occurs when the button is clicked.

If the Buy Button is for a collection, then the action applies to each product in the collection.

  • Add product to cartadds the product to a shopping cart. Customers can continue shopping and add additional products to the cart.
  • Direct to checkoutbrings the customer directly to your checkout, where they can purchase the product. Customers aren't able to add additional products to their order.
  • Open product detailsdisplays aView productbutton. When the customer clicks the button, they can see the description of the product, select any available product variants, and add the product to the cart. If a product has multiple product images, then these also display.
    • This option isn't available when you choose theFull viewlayout because theFull viewlayout already displays all of the product details.

哟u can also choose if the checkout opens in a new browser window or if it opens in the same tab as your website. The default behavior is that the checkout opens in a new window.

Buy Button appearance

  • Button styleincludes shape, color, and typography for the button part of the Buy Button.
  • LayoutDepending on the layout style that you choose, you can customize settings such as button alignment, image size, button text, font, color, and size.
  • Shopping cartincludes text and color options for the embedded shopping cart. You can also enable and customize the label for theOrder notefield. You can use order notes to collect special instructions from customers about how to prepare and deliver an order. TheAdditional informationfield lets you communicate a message to your customers.
    • 哟u can only edit the settings for the shopping cart if you have chosenAdd product to cartorOpen product detailsas the button'saction.
  • Detailed pop-upincludes the settings for the product details pop-up window. You can customize the text of the button, whether or not to show the quantity field, the colors used for the background and labels, and the font and font size of the labels. You can only edit these settings if you have chosenOpen product detailsas the button'saction.

创建一个购买按钮为单个产品

哟u can create a Buy Button for a single product. The Buy Button can include one or all of the product's variants. When you create the Buy Button, you choose a layout style and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more aboutcustomizing Buy Buttons.

Before you create a Buy Button for a product, you must haveadded the product in your Shopify Adminandmade it availableto the Buy Button sales channel.

Steps:

  1. From your Shopify admin, clickSettings>Apps and sales channels.

  2. From theApps and sales channelspage, clickBuy Button.

  3. ClickOpen sales channel.

  4. ClickCreate a Buy Button.

  5. ClickProduct Buy Button.

  6. Select the product from your catalog or use the search to find a product. ClickSelect.

  7. Optional: customize the Buy Button.

    1. If your product has variants, then selectAll variantsor select the variant that you want to include.
    2. Choose alayout styleand theaction当客户点击按钮。哟u can alsocustomize the button's appearance.
    3. By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click先进的settings>Redirect in the same tab.

  8. ClickNext.

  9. ClickCopy code.

  10. Open the HTML editor for the webpage where you want to display the Buy Button. Refer toAdding Buy Button code to HTML.

  11. Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.

Create a Buy Button for a collection

When you create a Buy Button for a collection, you are actually creating a button for each product in the collection.

When you create the Buy Button, you choose a layout style and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more aboutcustomizing Buy Buttons.

Before you create a Buy Button for a collection, you must have:

Steps:

  1. From your Shopify admin, clickSettings>Apps and sales channels.

  2. From theApps and sales channelspage, clickBuy Button.

  3. ClickOpen sales channel.

  4. ClickCreate a Buy Button.

  5. ClickCollection Buy Button.

  6. Select the collection or, use the search to find the collection. ClickSelect.

  7. Optional: customize the Buy Button.

    1. Choose theaction当客户点击按钮。哟u can alsocustomize the button's appearance.
    2. By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click先进的settings>Redirect in the same tab.

  8. ClickNext.

  9. ClickCopy code.

  10. Open the HTML editor for the webpage where you want to display the Buy Button. Refer toAdding Buy Button code to HTML.

  11. Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.

Ready to start selling with Shopify?Try it free