How can I customize the text on gift cards?

Store Design
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 -%}
+