Visibility/Style override for symbol items.

I was disappointed to see that overrides in symbols only apply to content, basically CMS without using CMS, which is nice...

...but, I think it would be truly useful if you could also apply stylistic, or at the very least visibility overrides.

For example, I created a left side menu to organize my clients products in different ways. The main shop page has a larger photo driven version of the "Shop by Jewelry Type" menu, that sits at the top of the left side menu. While I need this menu on every other page, it's obviously redundant on this page.

I know that I can disconnect this instance from the symbol and delete it, but then any time I change the menu, I have to replace it with the symbol and delete the redundant menu. Not a big deal in this case, but in a situation that's more complex, or has many overrides for many pages, it could become easy to forget everything you need to do each time you make a change.

  • Skyler Kline
  • May 28 2020
  • Shipped
  • Drew Gilliam commented
    16 May, 2022 09:04pm

    Bump. This would be really handy.

  • Lucie commented
    12 May, 2022 10:02am

    This would be super handy. Currently I'm using a symbol for project tiles on my portfolio page. Am using custom overrides for the content, but would also like to over-ride the classes so that I can assign different classes with the MixItUp Filter. Without that, I've now had to break apart the symbols to assign the filter classes.

  • Nicholas Van Beylen commented
    23 Jun, 2021 01:36pm

    I would like to change navigation text color based on the page you are visiting.

  • Max Morawski commented
    1 Jun, 2021 05:15pm

    I faced a similar issue and solved it with an attribute selector in the page custom code block (not the global site custom code block! 😁 ) on the pages where I need a part of the symbol hidden. Any other selector would work as well, of course, depending on the design.


    <style>

    a[href="/some-link"] { display: none !important; }

    </style>


    Use web browser inspector to find the correct CSS class name.

  • Alex Dixon commented
    12 Nov, 2020 12:33pm

    Conditional visibility on symbol overrides would be super helpful 👈🏼

  • Christopher Myers commented
    23 Jun, 2020 09:56pm

    I second this, adding an ability to hook overrides up to certain styles would be extremely useful. In my case, I have a card symbol I'm reusing and would like to be able to change the background color for different cards. Thanks!

  • +36