Boost Theme: Wanting to Change Collection List Links to Buttons

[SugMonsterKids]

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

 

[PageFly-Noah]

Hi @SugMonsterKids 

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

[SugMonsterKids]

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?

 

[PageFly-Noah]

Hi @SugMonsterKids 

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 %}