Hi, @UmairA
Oh yes, that makes sense. I will paste it below.
<!-- /templates/gift_card.liquid -->
{% layout none %}
{% assign formatted_initial_value = gift_card.initial_value | money_without_trailing_zeros: gift_card.currency %}
{% assign formatted_initial_value_stripped = formatted_initial_value | strip_html %}
<!doctype html>
<html class="template-giftcard no-js" lang="{{ request.locale.iso_code }}">
<head>
<!-- Basic page needs ================================================== -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
{% if settings.favicon %}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png" />
{% endif %}
<!-- Title and description ================================================== -->
<title>{{ 'gift_cards.issued.title' | t: value: formatted_initial_value_stripped, shop: shop.name }}</title>
<meta name="description" content="{{ 'gift_cards.issued.subtext' | t }}">
<!-- Helpers ================================================== -->
<link rel="canonical" href="{{ canonical_url }}">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="format-detection" content="telephone=no">
{{ 'timber.scss.css' | asset_url | stylesheet_tag }}
{{ 'theme.scss.css' | asset_url | stylesheet_tag }}
{{ 'gift-card.scss.css' | asset_url | stylesheet_tag }}
{{ 'modernizr.gift-card.js' | shopify_asset_url | script_tag }}
{{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }}
{{ content_for_header }}
</head>
<body>
<div class="wrapper">
<header class="giftcard-header" role="banner">
<div class="h1 header-logo" itemscope itemtype="http://schema.org/Organization">
<a href="{{ shop.url }}" itemprop="url">{{ shop.name }}</a>
</div>
<div class="shop-url">{{ shop.url }}</div>
</header>
<main class="giftcard" role="main">
<div class="giftcard__border{% if gift_card.expired or gift_card.enabled != true %} disabled{% endif %}">
<div class="giftcard__content">
<div class="giftcard__header">
<h2 class="h4 giftcard__title">{{ 'gift_cards.issued.subtext' | t }}</h2>
{% unless gift_card.enabled %}
<span class="giftcard__tag">{{ 'gift_cards.issued.disabled' | t }}</span>
{% endunless %}
{% assign gift_card_expiry_date = gift_card.expires_on | date: format: 'basic' %}
{% if gift_card.expired and gift_card.enabled %}
<span class="giftcard__tag">{{ 'gift_cards.issued.expired' | t: expiry: gift_card_expiry_date }}</span>
{% endif %}
{% if gift_card.expired != true and gift_card.expires_on and gift_card.enabled %}
<span class="giftcard__tag giftcard__tag--active">{{ 'gift_cards.issued.active' | t: expiry: gift_card_expiry_date }}</span>
{% endif %}
</div>
<div class="giftcard__wrap">
<img src="{{ 'Gift_card_Image.png' | asset_img_url: '1024x1024' }}" alt="Gift card illustration">
{% assign initial_value_size = formatted_initial_value | size %}
<div class="h1 giftcard__amount{% if initial_value_size > 6 %} giftcard__amount--medium{% endif %}">
{% if gift_card.balance != gift_card.initial_value %}
<span class="tooltip">
<span class="tooltip__label">{{ gift_card.balance | money }} <small>left</small></span>
</span>
{% endif %}
<strong>{{ formatted_initial_value }}</strong>
</div>
{% assign code_size = gift_card.code | format_code | size %}
<div class="giftcard__code{% if code_size <= 25 %} giftcard__code--small{% elsif code_size > 25 and code_size <= 30 %} giftcard__code--medium{% else %} giftcard__code--small{% endif %}" onclick="selectText('GiftCardDigits');">
<div class="giftcard__code__inner">
<strong class="giftcard__code__text" id="GiftCardDigits">{{ gift_card.code | format_code }}</strong>
</div>
</div>
</div>
<p class="giftcard__instructions">
{{ 'gift_cards.issued.redeem' | t }}
</p>
<div class="giftcard__actions">
<a href="{{ shop.url }}" class="btn" target="_blank">{{ 'gift_cards.issued.shop_link' | t }}</a>
<a href="#" class="action-link" onclick="window.print();">
<i class="action-link__print"></i><strong>{{ 'gift_cards.issued.print' | t }}</strong>
</a>
</div>
</div>
</div>
</main>
<footer class="giftcard__footer" role="contentinfo">
{% if gift_card.pass_url %}
<a class="add-to-apple-wallet" href="{{ gift_card.pass_url }}">
<img src="{{ 'gift-card/add-to-apple-wallet.svg' | shopify_asset_url }}" width="120" height="40" alt="{{ 'gift_cards.issued.add_to_apple_wallet' | t }}">
</a>
{% endif %}
</footer>
</div>
<script type="text/javascript">
/*============================================================================
Auto-select gift card code on click, based on ID passed to the function
- Use a different method depending on IE or others
==============================================================================*/
function selectText(element) {
var doc = document,
text = doc.getElementById(element);
if (doc.body.createTextRange) { // ms
var range = doc.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) { // moz, opera, webkit
var selection = window.getSelection(),
range = doc.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
}
</script>
</body>
</html>
