Drawer Cart

This article explains how to configure your Shopify drawer cart to redirect to a Checkout Champ checkout.

Only follow this article if your checkout and upsell flow is finished inside of Checkout Champ and you are ready to start sending the Shopify customers to your Checkout Champ checkout page

This will not work with a standard cart. Follow instructions here to redirect a standard cart.

The checkout redirect does not work on every Shopify theme. Please contact our customer support if you need assistance with a particular theme.

To redirect the Shopify cart to the Checkout Champ checkout page, it is required to manually set the routing on your Shopify cart page.

If you are unfamiliar with accessing your Shopify Liquid Code please follow the instructional video below

Nutra Products Direct ~ Home ~ Shopify - Google Chrome 2021-01-28 08-42-19.mp4

1. Scroll down to the snippets/ folder and add a "{name}-cart.js.liquid" snippet (replace {name} with some unique name for the snippet)

2. Go here. Copy all of the code and paste into the {name}-cart.js.liquid snippet.

3. Replace the text you.must.define.a.checkout.url with the Live URL of your Checkout Champ checkout page. See below for instructions on how to find your checkout page’s Live URL.

4. Save the snippet.

5. Go to the cart.liquid file and paste this text at the top of the file. The value inside the apostrophes should be the snippet name, without “.liquid”.

6.  {%
     include '{name}-cart.js' with
       cart: cart
    %}

7. Save the cart.liquid file.

8. Navigate to Templates and click “Add a new template”

9. In the “Add a new template” screen input the following: Template=cart, Template Type=liquid, File name=cart.( meta-data.json).liquid.

10. Edit the file and remove everything in it. Replace it with the following

11. {%- layout none -%}
    {
      "meta_product_id_array": [
        {% for item in cart.items %}
          {% if item.variant.metafields.productId.productId %}
            {
              "id": "{{ item.variant.metafields.productId.productId }}",
              "quantity": {{ item.quantity }}
            }
            {% unless forloop.last %},{% endunless %}
          {% endif %}
        {% endfor %}
      ]
    }

Accessing Your Checkout URL for Step 3:

Select the Settings option on your Checkout Champ checkout page:

This will open the page configuration panel on the right side of the builder.

Define the Published Page Name (slug) for your checkout page. Tab off the field to save.

At the bottom, mark this checkout page as the Default Page.

Then close the panel and Publish the funnel.

Select the page Settings once more:

Copy the entire Live URL and paste into your {name}-cart.js.liquid snippet in Step 3.

---

If you would like to only redirect 1/2 of your customers to CheckoutChamp, Click Here

Follow all of the steps above. Next, go to the {name}-cart.js.liquid snippet folder you created where you pasted the code from GitHub.

Scroll down until you see this function:

function inject() {
        debug('Inject');
        self.$checkoutButton.on('click', checkout);
      }

Replace that entire function with the function below:

//This is a custom function that only redirects 50% of the time.
    function inject() {
      {%- assign min = 1 -%}
      {%- assign max = 100 -%}
      {%- assign diff = max | minus: min -%}
      {%- assign random_number = "now" | date: "%N" | modulo: diff | plus: min -%}
      var random_number = {{random_number}};
      console.log(random_number,'isInject');
      if(random_number < 50)
      {
        debug('Inject');
        self.$checkoutButton.on('click', checkout);
      }

    }

With this function the customer will be assigned a random number between 1-100 when the load on the page. If the number is less than 50 then the code will inject itself and customer will be redirected from the Shopify Cart over to CheckoutChamp.

After 100 sales or so you should see an average of 50 CheckoutChamp orders and 50 Shopify orders.

---

If you need to disable the redirect for any reason, comment out the text added to the cart.liquid file.

{%- comment %}
{%
  include '{name}-cart.js' with
    cart: cart
 %}
{% endcomment -%}