Product page styling question

Technical Q&A
,

Topic summary

A user needs help renaming a bullet list header from “Info om Kronhjorten” to just “Info” on a Shopify product page. They’ve checked the theme customizer but cannot locate where to edit this text.

Solutions Provided:

Three community members offered CSS-based solutions with similar approaches:

  • Method 1 & 2: Add custom CSS code to the theme.liquid file before the </body> tag
  • Method 3: Add CSS to the theme.scss.css file at the end

All solutions target the same element (span#easytabs-slide-label-9697347666245-0) and use CSS to:

  • Hide the original text with visibility: hidden
  • Display “Info” using the ::after pseudo-element with content: "Info"
  • Make the new content visible

The responses include code snippets and screenshots showing the expected result. The issue appears related to a third-party tabs/accordion component (EasyTabs) used on the product page.

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

Hello @Username367468

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

span#easytabs-slide-label-9697347666245-0:after { content: "Info"; visibility: visible; display: block; float: left; } .easytabs-container .easytabs-accordion-item .easytabs-header-text { visibility: hidden !important; }

Tech_Coding_0-1727346213911.png
Tech_Coding_0-1727346213911.png1271×456 337 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

1 Like