Custom Icons as Map Pins

Is it possible to upload custom icons as map pins in the locations vertical within Answers? I’d love to use the same icon my customer has on their site map!

Hi Jessie,

Yes, you can do this easily with a custom SVG.

Caveat: We’d recommend holding off on this until we have our new maps functionality with answers. without the ordinal, it’s not clear to users which pin maps to which card, so proceed at your own discretion.

  1. To update the pin on the locations vertical
    Shadow the map-pin.hbs file using the Jambo Override Theme command – you can find this in templates/vertical-map/script/. In that file, you’ll see a variable called svg . Replace the highlighted portion below with your SVG code.

  2. To update the pin on universal
    Follow step 1, except shadow the map-pin.hbs file in templates/universal-standard/script/ and replace the SVG there.

  3. To update the pin on the card
    Create a new card using location-standard as a base. In the template.hbs, replace the result.ordinal with your SVG.

We’d also recommend adding a unique class name (at the same level as HitchhikerLocationStandard-ordinal), just in case you have multiple verticals using a location card. Here I’ve added a UsingCustomSvg class.

You’ll likely need to add some scss to get the ordinal to override our default styling for that pin on the card.

.UsingCustomSvg {
    background-color: unset;
    border: none;
    width: unset;
    height: unset;