Slide Checkout

Add a slide out window for your checkout on your Webflow, Wordpress, or HTML website.

Step 1 Step 2 Step 3 Step 4 Additional Guidance

Plugins Required: Elementor & Header Footer Code Manager

This tutorial uses two FREE plugins. If you are using different plugins please refer to their documentation on how to complete the following steps.

Video Tutorial

Documentation

Step #1

Implement the Javascript.

From your Wordpress dashboard, navigate to the HFCM dropdown and select Add New.

Fill out all required fields and make sure your selections match what is below.

Copy and paste the script into the Snippet/Code section and then select "Save".

<script>

document.querySelector('.w-btn').addEventListener('click', function() {
    document.body.classList.add('ov-h');
    document.querySelector('.body-blur').style.display = 'block';
    document.querySelector('.cart-section').classList.add('showCart');
});

document.querySelector('.close-cart').addEventListener('click', function() {
    document.body.classList.remove('ov-h');
    document.querySelector('.body-blur').style.display = 'none';
    document.querySelector('.cart-section').classList.remove('showCart');
});

document.querySelector('.body-blur').addEventListener('click', function() {
    document.body.classList.remove('ov-h');
    document.querySelector('.body-blur').style.display = 'none';
    document.querySelector('.cart-section').classList.remove('showCart');
});


 </script>

Copy

Step #2

Implement the CSS.

Add a New Snippet for the CSS and make sure your selections match what is below.

Copy and paste the CSS into the Snippet/Code section and then select "Save".

<style> 
body { position: relative; }

.cart-section {
    position: fixed;
    z-index: 1001;
    right: 0;
    top: 0;
    height: 100%;
    transform: translate(100%);
    transition: all .3s;
}

.cart-holder {
    width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.showCart {
    transform: translate(0);
}

.close-cart {
    text-align: right;
    background-color: #efefef;
    border: 0px;
}

.close-cart svg {
    margin-top: 5px;
}

.body-blur {
    position: fixed;
    display: none;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.embed-iframe-course {
    height: 100%;
    overflow: auto;
}

.ov-h { overflow: hidden; }

@media screen and (max-width: 700px) {
    .cart-holder { width: 400px; }
}

@media screen and (max-width: 400px) {
    .cart-holder { width: 275px; }
}

@media screen and (max-height: 650px) {
    .cart-section { overflow: auto; }
}

@media (max-width: 400px) {
    .cart-holder { width: 100%; }
}
 </style>

Copy

Step #3

Implement the button class.

Add a button element, open the Advanced tab and enter the CSS class name in the CSS Classes field.

CSS Classes

w-btn

Copy

Step #4

Add HTML element for slide out HTML.

First, add a HTML element at the top of your page and paste in the HTML code.

<div class="body-blur"></div>

<div class="cart-section">
 <div class="cart-holder">
  <button class="close-cart">
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_90_3498)">
     <path d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm-5.293 15.293a1 1 0 0 1-1.415 1.415L16 17.413l-3.293 3.293a1 1 0 0 1-1.415-1.415L14.587 16l-3.293-3.293a1 1 0 1 1 1.415-1.415L16 14.587l3.293-3.293a1 1 0 0 1 1.415 1.415L17.413 16l3.293 3.293Z" fill="#000"/>
    </g>
    <defs>
     <clipPath id="clip0_90_3498">
      <rect width="32" height="32" fill="white"/>
     </clipPath>
    </defs>
   </svg>
  </button>
  <div class="embed-iframe-course" style="background-color: #fff; border-radius: 6px; padding: 0.7em 1em; border-radius: 20px;">
   <!-- YOUR EMBED CODE HERE -->
  </div>
 </div>      
</div>

Copy

Next, retrieve your Embed Code from your SamCart account by going to Product Edit and then the Checkout Anywhere tab.

Select "Embed" from the Display Options and select the "Copy Embed Code" button.

Now paste your SamCart Embed code in place of this line of code in your Wordpress HTML element:

<!--YOUR EMBED CODE HERE-->

This is an example of what the final HTML code should look like:

<div class="body-blur"></div>

<div class="cart-section">
 <div class="cart-holder">
  <button class="close-cart">
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_90_3498)">
     <path d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm-5.293 15.293a1 1 0 0 1-1.415 1.415L16 17.413l-3.293 3.293a1 1 0 0 1-1.415-1.415L14.587 16l-3.293-3.293a1 1 0 1 1 1.415-1.415L16 14.587l3.293-3.293a1 1 0 0 1 1.415 1.415L17.413 16l3.293 3.293Z" fill="#000"/>
    </g>
    <defs>
     <clipPath id="clip0_90_3498">
      <rect width="32" height="32" fill="white"/>
     </clipPath>
    </defs>
   </svg>
  </button>
  <div class="embed-iframe-course" style="background-color: #fff; border-radius: 6px; padding: 0.7em 1em; border-radius: 20px;">
   <script defer="defer" src="https://checkout.mysamcart.com/checkout/web-component.js"></script>
   <sc-checkout product="samcart-grow-yearly-8-2023" subdomain="checkout" coupon="">
  </div>
 </div>      
