Gift Card Artwork Variations

Highlighted
Tourist
6 0 1

I've checked the posts on here and it seems a few people have asked this question but it seems no solution has been proposed. But thought I'd ask again.

 

Gift cards - we can change the images on the product page - easy.

We can have a collection with different gift card artwork options - easy

The customer chooses a gift card based on the artwork.

The customer purchases the gift card and the artwork defaults to a generic image.

We can change the default image in the code- but this is then applied to every card.

 

How do we maintain consistency between the artwork the customer selects on the product page - and the artwork they receive as a gift card?

1 Like
Highlighted
New Member
1 0 0

I have the same issue! Totally bizarre you can create different cards for the shopper but the recipient does not get to enjoy the card that was purchased for them. Just joining in here to hopefully see a response when you get one! 

0 Likes
Highlighted
Shopify Partner
123 2 10

Hi @kverge  and @caseydobie1, I'm Neomi from Rise.ai app.

 

At Rise we developed a Gift Card solution for Shopify merchants.

You can customize your gift cards to fit the tone of your brand and let your customers sent to their loved ones the perfect gift card.

They can send it directly to the recipient and schedule It for the perfect time.

Here is one of my favorite Rise gift cards by Paw.com

 

Annotation 2020-04-08 105908.jpg

 

Check out our listing page and feel free to contact me at info@rise.ai

0 Likes
Highlighted
Excursionist
16 0 4

I am having exactly the same issue. What is the point to customize the gift card if the costumer gets a different artwork? this is frustrating

1 Like
Highlighted
Tourist
7 0 0

Same here! I tried this code in the gift_card.liquid
But it doesn't work. I have uploaded all the different images to the assets folder.
Here's the code I tried to solve this problem. But IT FAILED!

 <div class="GiftCard__IllustrationWrapper">

           {% if product.title == 'Gefeliciteerd €15' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-gefeliciteerd-15.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}  

           {% elsif product.title == 'Gefeliciteerd €25' -%}  <img class= "GiftCard__Illustration" src="{{ 'AAimage-gefeliciteerd-25.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Gefeliciteerd €50' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-gefeliciteerd-50.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}">{% else %}     

           {% elsif product.title == 'Gefeliciteerd €100' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-gefeliciteerd-100.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Speciaal Voor jou €15' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-speciaal-voor-jou-15.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">  {% else %}

           {% elsif product.title == 'Speciaal Voor jou €25' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-speciaal-voor-jou-25.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">  {% else %}

           {% elsif product.title == 'Speciaal Voor jou €50' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-speciaal-voor-jou-50.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Speciaal Voor jou €100' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-speciaal-voor-jou-100.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Veel beterschap €15' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-veel-beterschap-15.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}">{% else %}

           {% elsif product.title == 'Veel beterschap €25' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-veel-beterschap-25.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">  {% else %}

           {% elsif product.title == 'Veel beterschap €50' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-veel-beterschap-50.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Veel beterschap €100' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-veel-beterschap-100.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">  {% else %}

           {% elsif product.title == 'Verjaardag €15' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-happy-birthday-15.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Verjaardag €25' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-happy-birthday-25.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">  {% else %} 
          
           {% elsif product.title == 'Verjaardag €50' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-happy-birthday-50.png' | asset_url }}"  alt="{{ 'gift_card.issued.illustration_alt' | t }}"> {% else %}

           {% elsif product.title == 'Verjaardag €100' -%} <img class= "GiftCard__Illustration" src="{{ 'AAimage-happy-birthday-100.png' | asset_url }}" alt="{{ 'gift_card.issued.illustration_alt' | t }}">  {% endif %}
          
          
          <span class="GiftCard__CodeHolder Heading u-h6">{{ gift_card.code | format_code }}</span>
        </div>

The card code is working. But the images won't show up... :(

Screenshot 2020-06-23 at 17.05.04.png

And this is the result I want. To show my design instead of that ugly gift box :)

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

0 Likes
Highlighted
Tourist
7 0 0

Changed the code a bit, but still no positive output. Right now I'm getting the image icon, where no link is given.

  <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 = images['AAimage-happy-birthday-15.png' | asset_url] %} {%- 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>
0 Likes
Highlighted
Tourist
7 0 0

Screenshot 2020-06-23 at 21.52.13.png

0 Likes
Highlighted
Tourist
7 0 0

When i'm implementing the source url right into the src:' ' it works like a charm. So the asset images work.
The only thing now is getting them to work like it should!

0 Likes
Highlighted
Shopify Partner
5 0 2

Showing a variant image in both gift card email and gift card page is very much possible with a bit of theme tinkering. App-less, fully organic, just a bit hacky. Just implemented that to my client's shop.

Happy to help for a reasonable charge, please message me.

 

 

0 Likes
Highlighted
Tourist
6 0 1
Hi. Thanks for getting in touch.

Ok - you’ve caught my interest - can I see what you implemented?

And what do you consider a reasonable charge?

Thanks

Casey
0 Likes