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
Topic summary
A Shopify store owner using the Boost theme wants to convert underlined text links in collection lists into styled buttons.
Initial Solution:
- PageFly support provided CSS code to be added to theme.liquid above the
</head>tag - The code successfully converted links to buttons but introduced new issues
Problems After Implementation:
- Buttons are being cut off (top or bottom portions not fully visible)
- Only collection list items should be buttons, not all product links throughout the site
- Some button text is wrapping, which the user wants to prevent
Current Status:
- PageFly support offered updated code targeting only collection index pages using conditional logic (
{% if template contains 'collection' %}) - The discussion appears ongoing as the refined solution is being tested
Screenshots were shared showing both the desired button styling and the unwanted text wrapping/cutoff issues.
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the 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
Hope this can help you solve the issue
Best regards,
Noah | PageFly
Hey @PageFly-Noah thank you for your help! That worked but there are three things that are now issues:
- The buttons are getting cut off, sometimes on the bottom, sometimes on the top.
- 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.
- 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' %}
{% endif %}
