How can I add hover features to my store locations map?

Store Design
1

Hello Community, I have 3 questions.

1st one is, I recently just started using Shopify and had a few questions about the design elements. I have a Map which is a Jpeg and on that map are points of the shop locations. Is there a way of integrating hover features, so that when you hover over the points it shows the location and its details?

  1. Can we change the text in the contact us from Comments to Message, if yes how do I go about this, please?

  2. Is it possible to make phone numbers clickable and for emails too, if it is how can I go about this please?

Your help would help a bunch.

2

Hello @DesignCatalyst ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to theme.liquid file → add this following code at the bottom of page

.map-container {
  position: relative;
  width: 100%;
}

.map-image {
  width: 100%;
  height: auto;
}

.location-details {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  /* Add desired styling for location details */
}

Save changes

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

Ali Reviews team.