Running 3.0.0.0. Site is immunocologie.com. How do I get the item title text to not be in all caps in my cart drawer and how can I add the “Shop/Pay” button to the cart drawer page, in addition to the checkout button?
I checked your site immunocologie.com. These are great tweaks to improve the User Interface.
Pro Tip: Before making any code changes, it is always best practice to Duplicate your Theme (Online Store > Themes > Actions > Duplicate). This gives you a safe backup just in case something goes wrong.
Here is the step-by-step solution for both requests:
1. Stop All-Caps Titles in Cart: This is controlled by a CSS style rule (text-transform: uppercase). You can override it easily without digging into complex files.
-
Go to Online Store > Themes > Customize.
-
Click on Theme Settings (gear icon) > Custom CSS.
-
Paste this code:
/* Remove Uppercase from Cart Drawer Items */
.cart-drawer .cart-item__name,
.cart-item__details .cart-item__name,
.cart-drawer .product-name {
text-transform: none !important;
letter-spacing: normal !important;
}
2. Add “Shop Pay” Button to Drawer: This feature is called “Dynamic Checkout Buttons”. Before editing code, check if your theme has this built-in:
-
In the Theme Editor, go to the Cart Drawer settings (or “Cart” in Theme Settings).
-
Look for a checkbox labeled “Show dynamic checkout buttons”. Checking this is the safest method.
If the setting is missing, you will need to edit the code:
-
Go to Actions > Edit Code.
-
Open the file
cart-drawer.liquid(it might be namedcart-notification.liquidorcart.liquiddepending on the theme version). -
Find the Checkout button (usually
<button name="checkout">). -
Paste this snippet right above or below that button:
{% if additional_checkout_buttons %}
<div class="additional-checkout-buttons">
{{ content_for_additional_checkout_buttons }}
</div>
{% endif %}
This will force the “Shop Pay / PayPal / GPay” buttons to appear inside the drawer.
Hope this helps!
Where specifically do this go? This insturction is pretty vague; I added it to the Custom CSS option that I see on my Home Page, but it did not change anything.
For the 2nd question, there is “enable additional checkout buttons” on my cart drawer page. I did enable this. However, when I do so, I have 3 blank buttons that are beneath “Check Out”. These buttons are populated and function if I go to the checkout page. There is a lag time of a few seconds on the checkout page for these buttons to load, but they eventually do.
They never load on the cart drawer page.
I’m also seeing now that on my item page, when I hover over the “add to cart” button, the text color goes to the same shade as the color of the button, making it invisible. How can this be fixed?
@mountaintopvirtual card drawer section code needs to be edited, are you familiar with the coding? if no then I can do it for you
The item title is all-caps in your product definition, so you can’t really change this with CSS. It’d be better to modify it in back-end.
Your accelerated checkout buttons do not load because of the Javascript error.
Looks like some Page Speed “Improvement” trick failure, probably Gem(?).
Thank you. The editing of the product titles was in caps, so I changed that and now they’re not.
What would I do to correct the checkout buttons not loading on the cart drawer?
Eh, it’s not great, which is why I’m posting here for things are probably fairly straight forward for a developer. I’d like to have the issues corrected, yes.
Did you hire anyone to do “speed optimization” or selected any app/function to do that?
You have some important javascript codes disabled and to be loaded after page is rendered, but this latter never happens.
Would need some investigation as to why and how this happened, not something I’d be able to do from outside.
@mountaintopvirtual good morning, do let me know if you decide to add buttons via coding
Someone did do an audit a few months ago, but I don’t believe any action was taken on the site. I did install the Booster Page Speed Optimizer apps within the last couple weeks. I don’t know what(if any) action this app does to the site.
There is a limit to what can be seen from the outside.
This is what I see:
<script crossorigin="anonymous" defer="defer" data-src="//immunocologie.com/cdn/shopifycloud/storefront/assets/shopify_pay/storefront-65b4c6d7.js?v=20250812"></script>
<script data-source-attribution="shopify.dynamic_checkout.dynamic.init">var Shopify=Shopify||{};Shopify.PaymentButton= . . .
Basically, these two lines suppoesd to load Payment buttons javascript file from the system and then initialize it.
The problem is that the first line has data-src attribute instead of src so it does not load the file.
Because of this, the second line generates error in browser console.
And there is a bunch of lines with data-src in your pages.
I deduce that some app/code replaces src with data-src with the intention to change it back later when page is loaded to actually load this functionality. Page load should be improved because of this.
There is an assets/gem.js from the “Sboost App”(?) which is supposed to do the reversal, but it does not work for the payment button because of the error.
Try contacting the app developers, or remove it…
Or maybe there are some controls as to which javascript files load to delay …
I just uninstalled the Booster speed app.The gem.js code didn’t go away, so I commented it out. I don’t know where it’s from. Don’t have an idea on how to correct this