Hi there,
I just downloaded a plugin, where I would like to stylise the product button “Book Your Day” I cannot seem to find the css class to target! I would like to change the background colour to blue, change the button radius to 15px and change the text to uppercase and slightly smaller. Any help would be much appreciated. Thanks so much. See screenshot for the button I am referring to.
URL: thesetcollective
PASSWORD: theset2025
@ellacoker please add this css to the very end of your base.css file and check
shopify admin->online store->themes->edit theme code->assets->base.css
.product-form input.izyDate, .product-form input.izyDate:focus, .product-form input.izyDate:active {background-color: blue !important; color: #fff !important;}
Hi,
Thanks for that but I was also hoping to make the text smaller, and a different font. Is this possible?
Hi @ellacoker
In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:
.izyDate::placeholder {
font-size: 14px;
font-family: "New York", "Georgia", serif !important;
}
@ellacoker
Since the button is generated by a plugin, inspect it to find its selector.
-
Right-click the “Book Your Day” button → Inspect.
-
Look for a unique class (example: .book-your-day, .booking-btn, etc.).
-
Apply CSS like this in your theme CSS file.
Example:
button:contains("Book Your Day") {
background-color: blue;
border-radius: 15px;
text-transform: uppercase;
font-size: 14px;
}
If that doesn’t work in Shopify, use a broader selector:
.product button {
background-color: blue;
border-radius: 15px;
text-transform: uppercase;
font-size: 14px;
}
Best solution: inspect the button and target its specific class or ID.
Hi, thanks for all of your help. It seems that this works for desktop, but for some reason, doesn’t work on mobile, there must be a different class? Let me know what you think. Thank you.
@ellacoker by mistake you have put it into the media query, remove it from media query and add to the end of the file and it will work