Display variant name overlay text on the selected variant image and also on the variant thumbnails

Store Design
, , ,
1

Hi Shopify Community,

I am using Refresh theme.

How can I display in overlay text the variant name in:

  1. the selected variant image,

  2. each thumbnail variant image.

I have found an example (see below screenshot) on an online store which displays the variant name (black rectangle with white text - “532 GALILEO”) only on the selected variant image but not on the thumbnail images (missing & desired variant name in red)

I have tried with the ChatGPT to suggest a code snippet to add in the product-media-gallery.liquid file and in the section-main-product.css file, but the proposed solution is not working.

See the ChatGPT proposed snippet for the product-media-gallery.liquid file

    <!-- Variant name overlay -->
    {% if media.attached_to_variant? %}
      <div class="variant-name-overlay">{{ media.variant.title }}</div>
    {% endif %}

and for the section-main-product.css file:

    /* Custom CSS for product variant name overlay */
    .variant-name-overlay {
        position: absolute;
        bottom: 10px;
        left: 10px;
        color: white;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 5px;
        border-radius: 5px;
        font-size: 1rem;
    }

ChatGPT is also suggesting to update some JS function updating the content of the variant-name-overlay div when a variant is selected, but I have no idea which that is.

Ensure JavaScript Interactivity: If your theme uses JavaScript to update the displayed image when different variants are selected, ensure the script also updates the variant name in the overlay. This might involve adding or modifying a JavaScript function that updates the content of the variant-name-overlay div when a variant is selected.>

Screenshot 2023-12-26 at 20.15.20.png
Screenshot 2023-12-26 at 20.15.20.png2550×2000 575 KB
>

Another option is to modify the variant images adding in Photoshop the variant name in the image itself.

But that implies download, modify & upload all variant images + alt tag updating - lot of work and cumbersome.

I would prefer a neat code solution.

Please help! thanks

2

When a chatbot says ensure X, just ask it for an example.

Refresh should have a variant change event that can be used in a standalone function

If the theme has a sale badge function just use that to insert the product name, testing it for dynamic behavior as sometimes the “sale” text is embedded elsewhere and not just in the template files.

To use variant titles when selecting variants that ties into the part about needing javascript making such a thing update when a variant changes

Such a customization for variant messaging badges ONLY applies to the online sales channel, so if a store is multichannel(facebook,google-shopping,etc) editing the images is the only consistent way to have this level of messaging control everywhere.

Someone else working out and testing the “neat” code customization for an entire feature to be dynamic with javascript for a specific theme is also a lot of work and cumbersome.

If you need this customization built you can contact me by email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

3

Hi @bromanciuc ,

yes, this is possible via custom dev and use of alt attributes.

If interested request you to connect over the WhatsApp for detailed discussion, details are in post footer.