Question 11483 in Shopify Question posted in
The Shopify help center can be found here.

Shopify – Dynamic Images with MetaFields

I have in the MetaField "Color" – 3 values.
Red, Green and Blue. in Shopify.

I want to provide hints for these colors on the Product page. Since I have only created the meta field on all products and I don’t want to create a photo meta field here, I am checking to see if I can find the solution with an if query.

If The Meta-Field is with the color "RED", then show with graphic XY (A hint for this color).

But if Meta-Field is with color "Blue", then show me another graphic.

But if Meta-Field is with the color "Green", then show me another graphic.

If empty, no graphic.

Do you have any idea?

Tags:

2

Answers


  1. 0

    Upload three assets to your theme, named "red.png", "green.png" and "blue.png". If you can manage that feat, you’re cooking with gas. Now, in your Liquid, just read back to yourself those metafield "values". If you find a value in the color of "red", then using Liquid, make an image tag where the source points at the "red.png" asset you uploaded.

    Obviously you can get fancier, and many people do, but that pattern is basic and should work enough to prove the point till you master other techniques.

    Login or Signup to reply.
  2. 0

    Here’s a couple of options for you

    Using a conditional I am first checking to see if the metafield has content, then checking the value for red, green, or blue, and displaying the relevant image by looping over an if/elsif tag

    {% if product.metafield.namespace.key != blank %}
  {% if product.metafield.namespace.key == "RED" %}
    <img src="RED IMAGE URL" alt="Red">
  {% elsif product.metafield.namespace.key == "BLUE" %}
    <img src="BLUE IMAGE URL" alt="Blue">
  {% elsif product.metafield.namespace.key == "GREEN" %}
    <img src="GREEN IMAGE URL" alt="Green">
  {% endif %}
{% endif %}

    This can also be achieved using a case/when tag

    {% if product.metafield.namespace.key != blank %}
  {% case product.metafield.namespace.key %}
    {% when "RED" %}
      <img src="RED IMAGE URL" alt="Red">
    {% when "BLUE" %}
      <img src="BLUE IMAGE URL" alt="Blue">
    {% when "GREEN" %}
      <img src="GREEN IMAGE URL" alt="Green">
  {% endcase %}
{% endif %}

    If you want to check out the docs for this they’re here https://shopify.github.io/liquid/tags/control-flow/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search