Overview
The Custom HTML editor allows you to write HTML code to be inserted into your cart drawer.
It is found in Upcart > Cart Editor > Settings
You can also write JavaScript in this section by placing it in between script tags.
If you plan on using JavaScript, we recommend taking a look at Upcart's Public API, which contains a list of variables and functions that can be used to interact with the cart. We use one of these (the upcartOnCartLoaded function) as an example below.
The dropdown in this section of Upcart's settings will allow you to select what location you want to insert this HTML code in. Read more about it below!
HTML Locations
The "Select HTML Location" dropdown will allow you to specify which location your HTML code will appear in.
For example, you might want to add a piece of text above your Checkout button that explains your return policy. You'd want to write the code for that in the "Above Checkout Button" location:
The next step usually involves writing Custom CSS to adjust the styling of the content you just created. You can read more about Custom CSS here.
Even if you have neither of these modules enabled, the location will stay the same.
We'll now go over all possible locations below with the following HTML code:
<div class="exampleElement"> Your Code Here </div>
CSS used in the example
CSS used in the example
.exampleElement {
padding: 1rem;
border: 2px dashed #42947a;
background-color: #ecf6f3;
font-size: 1.5rem;
font-weight: bold;
color: #42947a;
text-align: center;
border-radius: 6px;
margin: 1rem 0;
}
Above announcements/rewards
This location will place your code above the Announcement and Rewards modules. This would be at the top of the cart and beneath the cart's header.
Below header/announcements/rewards
This location will place your code below the Announcement and Rewards modules.
Between each line item
This location adds your HTML to the bottom of each item within the cart.
In the image below you can see that I have 3 items in my cart, and the HTML is being rendered underneath all 3 items.
Above footer/add-ons
This location adds your HTML right above the footer of the cart drawer, underneath where the upsells module would place itself, and above where the add-ons module would place itself.
Above checkout button
This location adds your HTML inside the footer of the cart drawer, above the checkout button and the Subtotal section if it is enabled.
Below checkout button
This location adds your HTML inside the footer of the cart drawer, beneath the checkout button.
Bottom of cart
This location adds your HTML at the very bottom of the cart, outside of the footer.
Because it's outside of the footer, any content added will have the main cart background color, not the accent color.
You can always add Custom CSS later to change the background color of your HTML though!
On empty cart screen
This location places your HTML right next to the Empty Cart text, as seen below.
However, you can make it so that it goes below the Empty Cart text by inserting this CSS into the Custom CSS section.
[class*="styles_CartPreview__empty__"]
{
flex-direction: column;
}
[class*="styles_CartPreview__empty__"] h3 {
margin: unset;
}
Here's where it would place itself after inserting that CSS code.
Scripts (Before Load)
This location doesn't have a physical presence on the cart at all, as it's mainly designed for scripting.
Everything you place inside this section will happen before the cart loads, making it perfect to setup some JavaScript by using script tags!
