If you're experiencing an issue regarding the carousel arrows missing in UpCart's upsell module, this is generally being caused by a store theme compatibility issue.
In order to fix this issue, you can apply a customization to manually add the arrows using custom HTML in UpCart's editor settings!
Accessing Custom CSS and HTML Settings
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled "Custom HTML" and below that is "Custom CSS".
HTML
Make sure to select an HTML location to target the changes you would like to see in UpCart. In our case, we would want to change the setting to the "Scripts (before load)" section.
<script>
window.upcartOnCartOpened = () => {
setTimeout(() => {
const buttonLeft = document.querySelector('.control-arrow.control-prev');
buttonLeft.innerText = "<";
const buttonRight = document.querySelector('.control-arrow.control-next');
buttonRight.innerText = ">";
}, 300);
}
</script>
This is how your custom HTML settings should look like in UpCart:
CSS
If you're experiencing additional issues with the carousel arrow positions, you can also try applying the CSS as seen below:
.carousel.carousel-slider .control-next {
right: -34px !important;
}
Explanation
We often use CSS pseudo-elements (::before) that are contained inside the buttons to display the carousel arrows. However, some store themes choose to block the rendering of pseudo-elements, which causes the carousel arrows to disappear from the cart drawer.
This creates an issue where the upsell carousel arrows appear correctly in the editor preview but not on the actual live storefront.
Need Help?
As always, we are here to help. If you need further clarification or assistance with other features in UpCart, please do not hesitate to contact us.