Shopify themes, liquid, logos, and UX
Trying to figure out a way to change the links in collection lists to be formatted as a linked button instead of just underlined text. See screenshot. Any help would be appreciated!
Website: sugarmonsterkids.com
Theme: Boost
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
.product-block__title a {
text-decoration: unset;
background-color: #f57d51;
padding: 12px 20px;
color: #fff;
border-radius: 50px;
}
</style>
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
Hey @PageFly-Noah thank you for your help! That worked but there are three things that are now issues:
1) The buttons are getting cut off, sometimes on the bottom, sometimes on the top.
2) I'd only like there to be buttons for the collection list items, not all the product links. Is there any easy way to do that? Screenshot below shows what I don't want.
3) For the buttons that I'd like to keep, some are text wrapping. How could I stop that?
Please help me to replace the code above with this one
{% if template contains 'index' %}
<style>
.product-block__title a {
text-decoration: unset;
background-color: #f57d51;
padding: 12px 20px;
color: #fff;
border-radius: 50px;
}
.product-block__title {
margin-top: 1em;
}
</style>
{% endif %}
Please let me know if it works by giving it a Like or marking it as a solution!
PageFly - #1 Page Builder for Shopify merchants.
All features are available from Free plan. Live Chat Support is available 24/7.
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