This is a technical change that should only be done by developers or very technical merchants. Reach out for assistance.
While it's fastest and easiest to use Givy's Dedicated Product Page to launch multi-currency gift cards, you may find that the limited flexibility and styling of this page won't work for your brand. Don't fret - let's build multi-currency into your existing theme!
Merchants who create their own PDP will need to hard-code gift card denominations into their product page. Changes to these denominations in the Givy admin will not be reflected on this page.
Step 1 - Create New Product Template
Since this process will involve hiding variants and setting gift card values manually, we will need a new product template to make our changes.
In your Shopify theme customizer, click on Home page, then select Products, and click to Create template.
In this example, we will call it gift-card-multicurrency and copy it from the Default product.
Step 2 - Remove Variant Selector & Price
Now, we want to remove any variant selector and price on the page. This is because we will be adding our own values depending on the selected Market.
For this theme, we will remove the Variant picker and Price, which will remove the list of gift card values, and will not show the default variant's price.
Step 3 - Add Custom Liquid Block
Next, we will insert a Custom Liquid block above the Quantity selector. You can choose to place this block anywhere on your product template, but we recommend above the buy buttons.
Step 4 - Add Custom Liquid
This step is the most technical one, and you may need to discuss it with your development team. Feel free to reach out if you're stuck and we may be able to assist.
The custom liquid will do a few things:
Detect the session's presentment currency (from Shopify Markets)
Display gift card denominations based on the values configured
Add the correct gift card amount in the selected currency
This will be a simple example using only Liquid. Your team can create something much more complex if required, and can style the selectors to match your theme.
{% comment %} IMPORTANT - set the product_form_id to target this form - may be different for your theme {% endcomment %}
{%- assign product_form_id = 'product-form-' | append: section.id -%}
<fieldset class="product-form__input radio_options givy_multi_currency_pdp">
<legend class="form__label">Amount</legend>
{% comment %} Determines the current session's currency code (three-letter) {% endcomment %}
{% assign givyCurr = localization.country.currency.iso_code %}
{% comment %} Handle every currency your store supports - add a "when" case for your currencies {% endcomment %}
{% case givyCurr %}
{% when 'CAD' %}
{% comment %} Decide the fixed denominations you want to offer here {% endcomment %}
{% assign givyAmountValues = "10,25,50,100,150,200,500" %}
{% comment %} Set the currency prefix here {% endcomment %}
{% assign givyPrefix = "CA$" %}
{% assign givyAmounts = givyAmountValues | split: "," %}
{% for givyAmount in givyAmounts %}
<input
type="radio"
id="amount-{{ givyAmount }}"
name="properties[_givy_custom_amount]"
value="{{ givyAmount }}"
form="{{ product_form_id }}"
{% if forloop.index == 1 %}checked{% endif %}
>
<label for="amount-{{ givyAmount }}">{{ givyPrefix }}{{ givyAmount }}</label>
{% endfor %}
{% when 'EUR' %}
{% comment %} Decide the fixed denominations you want to offer here {% endcomment %}
{% assign givyAmountValues = "10,25,50,100,150,200,500" %}
{% comment %} Set the currency prefix here {% endcomment %}
{% assign givyPrefix = "€" %}
{% assign givyAmounts = givyAmountValues | split: "," %}
{% for givyAmount in givyAmounts %}
<input
type="radio"
id="amount-{{ givyAmount }}"
name="properties[_givy_custom_amount]"
value="{{ givyAmount }}"
form="{{ product_form_id }}"
{% if forloop.index == 1 %}checked{% endif %}
>
<label for="amount-{{ givyAmount }}">{{ givyPrefix }}{{ givyAmount }}</label>
{% endfor %}
{% else %}
{% comment %} Handle any currencies you may have missed {% endcomment %}
{% assign givyAmountValues = "10,25,50,100,150,200" %}
{% assign givyAmounts = givyAmountValues | split: "," %}
{% for givyAmount in givyAmounts %}
<input
type="radio"
id="amount-{{ givyAmount }}"
name="properties[_givy_custom_amount]"
value="{{ givyAmount }}"
form="{{ product_form_id }}"
{% if forloop.index == 1 %}checked{% endif %}
>
<label for="amount-{{ givyAmount }}">{{ givyAmount }}</label>
{% endfor %}
{% endcase %}
</fieldset>
<style>
.form__input_border {
color: rgba(var(--color-foreground));
position: relative;
display: flex;
border-radius: var(--inputs-radius);
min-height: calc((var(--inputs-border-width) * 2) + 4.5rem);
}
.form__input_border:after {
pointer-events: none;
content: '';
position: absolute;
top: var(--inputs-border-width);
right: var(--inputs-border-width);
bottom: var(--inputs-border-width);
left: var(--inputs-border-width);
border: 0.1rem solid transparent;
border-radius: var(--inputs-radius);
box-shadow: 0 0 0 var(--inputs-border-width) rgba(var(--color-foreground), var(--inputs-border-opacity));
transition: box-shadow var(--duration-short) ease;
z-index: 1;
}
.form__input_border:before {
background: rgb(var(--color-background));
pointer-events: none;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: var(--inputs-radius-outset);
box-shadow: var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset)
var(--inputs-shadow-blur-radius) rgba(var(--color-shadow), var(--inputs-shadow-opacity));
z-index: -1;
}
.form__input {
color: currentColor;
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
font-size: 1.6rem;
font-weight: 500;
opacity: 0.85;
background-color: transparent;
border: 0;
padding: 0 1.5rem;
width: 100%;
flex-grow: 1;
-webkit-appearance: none;
appearance: none;
}
.form__textarea {
resize: none; /* for textarea */
padding: 1.5rem;
}
.conditional_input {
display: none;
}
.radio_options input[type="radio"] {
clip: rect(0, 0, 0, 0);
overflow: hidden;
position: absolute;
height: 1px;
width: 1px;
}
.radio_options input[type='radio'] + label {
border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));
background-color: rgb(var(--color-background));
color: rgba(var(--color-foreground));
border-radius: var(--variant-pills-radius);
color: rgb(var(--color-foreground));
display: inline-block;
margin: 0.7rem 0.5rem 0.2rem 0;
padding: 1rem 2rem;
font-size: 1.4rem;
letter-spacing: 0.1rem;
line-height: 1;
text-align: center;
transition: border var(--duration-short) ease;
cursor: pointer;
position: relative;
}
.radio_options input[type='radio']:checked + label {
background-color: rgb(var(--color-foreground));
color: rgb(var(--color-background));
}
</style>
Step 5 - Delete Gift Card Variants
The next step involves removing any denominations on the gift card product, and only allowing custom amounts. We'll also want to make sure this gift card product starts using the Default Product Page instead of the Dedicated Page (Multi-currency).
Open the gift card product in the Shopify admin
Delete all variants under "Amount" except for "Custom"
Save the product
In Givy, when looking at the gift card product, be sure that it is set to use the Default Product Page instead of the Dedicated Page.
Step 6 - Assign Gift Card to New Template
Now that our new product template is ready to go, we'll need to assign this gift card product to the new template.
Product templates can only be assigned on your published theme. If you created this on a backup theme, you will not be able to assign the template until the theme is published.