Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hi the community.
In Impulse, the parameters allow you tho choose a color for the font, and a different typo for heading and body.
I would like to be able to choose a different color for each.
I am a beginner in that matter, so I very need some help 🙂
Cheerz
Solved! Go to the solution
This is an accepted solution.
Hi @BigDream,
Because you are using an old version of the impulse theme so steps 2, 3, 4 cannot be performed.
I will guide again from step 2:
- Step 2: Go to assets > theme.scss.liquid , find 'font-family: $type_header_stack;' and add code: https://i.imgur.com/MZ7uXRK.png
Code: color: {{ settings.color_ex_header }};
- Step 3: Go to assets > theme.scss.liquid , find 'font-family: $type_base_stack;' and add code: https://i.imgur.com/UGURFvx.png
Code: color: {{ settings.color_ex_base }};
Hope it is clear to you.
Hi @BigDream,
Can you send me the screenshot of Customize color and code of the config/settings_schema.json file.
I will check it.
Hi @BigDream,
Please follow the steps:
- Step 1: Change code config/settings_schema.json : https://pastebin.com/fSp4m2gJ
- Step 2: Go to layout > theme.liquid file, find '--typeHeaderPrimary' and add code: https://i.imgur.com/2icA60d.png
Code:
--colorHeaderPrimary: settings.color_ex_header;
--colorBasePrimary: settings.color_ex_base;
- Step 3: Go to assets > theme.css file and add the code below the line 'font-family: var(--typeHeaderPrimary),var(--typeHeaderFallback);' at all places found. https://i.imgur.com/cq7hrW1.png
Code:
color: var(--colorHeaderPrimary);
- Step 4: Go to assets > theme.css file and add the code below the line 'font-family: var(--typeBasePrimary),var(--typeBaseFallback);' at all places found. https://i.imgur.com/VEfPMs0.png
Code:
color: var(--colorBasePrimary);
Hope it is clear to you.
Hi @LitCommerce
Unfortunatly, I'm stuck at step 2, since I can't find that type of code in Layout > theme.liquid.
I think I can find the equivalent in Assets > theme.scss.liquid as follows :
/*================ Font stack mixins ================*/
@mixin baseFontStack {
font-size: $type_base_size * 0.85;
font-family: $type_base_stack;
letter-spacing: $type_base_spacing;
line-height: $type_base_line_height;
@include media-query($medium-up) {
font-size: $type_base_size;
}
}
@mixin baseSmallFontStack {
font-size: $type_base_size * 0.85;
}
@mixin baseExtraSmallFontStack {
font-size: max($type_base_size * 0.7, 12px);
}
@mixin headingTextCenter {
@if ($type_header_text_center) {
text-align: center;
}
}
@mixin baseTextCenter {
@if ($type_body_text_center) {
text-align: center;
}
}
@mixin headingFontStack {
font-family: $type_header_stack;
font-weight: $type_header_weight;
letter-spacing: $type_header_spacing;
line-height: $type_header_line_height;
@if ($type_header_capitalize) {
text-transform: uppercase;
}
}
@mixin accentFontStack {
text-transform: uppercase;
letter-spacing: 0.3em;
}
@mixin accentFontSmallSize {
font-size: 0.75em;
}
Hi @BigDream,
Can you send me the source theme or staff account. I will check and guide you in detail.
Hi @LitCommerce
Here is the current version of the theme in wich I had already implemented the code from step 1 🙂
Thx a lot for your time !
This is an accepted solution.
Hi @BigDream,
Because you are using an old version of the impulse theme so steps 2, 3, 4 cannot be performed.
I will guide again from step 2:
- Step 2: Go to assets > theme.scss.liquid , find 'font-family: $type_header_stack;' and add code: https://i.imgur.com/MZ7uXRK.png
Code: color: {{ settings.color_ex_header }};
- Step 3: Go to assets > theme.scss.liquid , find 'font-family: $type_base_stack;' and add code: https://i.imgur.com/UGURFvx.png
Code: color: {{ settings.color_ex_base }};
Hope it is clear to you.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025