> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.tevello.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How To Add A Buy Button Inside A Lesson

${youtube}[How To Add A Buy Button Inside A Lesson](DIsXMkLD_Xk)

### Overview:
To guide users on integrating a buy button within their course lessons in Shopify, facilitating direct purchases from the lesson interface.

### Table Of Content:
1. [Install and Configure Buy Button](#-1-install-and-configure-buy-button)
2. [Adding the Buy Button in Tevello](#1-adding-the-buy-button-in-tevello)

# Install and Configure Buy Button

1. **Access Buy Button Channel** 
| If you haven’t installed the Buy Button app yet, click here to donwload [Buy Button Channel](https://apps.shopify.com/buy-button) app.
2. If already installed, go to **Sales Channels** and select **Buy Button** in your Shopify admin.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/01-but-button_1ffj2bb.png)

3. Click on **Create a Buy Button**

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/02-create-a-buy_fki7r1.png)

4. Choose whether to create a button for a single product or a collection. For this SOP, select **Product**.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/03-product-buy_1v7jg03.png)

5.Browse and select the product you want to link with the buy button, then click **Select**.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/04-select-product_13ylltq.png)

| Customize the button's appearance, including layout (basic, classic, full view), action after click (e.g., add to cart, checkout), color, style, button text, and image size.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/05-cuztomize_1dsn58k.png)

6. After customizing, click **Next**

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/06-next_13cwibp.png)

7. Then **Copy Code** to copy the HTML code for the buy button.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/07-copy-code_1vyfsbd.png)

# Adding the Buy Button in Tevello

1. Navigate back to **Tevello** and then click **Courses**.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/08-tevello-courses_1a7gcoh.png)

2. Go to the specific course where you want to add the buy button.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/09-select-course_10wi3vl.png)

3. Select the **Lesson**  where you want to add the Buy Button

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/10-lesson_1ri5q4m.png)

4. Click on **Add**, select ** Add HTML**

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/11-add-html_1l6uow7.png)

5. Paste the copied code into the HTML field then **Save** the changes to implement the buy button in the lesson.

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/12-paste-code_7elsls.png)

6. **Preview and Test.** Preview the lesson to ensure the buy button appears correctly and functions as intended.
| Go to timestamp 1:43 to see How to preview the buy button

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/13-preview_1gepjfr.png)

![](https://storage.crisp.chat/users/helpdesk/website/e916a79d3dced000/14-sample_boivu9.png)