SVG clickable header icons for Surecart?

  • digestive
    May 18, 2026 at 8:08 am

    Hi,
    I recently signed up to GP One after using Kadence for a few years.
    I am trying to replicate some of my site features.
    In the header menu, I added the Search button from the Customise menu.
    I want to add a User Account Dashboard for Surecart button.

    With Kadence, I just edited the header, there was a built in Account Dashboard button/icon for Surecart account dashboard.
    I can’t seem to do that in GP. What I have tried to do, with the Affinity template, is edit the Hook – Desktop Menu Button to add an inline SVG image using Safe SVG. The problem is, I don’t know how to make it clickable.

    I am a novice with GP, I found Kadence much easier but I want to make the switch.
    Thanks

  • digestive
    May 18, 2026 at 8:26 am

    Of course after I post this I find a possible solution.
    By watching this video: https://www.youtube.com/watch?v=KJCnRZOj5Sk
    I managed to add the SVG icon.
    My issue is the space between the icon and search icon
    icon space
    icon on drive
    image of space

  • Ying
    May 18, 2026 at 9:33 am

    Hi there,

    Glad you found a solution!

    To reduce the distance between the account icon and the search icon, select the account icon (text block with class gb-text-27a54a3e), and reduce its left and right paddings in the spacing panel.

    Let me know if this helps!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.