Remove underline + add bold text on hover product share button

Topic summary

A user seeks CSS customization for their Shopify store to modify button styling across product and collection pages. The specific requests include:

Primary Goal:

  • Remove underline and add bold text on hover for the product share button

Extended Requirements:

  • Standardize all buttons (Add to Cart, Buy It Now, Choose Options) across collection and product pages
  • Default state: Solid black background with white text
  • Hover state: Hollow/outlined with 1px border and bold text

Current Status:
Multiple support representatives (BSSCommerce-B2B, BSSCommerce-HDL, BSS-TekLabs) provided CSS solutions involving:

  • Editing the theme.liquid file in Shopify Admin
  • Adding custom CSS code above the </head> tag

The initial solution successfully styled the “Add to Cart” button on single product pages, but the user reports needing the same styling applied to additional buttons: “Buy It Now” (product page), “Choose Options” (collection page), and “Add to Cart” (collection page). BSS-TekLabs provided follow-up code attempting to address these remaining buttons.

Resolution: Ongoing - awaiting confirmation that the extended solution works for all requested buttons.

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

Title says it all!

here is a reference picture:
*Side request: I would like all buttons of the collection pages and product pages to have the same aesthetics so Solid black + white text and on hover it becomes Hollow with a 1px border + black text. (Choose options, add to cart, buy it now, etc..)

website

www.inprintstore.com

pass: shiznitz

Thanks!

2 Likes

@lplabranche ,

To remove underline + add bold text on hover product share button follow this steps:

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.liquid.

Step 3. Add this code above


1 Like

Hi @lplabranche ,

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 @lplabranche
  • Please follow these steps:

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.

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

Worked for the add to cart buttons in a single product page, however I need to have the “buy it now” button affected the same way, Also the “Choose option button in the collection page” and the “add to cart” in the collection page as well. Thanks!

1 Like

Can you try this code @lplabranche

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