A user wants to change the “Add to Cart” button text to “Learn More” on a custom collection template called “service-collection” for service-based products, while keeping the standard button for physical products elsewhere on the site.
Initial Solution Proposed:
Another user suggested CSS-only code targeting .product-form__submit to hide the original text and replace it with “Learn More” using the ::before pseudo-element.
Current Issue:
The proposed CSS doesn’t work because the button class is actually .quick-add__submit (not .product-form__submit), as revealed through browser inspector. The user shared the HTML structure showing the button uses classes like quick-add__submit button button--full-width button--secondary.
Status:
The discussion remains open with the user awaiting a revised CSS solution that targets the correct button class for their specific collection template.
Summarized with AI on October 31.
AI used: claude-sonnet-4-5-20250929.
I’ve created a new template called “service-collection” for showcasing my services as products on my Shopify site. Instead of the standard “Add to Cart” button, I would like it to say “Learn More,” since clicking the button directs customers to the product page to read more about the service.
I am looking to implement this change using Custom CSS in the theme editor. Could someone assist me with the code?
I do not wish to alter the Liquid code or modify the entire site, as I still need the “Add to Cart” button for physical products.
Hi @nancy5 , you can do this using CSS only by targeting the button on your specific template. Try adding this to your theme’s Custom CSS section in the theme editor:
.template-service-collection .product-form__submit {
background-color: #000; /* Change button color if needed /
color: #fff; / Text color /
pointer-events: none; / Prevents adding to cart */
}
.template-service-collection .product-form__submit span {
display: none; /* Hides the original text */
}
This will only affect buttons when viewing products under your service-collection template, keeping other products unchanged. Let me know if you need tweaks!
The code doesn’t work and I think it may be because it doesn’t call “.product-form__submit” on my site. I get the message "does not appear to be used in this section.
I checked my inspector to see if I can locate, what it is like .product-form, but that is not an option when I write it on the the Custom CSS section.
See below, this is what I see in my inspector when I click on the “add to cart” button. From there, you may be able to see something?