Versions Compared

Old Version 8

changes.mady.by.user Tom Knuth

Saved on

compared with

New Version 9

changes.mady.by.user Tyler Martorano

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Note

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

Note

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

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 snippetname of your Shopify store)

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

  3. Replace the text enter_your_checkout_url_herewith 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. Code Block
     {%
  include '{your-shopify-store-name}-cart.js' with
    cart: cart
 %}

  7. Save the cart.liquid file.

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.

Expand
titleIf 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 {your-shopify-store-name}-cart.js.liquid snippet folder you created where you pasted the code from GitHub.

Scroll down until you see this function:

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

Replace that entire function with the function below:

Code Block
//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.

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