</div>

Need more than one button instance to open up the Slide Checkout?

The button class "w-btn" will only work with one button instance, but if you have multiple buttons on your page we have a solution for that!

To have a second, third, or fourth button open your Slide Checkout, first just add "-x" at the end of the class name ("x" should be a unique number).

The second part of this is that you will also need to adjust the script to add in additional button triggers. Copy everything from "document" to "});" and just change the selector "w-btn" to the new class you've created. Make sure to do this for each new class you've created. Also, only create as many script additions as you need because any extras will break the script.

Class name

CSS Classes

w-btn-2

CSS Classes

w-btn-3

Script addition


document.querySelector('.w-btn-2').addEventListener('click', function() {
    document.body.classList.add('ov-h');
    document.querySelector('.body-blur').style.display = 'block';
    document.querySelector('.cart-section').classList.add('showCart');
});


document.querySelector('.w-btn-3').addEventListener('click', function() {
    document.body.classList.add('ov-h');
    document.querySelector('.body-blur').style.display = 'block';
    document.querySelector('.cart-section').classList.add('showCart');
});

Video Tutorial

Step 1 Step 2 Step 3 Additional Guidance

Video Tutorial

Documentation

Step #1

Implement the two code blocks in the appropriate places in your Webflow Page settings.

Copy the <style> and paste into the <head> of your page.

<style> 
body { position: relative; }

.cart-section {
    position: fixed;
    z-index: 1001;
    right: 0;
    top: 0;
    height: 100%;
    transform: translate(100%);
    transition: all .3s;
}

.cart-holder {
    width: 600px;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}

.showCart {
    transform: translate(0);
}

.close-cart {
    text-align: right;
}

.close-cart svg {
    margin-top: 5px;
}

.body-blur {
    position: absolute;
    display: none;
    background: rgba(0, 0, 0, 0.20);
    backdrop-filter: blur(4px);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}

.embed-iframe-course {
    height: 100%;
    overflow: auto;
}

.ov-h { overflow: hidden; }

@media screen and (max-width: 700px) {
    .cart-holder { width: 400px; }
}

@media screen and (max-width: 400px) {
    .cart-holder { width: 275px; }
}

@media screen and (max-height: 650px) {
    .cart-section { overflow: auto; }
}

@media (max-width: 400px) {
    .cart-holder { width: 100%; }
}
 </style>

Copy

Copy the <script> and paste it before the </body> of your page.

<script>

document.querySelector('._w-btn').addEventListener('click', function() {
    document.body.classList.add('ov-h');
    document.querySelector('.body-blur').style.display = 'block';
    document.querySelector('.cart-section').classList.add('showCart');
});

document.querySelector('.close-cart').addEventListener('click', function() {
    document.body.classList.remove('ov-h');
    document.querySelector('.body-blur').style.display = 'none';
    document.querySelector('.cart-section').classList.remove('showCart');
});

document.querySelector('.body-blur').addEventListener('click', function() {
    document.body.classList.remove('ov-h');
    document.querySelector('.body-blur').style.display = 'none';
    document.querySelector('.cart-section').classList.remove('showCart');
});


 </script>

