Gift Card link at top of the page not working..

Solved
Highlighted
Tourist
20 0 1
Hi all, 

 

So I just started using gift cards as I have had a number of requests for them over the past weeks.

 

However, in testing, I noticed that the top link (picture below)  doesn't work. 

linkproblem.JPG

 

I get taken to this page

 

linkproblem1.JPG

Although the "Shop now" link works fine.

Any ideas how to sort this? It's not immediately obvious in the notification email editor or liquid code.

 

Thanks in advance.

0 Likes
Highlighted
Shopify Partner
1080 169 194

Hi There! 

Let's have a look together shall we? Would you mind sharing your URL please?

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Highlighted
Shopify Partner
1080 169 194

Would you mind sharing your liquid code that displays this Gift Card? The top URL as generated links to checkout.shopify.com which is not a store

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Tourist
20 0 1

Of course, @JHKC 

 

/*============================================================================
Table of Contents

#General Variables
#Sass Mixins
#Base Styles
#Media Queries
#Print Styles
#Keyframe Animations
==============================================================================*/

/*============================================================================
#General Variables
==============================================================================*/
// Timber Colors
$colorBody: {{ settings.color_body_bg }};
$colorBorder: {{ settings.color_borders }};

// Gift Card Colors
$colorGiftText: {{ settings.color_body_text }}; // note, this is always on a white background
$colorGiftBorder: {{ settings.color_primary }};

// Sizes
$gutter: 30px;

/*============================================================================
#Sass Mixins
- Copied from timber.scss.liquid
==============================================================================*/
.clearfix {
&:after {
content: "";
display: table;
clear: both; }
*zoom: 1;
}

@mixin clearfix() {
&:after {
content: "";
display: table;
clear: both; }
*zoom: 1;
}

@mixin prefix($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
-ms-#{$property}: #{$value};
-o-#{$property}: #{$value};
#{$property}: #{$value};
}

/*============================================================================
#Base Styles
==============================================================================*/
.template-giftcard,
.template-giftcard body {
background: $colorBody;

a {
text-decoration: none;
}
}

.template-giftcard .wrapper {
max-width: 588px;

img, object, iframe {
max-width: 100%;
}
}

.giftcard-header {
padding: ($gutter * 2) 0;
font-size: 1em;
text-align: center;
-webkit-animation: fadein 0.5s ease-in-out both 0.4s;
animation: fadein 0.5s ease-in-out both 0.4s;
}

.shop-url {
display: none;
}

.giftcard {
-webkit-animation: slideup 0.8s ease-in-out;
animation: slideup 0.8s ease-in-out
}

.giftcard__border {
background-color: $colorGiftBorder;
border-radius: 4px;
border: 1px solid darken($colorGiftBorder, 5%);
padding: 1em;
-webkit-animation: container-slide 0.8s ease-in-out;
animation: container-slide 0.8s ease-in-out
}

.giftcard__content {
@include clearfix;
background-color: #fff;
color: $colorGiftText;
border: 1px solid darken($colorGiftBorder, 5%);
border-radius: 3px;
-webkit-animation: cardslide 0.8s ease-in-out;
animation: cardslide 0.8s ease-in-out;
}

.giftcard__header {
@include clearfix;
border-bottom: 1px solid $colorBorder;
padding: $gutter / 2;
}

.giftcard__title {
float: left;
margin-bottom: 0;
}

.giftcard__tag {
display: block;
float: right;
background-color: lighten($colorGiftText, 10%);
border: 1px solid transparent;
color: #fff;
padding: $gutter / 3;
border-radius: 4px;
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: .05em;
line-height: 1;
}

.giftcard__tag--active {
background: transparent;
color: $colorGiftText;
border: 1px solid lighten($colorGiftText, 20%);
}

.giftcard__wrap {
position: relative;
margin: ($gutter / 2) ($gutter / 2) $gutter;

img {
position: relative;
display: block;
border-radius: 10px;
z-index: 2;
}

&:before,
&:after {
content: "";
position: absolute;
width: 47px;
height: 47px;
z-index: 3;
}

&:before {
background: url('//cdn.shopify.com/s/assets/gift-card/corner-top-left-2ba3edcd9e97ba146cd01a8161365c5e.svg') 0 0 no-repeat;
top: -1px;
left: -1px;
}

&:after {
background: url('//cdn.shopify.com/s/assets/gift-card/corner-bottom-right-1fb9bf49ff9564325e6b7c0fb0a7ff45.svg') 0 0 no-repeat;
bottom: -1px;
right: -1px;
}

.lt-ie9 &:before,
.lt-ie9 &:after {
display: none;
}
}

