Boost Theme: Wanting to Change Collection List Links to Buttons

Boost Theme: Wanting to Change Collection List Links to Buttons

SugMonsterKids
New Member
9 0 0

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

Screenshot 2023-10-17 at 8.39.32 PM.png

Replies 3 (3)

PageFly-Noah
Shopify Partner
1317 233 280

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>

 

PageFlyNoah_0-1697594382706.png

 

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.

SugMonsterKids
New Member
9 0 0

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.

 

Screenshot 2023-10-18 at 6.39.47 AM.png

 

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.

 

Screenshot 2023-10-18 at 6.41.10 AM.png

3) For the buttons that I'd like to keep, some are text wrapping. How could I stop that?

PageFly-Noah
Shopify Partner
1317 233 280

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

PageFlyNoah_0-1697763031462.png

 

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.