# Shopify

{% tabs %}
{% tab title="Shopify Blog" %}

## **Adding embed code to your Shopify blog** 

***Steps:*** 

1. From your Shopify admin, go to [Online Store > Blog Posts](https://www.shopify.com/admin/articles).
2. From the Blog Posts page, click the title of a blog post you want to edit, or click **Add blog post** to create a new one.
3. In the Write your blog post section, click **Show HTML** in the rich text editor.
4. Paste your embed code(**Checkout Button Code**) into the main text field.
5. Click **Save**. 
   {% endtab %}

{% tab title="Shopify Products" %}

## Adding embed code to your Shopify Products 

***Steps:*** 

1. From your Shopify admin, go to **Products**.
2. From the Products page, click the title of a product you want to edit, or click **Add Product** to create a new one.
3. In the Description section, click **Show HTML** in the rich text editor.

![](/files/-MdLwoFrFZ3CUGvfr1c3)

4\. Paste your embed code(**Checkout Button Code**) into the main text field (Above all the text or below). This is an example:

![](/files/-MdLxSKQunH3ySginiKP)

5\. Click **Save**.
{% endtab %}

{% tab title="Shopify Replace Add to Cart" %}

## How to replace your Add to cart button with your own Xion Checkout Button on your Shopify store

This is to hide your default add to cart button on your Shopify store product and replace it with your Xion Checkout Button. 

### **Create a new product template** 

To replace the **Add to cart** button for a product, you will need to create a custom product template for that product. 

***Steps:*** 

1. From your Shopify admin, go to **Online Store > Themes**. 
2. Find the theme you want to edit, and then click **Actions > Edit code**.
3. In the Templates directory, click **Add a new template**.
4. Create the product template: \
   a. From the drop-down menu, select product. \
   b. Name your template **requires-contact**. \
   c. Click Create template.

![](/files/-MdMN7R36mB0QED8OXn3)

5\. [Find](https://help.shopify.com/manual/productivity-tools/keyboard-shortcuts#find) the following code:

`{% section 'product-template' %}`

Replace it with:

`{% section 'product-template-requires-contact' %}`

This code links your new template with a new product section that you will create in the next steps. 

6\. Click **Save**. 

### Create a new product section 

1. In the Sections directory, click **Add a new section**.
2. Create the section: \
   a. Name your new section **product-template-requires-contact**. \
   b. Click Create section. 
3. Delete all of the default code in the section file, so that the file is empty.
4. In the Sections directory, click **product-template.liquid**. [Copy](https://help.shopify.com/manual/productivity-tools/keyboard-shortcuts#copy) all the content of the file to your clipboard.
5. Return to your new product-template-requires-contact.liquid section, and [paste](https://help.shopify.com/manual/productivity-tools/keyboard-shortcuts#paste) the code into the file.
6. Click Save. 

### Hide the Add to cart button 

1. In your new product-template-requires-contact.liquid section file, [find](https://help.shopify.com/manual/productivity-tools/keyboard-shortcuts#find) the HTML code for the Add to cart button of your product page. You can find it by searching for the word cart in the file. The code for the Add to cart button varies from theme to theme. Look for an **\<input>** or **\<button>**  tag with text like Add to cart, AddToCart, or add-to-cart.&#x20;

For Debut, the Add to cart button code looks like this:

![](/files/-MdMJCtEogjuCnaX525l)

2\. When you find the code, wrap it in Liquid **`{%comment%}`** and **`{%endcomment%}`** tags.This will stop the code from being shown on your store, but will let you easily put it back if you want to change your new template later.&#x20;

For Debut, the modified code would look like this:

![](/files/-MdMJy45UNIKM-8nOPND)

Caution > Make sure that you don't comment out the tags for your product page. You comment tags should not surround any or tags, otherwise customers might experience errors when viewing your product page.

3\. Click **Save**.

### Add your Checkout Button Code&#x20;

Now that you have hidden the Add to cart button, you can add the Checkout Button you want to show instead.&#x20;

1. On a new line below the Liquid **`{% endcomment %}`** tag that you added in the last step, add the **Checkout Button Code**(In **COPY SCRIPT** pop up).
2. Click **Save**.&#x20;

### Assign your new template to a product&#x20;

Now that the template is finished, you can assign it to the product for which you want to replace the Add to cart button with your Checkout Button.&#x20;

1. From your Shopify admin, go to Products.
2. Click the name of a product that you want to hide the Add to cart button on.
3. On the product page of your Shopify admin, under Theme templates, choose your new requirescontact template from the Template suffix drop-down.
4. Click Save.&#x20;

**Note** – You will have to repeat these steps to create new templates for every new Checkout Button that you create in Xion.&#x20;
{% endtab %}

{% tab title="Shopify Remove Add to cart(Quick Method!)" %}

## **Remove your default add to cart button(The Quick Method!)**&#x20;

This is an alternative method so you don’t have to create new templates for every Checkout Button.&#x20;

You can simply delete your default add to cart button for all your products and then paste each Checkout Button Code into each product HTML.&#x20;

***Steps:***&#x20;

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Sections directory, open products-template.liquid
4. [Find](https://help.shopify.com/manual/productivity-tools/keyboard-shortcuts#find) the following code and delete it:

![](/files/-MdMQS3xP4vx05UYUnHJ)

5\. Click **Save**.

**Once deleted**, you can now add your Checkout Button to the correct product in your store.

***Steps:***

1. From your Shopify admin, go to Products.
2. From the Products page, click the title of a product you want to edit, or click Add Product to create a

   new one.
3. In the Description section, click Show HTML in the rich text editor.&#x20;

![](/files/-MdLwoFrFZ3CUGvfr1c3)

4\. **Paste** your embed code(Checkout Button Code) into the main text field.\
a. You can position your Checkout Button above all your text if you paste the Checkout Button Code above all of your text, otherwise you can paste it anywhere else in the main text field for it to appear below.

5\. Click **Save**.

Repeat these last 5 steps to add all your other Main and Follow Up Checkout Buttons to your different products, services, blogs etc.
{% endtab %}
{% endtabs %}

***NOTE*** – If you create Follow Up Checkout Buttons, remember to insert the different Checkout Button Codes correctly. Example: I created a **Main Checkout Button** in Xion Create for the product(soap) that I sell on my Shopify store. After my add to cart button is removed(**Quick Method**) I can now copy my Main Checkout Button Code(**COPY SCRIPT** pop up) and paste it into the main text field of my soap product in my Shopify store(**HTML** in rich text editor).&#x20;

Done, my Checkout Button is working and now I’m going to create a Follow Up Checkout Button for the product(shampoo). I will now paste my Follow Up Checkout Button Code into the main text field of my shampoo product on my Shopify store.&#x20;

This way after my customers have added their soap to cart, they can either “**Proceed to Checkout**” immediately or click “**Continue Shopping**” in their cart to take them to the shampoo product to also add to cart or subscribe(single billing or recurring billing). You can add a **maximum of 9 Follow Up Checkout Buttons**, but you can create as many Main Checkout Buttons as you would like.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xionwiki.gitbook.io/xion-global/create-checkout-buttons/shopify.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.