Add header Text to carousel and change background

Store Design
, ,

Topic summary

A user seeks to add header text to a product page carousel and change its background color, distinct from the main site background.

Initial Solution Provided:

  • PageFly support (Noah) provided CSS code to be added to the theme.liquid file
  • Code included .wf-slider::before styling to insert “Header text”
  • User successfully implemented the header text solution

Follow-up Issue:

  • User attempted to modify the header text name for a specific product via CSS in the theme editor
  • Encountered “online session can’t be edited” error preventing saves
  • Noah explained some code cannot be used in the theme editor’s “custom code” section and must be placed in theme.liquid instead

Current Request:

  • User installed an app (likely PageFly) but wants to hide its branding
  • Specifically requesting CSS code to blend branding font color with page background (#f0f0f0)
  • Awaiting response on custom CSS solution for branding removal

The discussion remains open with the branding visibility issue unresolved.

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

Hello everyone,

I would like to add a header text to a carousel on my produit page and change carousel background color different to the main one

this is my product page link:https://urbanhyp.com/products/u-hyp%C2%AE-electric-pro-massager ,

if anyone can help me with this please

thank you

unnamed303.jpeg
unnamed303.jpeg1283Ă—1511 105 KB

2

yes please

3

This is Noah from PageFly - Shopify Page Builder App

Please add code here to show this text:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Noah | PageFly

1 Like
4

thank you Noah. Do you have any idea how to change the specific background color?

5

Sure ! please add again code here:
1 Like
6

thank you so much

1 Like
7

Thank you , have a nice day !

1 Like
8

Please @PageFly-Noah @you helped me out last time about this.

can you please provide a code that I can add to the CSS for a specific product to modify title name ( “Header text”)

IMG_3942.jpeg
IMG_3942.jpeg1283Ă—1295 75.2 KB

i try this in the CSS in the theme editor for a product to change you name but editing is refusing

.fw-slider::before{ content: "Header text", }
9

HI @Transcolie If you want apply this code in theme editor , You need remove tag and , You can see code here:

.fw-slider::before{
content: "Header text",
}

Thank you !

10

Thank you @PageFly-Noah but it seems not working. When adding the code I have an error message that says « online session can’t be edited » and then refuse to save .

can you look this with me please.
thanks

IMG_3967.jpeg
IMG_3967.jpeg1284Ă—1337 31.9 KB

IMG_3966.png
IMG_3966.png1284Ă—2778 147 KB

11

Hi @Transcolie , I got it, Some code will not be suitable for use in there. Can you use in theme.liquid. Currently it seems impossible to use that code in “custom code”.

12

Please @PageFly-Noah

I have installed this apps but it do have branding. Would you be able to provide a customs code to hide branding like blend font color with main page background color #f0f0f0

i would like to add it to custom css code

thanks

this is page link :

https://urbanhyp.com/products/vibro-hyp™

IMG_4015.jpeg
IMG_4015.jpeg1283Ă—1426 147 KB