Shopify themes, liquid, logos, and UX
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
Hi @Jenny_Adamczak,
Can help you with that, shoot me an email
Thanks
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
Me too! Any advice gratefully received.
Hey @parisiem @dwilliamson4
Go to Online Store -> Themes-> Edit languages -> Gift Card
You can edit language there.
@parisiem
Could you send me the URL to your gift card?
Put this piece of code in your theme.scss file
.giftcard__title { text-transform: uppercase; }
Worked a treat. Thank you Denis!
Hey mate,
Is there a code I can use to change the whole text color?
Hey @doggoodz
Could you please send a link to your Gift Card?
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
Hi Kam,
I'm having the same issue. Wondering how you were able to resolve this? Thanks!
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>
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024