Shopify

A few different ways of adding, removing & replacing checkout buttons

Shopify Blog

Adding embed code to your Shopify blog

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.

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.

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.

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

5. Click Save.

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.

5. 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 all the content of the file to your clipboard.

5. Return to your new product-template-requires-contact.liquid section, and 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 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.

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

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.

For Debut, the modified code would look like this:

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

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

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.

Assign your new template to a product

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.

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.

Note – You will have to repeat these steps to create new templates for every new Checkout Button that you create in Xion.

Shopify Remove Add to cart(Quick Method!)

Remove your default add to cart button(The Quick Method!)

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

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.

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 Sections directory, open products-template.liquid

4. Find the following code and delete it:

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.

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.

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).

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.

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.