product
      Back to home
      1. Support
      2. General
      3. product

      How to add a buy button to your site?

      Adding a “Buy Button” to your website can be a great way to allow users to purchase items directly from your site.

      This guide will walk you through installing the button using a simple HTML code snippet. Don’t worry if you’re not a coding expert—this guide is designed to be easy to follow for beginners.

      Preconditions

      Before you can install the cart, you have to install the HeadQ code snippet on your website. If you haven't done the snippet installation yet, please refer to How to add code snippet via Google Tag Manager or How to add code snippet to WordPress articles.

      Step 1: Understanding the Code Snippet

      Example code snippet you will be working with:

       <div
        data-item-id="123"
        data-text="Add to cart"
        data-action="quote"
        data-padding-x="full"
        data-padding-y="9"
        class="headq-product-card">
       </div>

      This snippet is an HTML div element that serves as the container for your “Buy Button.” It uses several data attributes and a class attribute, which we’ll explain below.

       

      Attribute Description Example Usage
      data-item-id This attribute represents the unique identifier for the product you want to sell. If the product has an ID of 123, the attribute would be data-item-id="123". Change the value "123" to match the actual ID of the product you’re selling.
      data-text This attribute controls the text displayed on the button. In the snippet, it says "Add to cart", so that’s what will appear on the button. You can customize this text to whatever you want, like "Buy Now" or "Add to Quote" depending on the action you want users to take.
      data-action This attribute defines the action triggered when the button is clicked. Common action is to add product to shopping or quote cart. The attribute data-action="quote" sets the button to request a quote. Value "checkout" is the default and will add the product to shopping cart. You can set this to actions like "checkout" or "quote" depending on what functionality you need.
      data-padding-x This attribute controls the horizontal padding of the button, affecting its width.  The value "full" makes the button stretch to fill the full width of its container. You can adjust this to give padding in pixels or "full" that will use all space horizontally.
      data-padding-y This attribute sets the vertical padding of the button, influencing its height. The value "9" adds a certain amount of vertical space within the button. Change the number to increase or decrease the padding in pixels as needed (e.g., "5" for smaller padding or "12" for larger padding).
      class="headq-product-card" The class attribute is static and should not be changed. It tells the HeadQ SDK (a toolkit for handling product-related operations) that this div is a buy button component.   Always keep this class name exactly as it is: "headq-product-card".

      Step 2: Adding the Code to Your Website

      To install the button on your website, follow these steps:

      1. Copy the HTML Snippet: Copy the code snippet provided above.

      2. Paste It Into Your Website’s HTML: Find the section of your website where you want the button to appear. This could be within a product page or on a main shopping page. Paste the code snippet into the HTML at that location.

      3. Customize the Attributes: Update the data-item-id, data-text, data-action, data-padding-x, and data-padding-y attributes to match your product’s details and your design preferences.

      4. Save and Publish Your Changes: Once you’ve added and customized the button, save your changes and publish the updated HTML to your website.

      Step 3: Testing the Button

      After installing the button, it’s important to test it to ensure it works correctly:

      1. Open Your Website: Navigate to the page where you installed the button.

      2. Check the Button Appearance: Make sure the button looks the way you want it to, with the correct text and padding. The colors will come from your stores color scheme.

      3. Click the Button: Click the button to ensure it triggers the correct action (e.g., adding an item to the cart or requesting a quote).

      4. Verify the Functionality: Complete the process to verify that the product is correctly added to the cart or that the quote request is successfully submitted.

      And that’s it! You’ve successfully added a “Buy Button” to your website using simple HTML. Following this guide, you can customize the button to suit your website’s needs and provide an easy way for users to purchase your products or request quotes.

      If you encounter any issues or need further customization, consider consulting your website’s support or a web developer for more advanced help. Happy selling!