Can I use different logos on separate product pages' headers?

Store Design
1

Does anyone know if it’s possible to have a different logo in the header for different product pages? For example, one product page would have one type of logo in the header, while another product page would have a completely different logo in the header. I’m using the Sense theme and the only way I can edit/change the logo is in my theme settings, which affects ALL the headers on ALL the pages throughout my entire website. There’s no option to edit the logo in the header on specific pages. Is there any way to get around this?

2

Hello @em090 ,

As we can understand from your context, are you trying to add icons for different categories on the header? If so, you can try to follow these steps:

  • Go to Online store → theme → actions → edit code
  • Go to theme.liquid file → add the following code:
.header__nav-item-link[href="/collections/category1"] {
  background-image: url('path/to/category1-icon.png');
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 30px; /* adjust this value to move the text away from the icon */
}

.header__nav-item-link[href="/collections/category2"] {
  background-image: url('path/to/category2-icon.png');
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 30px; /* adjust this value to move the text away from the icon */
}
  • Save and preview

Note that the class names and href values used in the code may vary depending on the theme and structure of your navigation menu

Hope this can help. Let us know if you need any further support.

Ali Reviews team.