Copy

Step #2

Add a button element and implement the button class.

Add a button on your page that will trigger the slide. Give it the class name below in Webflow's Style selector.

Note that the class will only work with one button instance. If you need more than one button to open up the Slide Checkout, scroll down for guidance.

Style selector

w-btn

Copy

Step #3

Add an embed element for the slide HTML.

First, add an Embed element and put it at the bottom of your page. Open up the HTML element and paste in the code below.

<div class="body-blur"></div>

<div class="cart-section">
 <div class="cart-holder">
  <button class="close-cart">
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_90_3498)">
     <path d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm-5.293 15.293a1 1 0 0 1-1.415 1.415L16 17.413l-3.293 3.293a1 1 0 0 1-1.415-1.415L14.587 16l-3.293-3.293a1 1 0 1 1 1.415-1.415L16 14.587l3.293-3.293a1 1 0 0 1 1.415 1.415L17.413 16l3.293 3.293Z" fill="#000"/>
    </g>
    <defs>
     <clipPath id="clip0_90_3498">
      <rect width="32" height="32" fill="white"/>
     </clipPath>
    </defs>
   </svg>
  </button>
  <div class="embed-iframe-course" style="background-color: #fff; border-radius: 6px; padding: 0.7em 1em; border-radius: 20px;">
   <!-- YOUR EMBED CODE HERE -->
  </div>
 </div>      
</div>

Copy

Next, retrieve your Embed Code from your SamCart account by going to Product Edit and then the Checkout Anywhere tab.

Select "Embed" from the Display Options and select the "Copy Embed Code" button.

Now paste your SamCart Embed code below this line of code in your Webflow HTML element:

<!--PASTE YOUR EMBED CODE BELOW-->

This is an example of what the final HTML code should look like:

<div class="body-blur"></div>

<div class="cart-section">
 <div class="cart-holder">
  <button class="close-cart">
   <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_90_3498)">
     <path d="M26 4H6a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm-5.293 15.293a1 1 0 0 1-1.415 1.415L16 17.413l-3.293 3.293a1 1 0 0 1-1.415-1.415L14.587 16l-3.293-3.293a1 1 0 1 1 1.415-1.415L16 14.587l3.293-3.293a1 1 0 0 1 1.415 1.415L17.413 16l3.293 3.293Z" fill="#000"/>
    </g>
    <defs>
     <clipPath id="clip0_90_3498">
      <rect width="32" height="32" fill="white"/>
     </clipPath>
    </defs>
   </svg>
  </button>
  <div class="embed-iframe-course" style="background-color: #fff; border-radius: 6px; padding: 0.7em 1em; border-radius: 20px;">
   <script defer="defer" src="https://checkout.mysamcart.com/checkout/web-component.js"></script>
   <sc-checkout product="samcart-grow-yearly-8-2023" subdomain="checkout" coupon="">
  </div>
 </div>      
</div>

Need more than one button instance to open up the Slide Checkout?

The button class "w-btn" will only work with one button instance, but if you have multiple buttons on your page we have a solution for that!

To have a second, third, or fourth button open your Slide Checkout, first just add "-x" at the end of the class name ("x" should be a unique number).

The second part of this is that you will also need to go back and adjust the script to add in additional button triggers. Copy everything from "document" to "});" and just change the selector "w-btn" to the new class you've created. Make sure to do this for each new class you've created. Also, only create as many script additions as you need because any extras will break the script.

Class name

Style selector

w-btn-2

Style selector

w-btn-3

Script addition


document.querySelector('._w-btn-2').addEventListener('click', function() {
    document.body.classList.add('ov-h');
    document.querySelector('.body-blur').style.display = 'block';
    document.querySelector('.cart-section').classList.add('showCart');
});


document.querySelector('._w-btn-3').addEventListener('click', function() {
    document.body.classList.add('ov-h');
    document.querySelector('.body-blur').style.display = 'block';
    document.querySelector('.cart-section').classList.add('showCart');
});