.giftcard__code {
position: absolute;
bottom: $gutter;
text-align: center;
width: 100%;
z-index: 50;
}

.giftcard__code--medium {
font-size: .875em;
}

.giftcard__code--small {
font-size: .75em;
}

.giftcard__code__inner {
display: inline-block;
vertical-align: baseline;
background-color: #fff;
padding: .5em;
border-radius: 4px;
max-width: 450px;
-webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
box-shadow: 0 0 0 1px rgba(0,0,0,0.1);

.giftcard__code--small & {
overflow: auto;
}
}

.giftcard__code__text {
font-weight: 400;
font-size: 1.875em;
text-transform: uppercase;
border-radius: 2px;
border: 1px dashed $colorBorder;
padding: .4em .5em;
display: inline-block;
vertical-align: baseline;
color: $colorGiftText;
line-height: 1;

.disabled & {
color: #999;
text-decoration: line-through;
}
}

.giftcard__amount {
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 2.75em;
line-height: 1.2;
padding: $gutter / 2;
z-index: 50;

strong {
display: block;
text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
}

.giftcard__amount--medium {
font-size: 2em;
}

.tooltip {
display: block;
position: absolute;
top: -50%;
right: 50%;
margin-top: 16px;
z-index: 3;
color: #fff;
text-align: center;
white-space: nowrap;
-webkit-animation: popup 0.5s ease-in-out both 0.7s;
animation: popup 0.5s ease-in-out both 0.7s;

&:before {
content: "";
display: block;
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 0;
margin-left: -5px;
margin-bottom: -5px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 5px solid #333;
border-top: 5px solid rgba(51,51,51,0.9);
}
}

.tooltip__label {
display: block;
position: relative;
right: -50%;
border: none;
border-radius: 4px;
background: #333;
background: rgba(51,51,51,0.9);
min-height: 14px;
font-weight: 400;
font-size: 12px;
text-decoration: none;
line-height: 16px;
text-shadow: none;
padding: .5em .75em;
margin-left: .25em;

small {
text-transform: uppercase;
letter-spacing: .1em;
color: #b3b3b3;
font-size: .875em;
}
}

.giftcard__instructions {
text-align: center;
margin: 0 ($gutter / 2) $gutter;
}

.giftcard__actions {
position: relative;
border-top: 1px solid $colorBorder;
padding: $gutter ($gutter / 2);
text-align: center;
overflow: hidden;
}

.action-link {
position: absolute;
left: $gutter / 2;
top: 50%;
font-size: 0.875em;
font-weight: bold;
display: block;
text-transform: uppercase;
letter-spacing: .2em;
color: lighten($colorGiftText, 10%);
margin-top: -10px;

&:hover,
&:focus {
color: $colorGiftText;
}
}

.action-link__print {
display: inline-block;
vertical-align: baseline;
width: 17px;
height: 17px;
vertical-align: middle;
margin-right: 5px;
opacity: 0.25;
background: {
image: url('//cdn.shopify.com/s/assets/gift-card/icon-print-164daa1ae32d10d1f9b83ac21b6f2c70.png');
repeat: no-repeat;
position: 0 0;
}

.svg & {
background-image: url('//cdn.shopify.com/s/assets/gift-card/icon-print-6a10b2fb86d223b8c783c9696eaf4c31.svg');
}

.action-link:hover & {
opacity: 0.4;
}
}

.giftcard__footer {
text-align: center;
padding: ($gutter * 2) 0;
-webkit-animation: fadein 0.5s ease-in-out both 0.4s;
animation: fadein 0.5s ease-in-out both 0.4s
}

#QrCode {
img {
padding: $gutter;
border: 1px solid $colorBorder;
border-radius: 4px;
margin: 0 auto $gutter;
}
}


/*============================================================================
#Media Queries
==============================================================================*/

/*================ Medium-down width ================*/
@media screen and (max-width: 580px) {
.giftcard {
font-size: 12px;
}

.giftcard-header {
padding: $gutter 0;
}

.header-logo {
font-size: 2em;
}

.giftcard__border {
padding: $gutter / 2;
}

.giftcard__actions {
padding: $gutter / 2;
}

.giftcard__actions .btn {
width: 100%;
padding-left: 0;
padding-right: 0;
}

.action-link {
display: none;
}
}

