Change button_label on Shopify when hover

I think I have a solution for you.

You need to add a data attribute containing the wanted ‘hover text’, as you suggested yourself. Heres how I did it:

<a href="{{ block.settings.button_link }}" class="btn--full" >
  <div class="flex-btn">
    <span data-hover_text="Second placeholder text">
      {{ block.settings.button_label }}
    {% render  'icon-arrow-right' %}

Notice that I put the text into a span. This is important because we don’t want to interfere with the icon-arrow-right.

Next up we need the jQuery. Here how I implemented it:

$(window).on('load', function(){
    $('.btn--full').on('mouseover mouseout', function(){
        flipText($('.flex-btn span'));

function flipText(el) {
    // Get and store the current text present in element
    var currentText = $(el).text();
    // Get and store the placeholder text from the 'hover_text' data-attribute
    var placeholderText = $(el).data('hover_text');

    // Replace the current text with the placeholder text

    // Replace the data attribute 'hover_text' with the current text
    $(el).data('hover_text', currentText);

Hopefully that helps. I can elaborate on anything if you need it, so let me know if you do.

CLICK HERE to find out more related problems solutions.

Leave a Comment

Your email address will not be published.

Scroll to Top