0
votes

I am looking to add a small logo to the top right corner of a product image. The tricky bit is that I only want it to appear on product images that correspond to a given product tag. For example: Only Show overlay "FitLeftFitRight.jpg" over product images when products have the tag "Fit Left Fit Left".

I am using Shopify which uses Liquid as its markup language.

I would really appreciate this help.

Thank you.

1
Hi, welcome to SO, unfortunately SO is not a code writing service. Please post what you have tried, and any errors or exceptions you may have received.mxmissile

1 Answers

0
votes

Please post the liquid file that contains the elements for the product image. My initial guess at solving this is to wrap the product image/slider in a <div> tag with the style position: relative and add the logo with styles position: absolute; top: 0; right: 0;

To only appear on product pages with the tag Fit Left Fit Left you can loop through the product tags and if tag is found show the logo, shown in the following code.

{% assign tagFound = false %}

{% for tag in product.tags %}

  {% if tag == "Fit Left Fit Left" %}
    {% assign tagFound = true %}
  {% endif %}

{% endfor %}

// Place this inside the product image wrapper <div> with position relative
{% if tagFound == true %}
  <img src="logo-url-here.jpg" style="position: absolute; top: 0; right: 0;" />
{% endif %}