Online store - Customize your online gift card image

Solved
Highlighted
Tourist
7 0 2

It WORK!!! thankyou so much! this has been so encouraging! as i have no clue of decoding!!!! So happy!

I still cannot see the preview, but I made a gift card for mysel as a test and it looks perfect!

Really happy today! Your help and practical step by step explanation is GREAT

1 Like
Highlighted
Explorer
42 0 15

Is there any way to change the amount text color to something dark? I'd like to put my shop logo on the card, but it's desiged to go on a light background and doesn't stand out against anything dark. Also, I can't find the $color-giftcard-bg anywhere in the gift-card.scss.liquid code and I can't find where to define any $Color attributes at all. Using Minimal theme, if that makes any difference.

2 Likes
Highlighted
Tourist
4 0 2

Great tutorial. I had some issues with the code but i just solved it, Thank you.

1 Like
Highlighted
Excursionist
10 0 4

I have tried this tutorial a couple of times now and am not having any luck....I'm not sure what is going wrong? I've tried adjusting the size of my image, I've tried a jpg and also a png, I've even tried different images to see if it is just the one image. But none of the seem to be working....When I go to send the test email of the gift card, it is still the old image. 

 

Any ideas on what I might be doing wrong?

1 Like
Highlighted
Excursionist
12 0 3
My best suggestion is to go back through step by step and double check, especially the text editing, like if you had to remove the shopify_ part, make sure you kept the single ' sign on each side, make sure the name of the image is exactly as it is under assets.

If it still is t working, Which theme are you using? You may want to try searching for this issue using your theme specifically, perhaps there's something different with it
0 Likes
Highlighted
Excursionist
10 0 4

I'm not finding anything that looks different than the tutorial....the only thing is that the line above my "img source" line says "giftcard-wrap". 

 

<div class="giftcard__wrap">
<img src="{{ 'Robin-Blu-GC-online.png' | asset_url }}" alt="Gift card illustration">

 

This is what it looks like currently. Is there anything that seems off about it?

0 Likes
Highlighted
Explorer
42 0 15

Well, it works! And amazingly, no red line at the bottom of the card in the test email.

I'd still like a way to show the denomination in a dark color, though. What I have is okay, but it could be better.

0 Likes
Highlighted
Excursionist
12 0 3
Hmmm... it looks alright to me comparing it to what the OP put in the tutorial. It may be something to do with the giftcard-wrap.

Did you make sure that where you initially uploaded the image, that it did indeed upload? The 1st time I tried, it didn't actually upload, which tends to happen to me in Chrome when my phone is low on memory when I'm trying to upload an image that's taken several folders to get to. As usual when I run into this situation, I did it a 2nd time and it worked.

I would try double checking to make sure your image is actually there, if you havent already, of course.

If that doesn't work, I would make a copy of what you have now, make sure its saved in its entirety, and try replacing
<div class="giftcard__wrap">
with
<div id="gift-card">
It may help, it may not, but it's worth a try I would think? If it doesn't then just paste your saved copy back, and hopefully the OP or someone else with more knowledge of this stuff can chime in with something that works for you.
0 Likes
Highlighted
Excursionist
10 0 4

Yeah, I'm not sure what the issue was...I ended up putting everything back exactly how it was, and then trying again. I've got it to work out alright for the time being, so no worries. Thank you!

1 Like
Highlighted
New Member
2 0 1

Hello!!

 

Thank you so so much.

I have an additional question. Where in the code can I change the text of this giftcard? 

 

It would be of much help!

1 Like