/*================ Small width ================*/
@media screen and (max-width: 400px) {
.giftcard__amount strong {
text-shadow: 2px 2px 0 rgba(0,0,0,0.1);
}

.giftcard__wrap:before,
.giftcard__wrap:after {
display: none;
}

.giftcard__code {
font-size: .75em;
}

.giftcard__code--medium {
font-size: .65em;
}

.giftcard__code--small {
font-size: .55em;
}
}


/*================ Small height ================*/
@media screen and (max-height: 800px) {
.header-logo img {
max-height: 90px;
}
}


/*============================================================================
#Print Styles
==============================================================================*/
@media print {
@page {
margin: 0.5cm;
}

p, h2, h3 {
orphans: 3;
widows: 3;
}

h2, h3 {
page-break-after: avoid;
}

html, body {
background-color: #fff;
}

.giftcard-header {
padding: 10px 0;
}

.giftcard__content,
.giftcard__border {
border: 0 none;
}

.giftcard__actions,
.giftcard__wrap:before,
.giftcard__wrap:after,
.tooltip,
.add-to-apple-wallet {
display: none;
}

.giftcard__title {
float: none;
text-align: center;
}

.giftcard__code__text {
color: #555;
}

.shop-url {
display: block;
}

.logo {
color: #58686F;
}
}

/*============================================================================
#Keyframe Animations
==============================================================================*/
@-webkit-keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(2000px) rotate(10deg)
}

60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}

80% {
-webkit-transform: translateY(10px)
}

100% {
-webkit-transform: translateY(0) rotate(0deg)
}
}

@-ms-keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(2000px) rotate(10deg)
}

60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}

80% {
-webkit-transform: translateY(10px)
}

100% {
-webkit-transform: translateY(0) rotate(0deg)
}
}

@keyframes slideup {
0% {
opacity: 0;
-webkit-transform: translateY(2000px) rotate(10deg)
}

60% {
opacity: 1;
-webkit-transform: translateY(-30px)
}

80% {
-webkit-transform: translateY(10px)
}

100% {
-webkit-transform: translateY(0) rotate(0deg)
}
}

@-webkit-keyframes popup {
0% {
opacity: 0;
-webkit-transform: translateY(30px)
}

60% {
opacity: 1;
-webkit-transform: translateY(-10px)
}

80% {
-webkit-transform: translateY(2px)
}

100% {
-webkit-transform: translateY(0)
}
}

@-ms-keyframes popup {
0% {
opacity: 0;
-webkit-transform: translateY(30px)
}

60% {
opacity: 1;
-webkit-transform: translateY(-10px)
}

80% {
-webkit-transform: translateY(2px)
}

100% {
-webkit-transform: translateY(0)
}
}

@keyframes popup {
0% {
opacity: 0;
-webkit-transform: translateY(30px)
}

60% {
opacity: 1;
-webkit-transform: translateY(-10px)
}

80% {
-webkit-transform: translateY(2px)
}

100% {
-webkit-transform: translateY(0)
}
}

@-webkit-keyframes container-slide {
0% {
opacity: 0;
-webkit-transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(0deg)
}
}

@-ms-keyframes container-slide {
0% {
opacity: 0;
-webkit-transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(0deg)
}
}

@keyframes container-slide {
0% {
opacity: 0;
-webkit-transform: rotate(0deg)
}

100% {
-webkit-transform: rotate(0deg)
}
}

@-webkit-keyframes fadein {
0% {
opacity: 0
}

100% {
opacity: 100
}
}

@-ms-keyframes fadein {
0% {
opacity: 0
}

100% {
opacity: 100
}
}

@keyframes fadein {
0% {
opacity: 0
}

100% {
opacity: 100
}
}

0 Likes
Highlighted
Tourist
20 0 1

Hi  @JHKC 

 

Any suggestions?

 

~Thanks

Chris

 

0 Likes
Highlighted
Shopify Partner
1080 169 194

Would need a different code in the Gift_Card.liquid or gift-card.liquid file, this is just for styling, let me know!

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
20 0 1

Thanks for the reply @JHKC , Although I am not sure I am following what you mean..

0 Likes
Highlighted
Shopify Partner
1080 169 194

No worries, would you mind giving me Collaborator access so I can solve this on your code directly? Let me know so I can send the request.

- Did we solve your issue? Like & Mark As Solution to help the community
- Should you need any direct help: contact@jhkcreate.com
K&J
0 Likes
Highlighted
Tourist
20 0 1

@JHKC 

 

Please go ahead and request

thanks 

0 Likes