Header letters color based on how they appear with background image

Technical Q&A
,
1

Hi,

Hi all, I have a shopify site: vaigustando.it

It stay under password (i’m still working on layout): vaigustando123

theme is: barberry

Is there a way to personalize the header text color for each collection page?

Screenshot 2023-03-29 alle 12.23.20.png
Screenshot 2023-03-29 alle 12.23.20.png1524×206 413 KB

As you can se in the above picture the result is bad. Picture is too close in terms of color with lettering.

In this case better to select white as lettering color. Unfortualty there are some situation where White is the best and other where Black is the best.

EXAMPLE

section like VINI:

https://vaigustando.it/collections/vino-e-distillati

to have the header title and section //Vini + <–Vini in black colored letter

and in other setion like PRODOTTI DA FORNO

https://vaigustando.it/collections/prodotti-da-forno

to have the header title and setion //Prodotti da forno + <–Prodotti da forno in white letter

Is there a way to manage collection by collection this or generate a code supporting this?

Thank you in advacene for supporting me

2

Hi @ellisbosisio

You could create a metafield for each collection setting the color of the header based on that selection.

Then once that metafield is created, include the logic inside the main collection header liquid code. We could get this done for you should you find the above complicated, without access to your theme it would be pretty impossible to provide the exact code from where we are.

Cheers!

3

Hello @ellisbosisio

You can refer this design : https://prnt.sc/GeRpmng5f0K5

If it is ok for you, you can follow the steps below to add the code:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before

I hope the above is useful to you.
Best regards,
GemPages Support Team

4

Hi Gem, thank you for this option. Is a differnt approach but could be interesting.