How can I customize the text on gift cards?

[Jenny_Adamczak]

Hey there!

Is there any way to change the text on Gift Cards? Please see the attached image to see which text I mean.

Thank you

[Denis_A]

Hi @Jenny_Adamczak,

Can help you with that, shoot me an email

Thanks

[dwilliamson4]

Hey @Denis_A

I'm also looking for help with adjusting the messaging in the gift card text. Hoping you could help me out!

Thanks,

Devon

[parisiem]

Me too! Any advice gratefully received.

[Denis_A]

Hey @parisiem @dwilliamson4 

Go to Online Store -> Themes-> Edit languages -> Gift Card
You can edit language there.

[parisiem]

Thank you but is there a way to edit the text itself so 'Here's your gift
card!' is in CAPS?

[Denis_A]

@parisiem 
Could you send me the URL to your gift card?

[parisiem]

https://checkout.shopify.com/gift_cards/3992191089/preview

[Denis_A]

@parisiem 

Put this piece of code in your theme.scss file

.giftcard__title {
  text-transform: uppercase; 
}

[parisiem]

Worked a treat. Thank you Denis!

[doggoodz]

Hey mate,

Is there a code I can use to change the whole text color?

[Denis_A]

Hey @doggoodz 
Could you please send a link to your Gift Card?

[Kamal81]

Hi @Denis_A 

Thanks for your support for the community here. 

I'm trying to change the font of the title on the gift card page but it seems that I need to add it to Giftcard css file, right? and why I have to do that if the font is already installed in my store and showing in all pages.?

Please advise.

Kam

[vanessaarroyo]

Hi Kam,

I'm having the same issue. Wondering how you were able to resolve this? Thanks!

[Kamal81]

Hey Vanessa,

I got some help from Shopify Plus team and they send me this solution:  Note: you may need to change some details to fit with your store. Copy the code below and paste it on diffread.com to show you all the steps.

diff --git a/reskin/120371445823/assets/plus-gift-card.css.liquid b/reskin/120371445823/assets/plus-gift-card.css.liquid
new file mode 100644
index 00000000000..c26ded35cdd
--- /dev/null
+++ b/reskin/120371445823/assets/plus-gift-card.css.liquid
@@ -0,0 +1,29 @@
+{{ settings.plus_gift_card_font_header | font_face }}
+{{ settings.plus_gift_card_font_body | font_face }}
+
+body {
+  font-family: {{ settings.plus_gift_card_font_body.family }};
+  font-style: {{ settings.plus_gift_card_font_body.style }};
+  font-weight: {{ settings.plus_gift_card_font_body.weight }};
+}
+
+h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
+  font-family: {{ settings.plus_gift_card_font_header.family }};
+  font-style: {{ settings.plus_gift_card_font_header.style }};
+  font-weight: {{ settings.plus_gift_card_font_header.weight }};
+}
+
+.template-giftcard .btn {
+  font-size: 1em;
+  background-color: transparent;
+  border-color: {{ settings.plus_gift_card_button_border_hover_color }};
+  color: {{ settings.plus_gift_card_button_text_color }};
+  font-family: {{ settings.plus_gift_card_font_button.family }};
+  font-style: {{ settings.plus_gift_card_font_button.style }};
+  font-weight: {{ settings.plus_gift_card_font_button.weight }};
+}
+
+.template-giftcard .btn:hover {
+  background-color: {{ settings.plus_gift_card_button_border_hover_color }};
+  color: {{ settings.plus_gift_card_button_text_hover_color }};
+}
diff --git a/reskin/120371445823/config/settings_schema.json b/reskin/120371445823/config/settings_schema.json
index b6a1d54e8db..731134e8664 100644
--- a/reskin/120371445823/config/settings_schema.json
+++ b/reskin/120371445823/config/settings_schema.json
@@ -1521,5 +1521,60 @@
         "default": true
       }
     ]
+  },
+  {
+    "name": "[Plus] Gift Card Page",
+    "settings": [
+      {
+        "type": "checkbox",
+        "id": "plus_enable_gift_card_styles",
+        "label": "Enable custom Gift Card styles",
+        "default": true
+      },
+      {
+        "type": "header",
+        "content": "General"
+      },
+      {
+        "type": "font_picker",
+        "id": "plus_gift_card_font_header",
+        "label": "Header Font",
+        "default": "roboto_condensed_n7"
+      },
+      {
+        "type": "font_picker",
+        "id": "plus_gift_card_font_body",
+        "label": "Body Font",
+        "default": "roboto_condensed_n4"
+      },
+      {
+        "type": "header",
+        "content": "Buttons"
+      },
+      {
+        "type": "font_picker",
+        "id": "plus_gift_card_font_button",
+        "label": "Button Font",
+        "default": "roboto_condensed_n4"
+      },
+      {
+        "type": "color",
+        "id": "plus_gift_card_button_border_hover_color",
+        "label": "Border & hover background color",
+        "default": "#252525"
+      },
+      {
+        "type": "color",
+        "id": "plus_gift_card_button_text_color",
+        "label": "Text color",
+        "default": "#252525"
+      },
+      {
+        "type": "color",
+        "id": "plus_gift_card_button_text_hover_color",
+        "label": "Text color hover",
+        "default": "#ffffff"
+      }
+    ]
   }
 ]
\ No newline at end of file
diff --git a/reskin/120371445823/layout/gift_card.liquid b/reskin/120371445823/layout/gift_card.liquid
index 92a210d73b2..cb69d8f4c09 100644
--- a/reskin/120371445823/layout/gift_card.liquid
+++ b/reskin/120371445823/layout/gift_card.liquid
@@ -16,6 +16,10 @@
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
   {{ 'gift-card.scss.css' | asset_url | stylesheet_tag }}
 
+  {%- if settings.plus_enable_gift_card_styles -%}
+    {{ 'plus-gift-card.css' | asset_url | stylesheet_tag }}
+  {%- endif -%}
+
   <script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}" defer="defer"></script>
 
   <script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>