I’m in shopify dawn theme, want to add more heading styles (like h1, h2, h3), currently only two in theme settings
Also want to add font, how to add?
Big thanks if anyone could help.
Hello @Admin1 ,
Default, the Dawn theme only exposes one “Headings” font setting (which applies globally to all heading tags like h1, h2, h3, etc.) and one “Body” font setting. If you want separate controls for h1, h2, h3 (or more) in the theme editor, you’ll need to:
Go to your theme’s code:
- Online Store → Themes → Dawn → Actions → Edit Code
- Find the existing
typographysection in settings_schema.json.
“name”: “t:settings_schema.typography.name”, - Add more heading font pickers:
{
"type": "font_picker",
"id": "h1_font",
"label": "H1 Font"
},
{
"type": "font_picker",
"id": "h2_font",
"label": "H2 Font"
},
{
"type": "font_picker",
"id": "h3_font",
"label": "H3 Font"
}
- paste below code n theme.liquid
<style>
h1 {
font-family: {{ settings.h1_font.family }}, {{ settings.h1_font.fallback_families }};
}
h2 {
font-family: {{ settings.h2_font.family }}, {{ settings.h2_font.fallback_families }};
}
h3 {
font-family: {{ settings.h3_font.family }}, {{ settings.h3_font.fallback_families }};
}
</style>
- Save
- Save your files.
- Go back to your theme editor → Theme Settings → Typography.
- You should now see separate font pickers for
H1 Font,H2 Font, andH3 Font.
Thanks for quick reply @Ankit_Shrivastava. Seems sth wrong. Not working.
Modify setting schema code in the settings_schema.json file.
"settings": [
{
"type": "header",
"content": "t:settings_schema.typography.settings.header__1.content"
},
{
"type": "font_picker",
"id": "type_header_font",
"default": "assistant_n4",
"label": "t:settings_schema.typography.settings.type_header_font.label"
},
{
"type": "font_picker",
"id": "h1_font",
"label": "H1 Font",
"default": "assistant_n4",
},
{
"type": "font_picker",
"id": "h2_font",
"label": "H2 Font",
"default": "assistant_n4",
},
{
"type": "font_picker",
"id": "h3_font",
"label": "H3 Font",
"default": "assistant_n4",
},
{
"type": "range",
"id": "heading_scale",
"min": 100,
"max": 150,
"step": 5,
"unit": "%",
"label": "t:settings_schema.typography.settings.heading_scale.label",
"default": 100
},
{
"type": "header",
"content": "t:settings_schema.typography.settings.header__2.content"
},
{
"type": "font_picker",
"id": "type_body_font",
"default": "assistant_n4",
"label": "t:settings_schema.typography.settings.type_body_font.label"
},
{
"type": "range",
"id": "body_scale",
"min": 100,
"max": 130,
"step": 5,
"unit": "%",
"label": "t:settings_schema.typography.settings.body_scale.label",
"default": 100
}
]
Modify theme.liquid file
- find settings.type_body_font | font_face: font_display: ‘swap’
and add the below code
{{ settings.h2_font | font_face: font_display: ‘swap’ }}
complete is look like
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ settings.h1_font | font_face: font_display: 'swap' }}
{{ settings.h2_font | font_face: font_display: 'swap' }}
{{ settings.h3_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}
- Find unless settings.type_body_font.system?
Replace with below code
{%- unless settings.type_body_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.h1_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.h2_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.h3_font | font_url }}" type="font/woff2" crossorigin>
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
{% comment %}theme-check-disable AssetPreload{% endcomment %}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.h1_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.h2_font | font_url }}" type="font/woff2" crossorigin>
<link rel="preload" as="font" href="{{ settings.h3_font | font_url }}" type="font/woff2" crossorigin>
{% comment %}theme-check-enable AssetPreload{% endcomment %}
{%- endunless -%}
- Find :root {
Add below code in this
--font-body-family1: {{ settings.h1_font.family }}, {{ settings.h1_font.fallback_families }};
--font-body-style1: {{ settings.h1_font.style }};
--font-body-weight1: {{ settings.h1_font.weight }};
--font-body-weight-bold1: {{ settings.h1_font.weight | plus: 300 | at_most: 1000 }};
--font-body-family2: {{ settings.h2_font.family }}, {{ settings.h2_font.fallback_families }};
--font-body-style2: {{ settings.h2_font.style }};
--font-body-weight2: {{ settings.h2_font.weight }};
--font-body-weight-bold2: {{ settings.h2_font.weight | plus: 300 | at_most: 1000 }};
--font-body-family3: {{ settings.h3_font.family }}, {{ settings.h3_font.fallback_families }};
--font-body-style3: {{ settings.h3_font.style }};
--font-body-weight3: {{ settings.h3_font_font.weight }};
--font-body-weight-bold3: {{ settings.h3_font.weight | plus: 300 | at_most: 1000 }};
- Add below css just before closing of /head
<style>
body h1 {
font-family: var(--font-body-family1) !important;
font-style: var(--font-body-style1) !important;
font-weight: var(--font-body-weight1) !important;
}
body h2 {
font-family: var(--font-body-family2) !important;
font-style: var(--font-body-style2) !important;
font-weight: var(--font-body-weight2) !important;
}
body h3 {
font-family: var(--font-body-family3) !important;
font-style: var(--font-body-style3) !important;
font-weight: var(--font-body-weight3) !important;
}
</style>
- Save and add different fonts through customization.