Display Hover Text over Swatches

Displaying hover text over swatches is a great way to showcase what colors you offer for your products. Follow the steps below on how to apply this with Infinite Options.

Add the necessary scripts to your theme

1. From your Shopify admin, click Online Store to arrive at the Themes page.

2. Find the theme you want to edit, click the Actions ▼ button, then click Edit code.

3. Under the Layout folder, click on the theme.liquid file.

4. Using the keyboard shortcuts (ctrl F or ⌘ F), search for the ending tag:

</head>

5. Before the </head> tag, paste in the following code snippet.

<script>
  // Create "window.Shoppad.apps.infiniteoptions" object if it doesn't already exist
  "Shoppad.apps.infiniteoptions".split(".").reduce(function(o, x) { if (!o[x]) {o[x] ={};} return o[x] }, window);

  // Define beforeReady callback
  window.Shoppad.apps.infiniteoptions.beforeReady = function(subscribe) {
    subscribe('appLoad', function(event) {
      Shoppad.$('.spb-productoptionswatchwrapper').contents().filter(function() {
        return this.nodeType == 3;
      }).wrap('<span class="spb-swatchtooltip"></span>');
    });
  };
</script>

6. Save changes.

Add CSS styles

1. Click into your Apps, and head into the Infinite Options dashboard.

2. Navigate into the Settings tab.

3. Locate the Custom CSS field.

Note: If you have added the Horizontal Swatches without labels CSS snippet, please click this link, locate the snippet, and remove it from here before continuing onto the next step.

4. Paste the following CSS snippet. If you have any existing snippets, you can insert it at the end.

#infiniteoptions-container .spb-productoptionswatchwrapper {
  display: inline-block;
  position: relative;
}

#infiniteoptions-container .spb-productoptionswatchwrapper .spb-swatchtooltip {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 2px;
  bottom: 80%;
  left: 50%;
  transform: translateX(-50%);
  margin-left: -3px;
  font-size: 12px;
}

#infiniteoptions-container .spb-productoptionswatchwrapper:hover .spb-swatchtooltip {
  visibility: visible;
  opacity: 1;
  padding: 5px 10px;
  z-index: 1;
  text-align: center;
  color: #fff;
  background-color: #333;
}

#infiniteoptions-container .spb-swatchtooltip:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

5. Save changes.

6. View a product page with swatches or click here to learn how to create swatches!

Still need help? Contact Us Contact Us