/!\ variation of gift card images /!\ Liquid - good for the community /!\

Highlighted
Tourist
7 0 0

Hey everybody,

I'm trying to code variations to my gift card products.
Here's the setup:

  • One value per gift card, ex. €15
  • Different designs with different values (Seperate gift card products)
    • ex. Birthday €15, Birthday €25, Birthday €50, Congratiulations €15, Congratiulations €25,........
  • I have 16 gift cards in total for this setup.
    This is the Gift card collection you see here:
    Screenshot 2020-06-23 at 23.09.35.png

    16 different images uploaded in the Assets folder. Links are working fine.

    Screenshot 2020-06-23 at 23.17.45.png

Here's my code so far to try it in the gift_card.liquid in the templates folder. (NOT in the layout folder)

        <div class="GiftCard__IllustrationWrapper">
           {%- if product.title == 'Gefeliciteerd €15' -%} {% assign gifty = images['AAimage-gefeliciteerd-15.png' | asset_url] %} {%- else -%}  

           {%- elsif product.title == 'Gefeliciteerd €25' -%}  {% assign gifty = images['AAimage-gefeliciteerd-25.png' | asset_url] %} {%- else -%} 

           {%- elsif product.title == 'Gefeliciteerd €50' -%} {% assign gifty = images['AAimage-gefeliciteerd-50.png' | asset_url] %} {%- else -%}      

           {%- elsif product.title == 'Gefeliciteerd €100' -%} {% assign gifty = images['AAimage-gefeliciteerd-100.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Speciaal Voor jou €15' -%} {% assign gifty = images['AAimage-speciaal-voor-jou-15.png' | asset_url] %} {%- else -%} 

           {%- elsif product.title == 'Speciaal Voor jou €25' -%} {% assign gifty = images['AAimage-speciaal-voor-jou-25.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Speciaal Voor jou €50' -%} {% assign gifty = images['AAimage-speciaal-voor-jou-50.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Speciaal Voor jou €100' -%} {% assign gifty = images['AAimage-speciaal-voor-jou-100.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Veel beterschap €15' -%} {% assign gifty = images['AAimage-veel-beterschap-15.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Veel beterschap €25' -%} {% assign gifty = images['AAimage-veel-beterschap-25.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Veel beterschap €50' -%} {% assign gifty = images['AAimage-veel-beterschap-50.png' | asset_url] %} {%- else -%}

           {%- elsif product.title == 'Veel beterschap €100' -%} {% assign gifty = images['AAimage-veel-beterschap-100.png' | asset_url] %} {%- else -%}

           {%- elsif product.title = 'Verjaardag €15' -%} {% assign gifty = url['https://cdn.shopify.com/s/files/1/0278/9851/1449/files/happy-birthday-15-voor.png?v=1592944006'%} {%- else -%}
          
           {%- elsif product.title == 'Verjaardag €25' -%} {% assign gifty = images['AAimage-happy-birthday-25.png' | asset_url] %} {%- else -%}
          
           {%- elsif product.title == 'Verjaardag €50' -%} {% assign gifty = images['AAimage-happy-birthday-50.png' | asset_url] %} {%- else -%}
          
           {%- elsif product.title == 'Verjaardag €100' -%} {% assign gifty = images['AAimage-happy-birthday-100.png' | asset_url] %} {%- endif -%}
    
            <img class="GiftCard__Illustration" src="{{ gifty }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">
          <span class="GiftCard__CodeHolder Heading u-h6">{{ gift_card.code | format_code }}</span>
        </div>

I know I should assign  or capture the product titles somehow, but my knowledge really lets me down on this.

I almost figured it out for the community so a little help from the experts might help A LOT!

  • I posted this request on Fiverr, and the lowest offer was 90 dollar. So it's a pretty hard job to do.
    The highest price I got was $800...

The template works 100%: When I replace the URL of the image with {{ gifty }} it works like a charm. But I can't change the image using if else...

Small recap: what we need is the following: Replacing the standard image, with an image set by the accompanied bought gift card product of the customer

Screenshot 2020-06-22 at 18.25.38.png

 

Screenshot-2020-06-22-at-16.54.18.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

Please please please, can anyone help me solve this problem! I think I'm almost there!

Thank you so much in advance,

Benjamin

0 Likes