Hyperlinks not visible on product page?

Store Design

Topic summary

A user encountered an issue where hyperlinks for email and contact form were not displaying in the “Returns Information” collapsible tab on their Shopify product page, despite being properly added in the editor.

Suggested Solutions:

  • Verify HTML formatting is correct for hyperlinks
  • Check theme settings for restrictions on links in collapsible sections
  • Use Shopify’s rich text editor instead of plain text
  • Inspect for CSS conflicts using browser developer tools

Working Fix:
Two CSS-based solutions were provided:

  1. Add custom CSS styling to theme.liquid file (above </body> tag)
  2. Add .accordion__content a{color: black !important;} to base.css file

Resolution:
The issue was resolved using one of the CSS solutions. The problem stemmed from theme styling that made links invisible rather than the links being absent from the code.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Under “Returns Information” collapsible tab I’ve hyperlinked my email and contact form but it is not displaying?

Screenshot 2025-03-20 at 8.42.56 pm.png
Screenshot 2025-03-20 at 8.42.56 pm.png2780×1706 583 KB

Screenshot 2025-03-20 at 8.41.20 pm.png
Screenshot 2025-03-20 at 8.41.20 pm.png1430×548 64.3 KB

Could someone help me please?

URL: https://driftnoosa.com/products/corduroy-overshirt

Thank you !!!

1 Like
2

hi @ultimatebeanzmo

It seems like the hyperlink might not be rendering correctly due to theme settings or formatting issues.

Here are a few things to check:

Check the HTML Formatting – Ensure your email and contact form links are properly formatted in HTML:

.campaign-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    pointer-events: none; /* Prevent clicking */
}

Verify Theme Settings – Some themes may have restrictions on rendering links inside collapsible tabs. Check your theme’s documentation or try adding the links in another section to see if they work.
Use the Rich Text Editor – If you’re adding the links via Shopify’s page editor, try using the rich text editor to insert hyperlinks instead of pasting plain text.
Check for CSS Conflicts – Sometimes, themes hide or style links in a way that makes them invisible. Inspect the tab using the browser’s developer tools to see if the links exist but are hidden.

3

Hey @ultimatebeanzmo

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742474968410.png
Moeed_0-1742474968410.png483×684 20.6 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hey please paste the following code in the end of base.css file.

Go to Shopify Admin > Online Store > Edit Code > base.css

Go to end of this file and paste the following code.

.accordion__content a{
color: black !important; 
}

Results:

thescriptflow_0-1742475176955.png
thescriptflow_0-1742475176955.png582×257 29.4 KB

Let me know if this work for you. Either I provide you other solution.

5

Thank you brother !!

1 Like
6

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.