How can I customize the text on gift cards?

Store Design
1

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

2

Hi @Jenny_Adamczak ,

Can help you with that, shoot me an email

Thanks

3

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

4

Me too! Any advice gratefully received.

5

Hey @parisiem @dwilliamson4

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

2 Likes
6

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

7

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

8

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

9

@parisiem

Put this piece of code in your theme.scss file

.giftcard__title {
  text-transform: uppercase; 
}
1 Like
10

Worked a treat. Thank you Denis!

11

Hey mate,

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

12

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

13

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

14

Hi Kam,

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

15

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 -%}
+
1 Like