Shopify themes, liquid, logos, and UX
Thanks in advance!
I am looking to change the text from “your cart is empty” text to something different, how do I go about doing so? I tried changing it in the “default theme content” but nothing changed. Also, is there a way to increase/decrease text size? Example shown below.
How my site looks:
How I would like my site to look:
password: dc
Solved! Go to the solution
This is an accepted solution.
Hello!
The following code will modify the font size. What would you like to replace "Your cart is empty" with?
Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below code.
h2.cart__empty-text {
font-size: 15px;
}
This is an accepted solution.
The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code above the '</head>' tag. Please refer to the attached screenshot for guidance.
<script>
document.addEventListener("DOMContentLoaded", function() {
var emptyCartText = document.querySelector(".cart__empty-text");
if (emptyCartText.textContent.trim() === "Your cart is empty") {
emptyCartText.textContent = "Your cart is currently empty.";
}
});
</script>
This is an accepted solution.
Hello!
The following code will modify the font size. What would you like to replace "Your cart is empty" with?
Navigate to the 'Edit Code' option in your theme settings, then search for “base.css” in the search bar and add below code.
h2.cart__empty-text {
font-size: 15px;
}
I would like the new text to say "Your cart is currently empty."
This is an accepted solution.
The following code will do what you want. You can change the values as you like. If you encounter any issues again, feel free to write.
1) Navigate to the 'Edit Code' option in your theme settings, then search for 'theme.liquid' in the search bar.
2) Paste the following code above the '</head>' tag. Please refer to the attached screenshot for guidance.
<script>
document.addEventListener("DOMContentLoaded", function() {
var emptyCartText = document.querySelector(".cart__empty-text");
if (emptyCartText.textContent.trim() === "Your cart is empty") {
emptyCartText.textContent = "Your cart is currently empty.";
}
});
</script>
Thank you thank you!
You're most welcome 😉
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025