Remove underline on collapsible row

Topic summary

A Shopify store owner seeks to remove underlines appearing on collapsible row elements and search bar text.

Initial Issue:

  • Underlines visible on collapsible rows in the store’s theme
  • Store using the “Trade” theme

Solutions Provided:

Two support teams offered CSS-based fixes:

  1. For collapsible rows: Add custom CSS targeting .collapsible-content summary.accordion__title:hover with text-decoration: none !important; to either the theme.liquid file (above </head> tag) or base.css/theme.css files

  2. For search bar text: Additional CSS code provided targeting .predictive-search__list-item:hover .predictive-search__item-heading to remove underlines on hover

Implementation Notes:

  • User reported not finding the </head> tag initially
  • Solutions involve adding code snippets to theme files via Shopify Admin → Online Store → Themes → Edit code

Status: A community member noted they couldn’t see underlined items on the website, suggesting the issue may have been resolved.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.

hi i want to remove the underline on the collapsible rows please see attached.

URL: golazocasesuk.myshopify.com

theme: trade

2 Likes

Hi @golazocases ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:


Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

  • Here is the solution for you @golazocases
  • Please follow these steps:

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
.collapsible-content summary:hover .accordion__title {
    text-decoration: none !important; 
}
  • Here is the result you will achieve:

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like

there is no tag on mine

How can I remove the underline for all the text within the search bar? see attached

1 Like

Can you add more this code @golazocases

.predictive-search__list-item:hover .predictive-search__item-heading {
 text-decoration: none !important;
}

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you @golazocases .

I could not see any underlined collapsible item on your website, hope you have solved the problem. :slightly_smiling_face: