How can I change H2 headings to H3 on my website without altering the style?

Technical Q&A
1

Hello team!

Hoping you can help me :slightly_smiling_face:

How can I change these headings to be H3 headings, but keep the current styling they have now (H2)

https://www.exalt.co.uk/collections/cold-pressed-juice

CWv1988_0-1655242864870.png
CWv1988_0-1655242864870.png2550×706 71.4 KB

It is the heading “as seen in” i’d like to make this change to all the collection page template

I think the content block is
template–14684440100979__164590865331a21f30

but I’m not sure what to do next…?\

Thank so much

Dan

2

@CWv1988 - h2 to h3 conversion is possible by editing the code, check if you have an option to convert it to h3 in customize settings.

If no then code editing is needed for this section and you will need to edit this section code file.

3

Hi @CWv1988 ,

Please go to heading-section.liquid file, find ‘heading-section__heading’, you can manually change h2 => h3, it will work fine.

Hope it helps!

4

Hello, thank you for this

I just want to change the ONE heading on the collection page template to be H3, I am happy for the other headings to stay as H2 - is that possible?

Thank you very much

p,s i can’t see that liquid file?

CWv1988_0-1655327363460.png
CWv1988_0-1655327363460.png1160×1380 214 KB

5

Hi @CWv1988 ,

You just need to create a new section and change it, anything is possible.

Please send me the code of index__heading.liquid file, I will help you check and guide it in detail

6

You’re the best, thank you!

{% comment %}
** Heading **
{% endcomment %}

{%- assign preheading = section.settings.preheading -%}
{%- assign title = section.settings.title -%}
{%- assign subheading = section.settings.subheading -%}

{% comment %} Is the color set to transparent? {% endcomment %}
{%- assign heading_alpha = section.settings.heading_color | color_extract: ‘alpha’ -%}
{%- assign preheading_alpha = section.settings.preheading_color | color_extract: ‘alpha’ -%}
{%- assign subheading_alpha = section.settings.subheading_color | color_extract: ‘alpha’ -%}
{%- assign background_alpha = section.settings.background | color_extract: ‘alpha’ -%}
{%- assign gradient_alpha = section.settings.gradient | color_extract: ‘alpha’ -%}

{% comment %} Section specific CSS {% endcomment %}
{% capture section_css -%}

.section {
background-image: linear-gradient({{ section.settings.gradient_rotation }}deg, rgba(255,255,255,0), {{ section.settings.gradient }});
background-color: {%- if background_alpha != 0 -%}{{ section.settings.background }}{%- endif -%};
}

.heading-section__heading {
color: {%- if heading_alpha != 0 -%}{{ section.settings.heading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}

.heading-section__preheading {
color: {%- if preheading_alpha != 0 -%}{{ section.settings.preheading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}

.heading-section__subheading {
color: {%- if subheading_alpha != 0 -%}{{ section.settings.subheading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}

{%- endcapture -%}

{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
padding-left: {{ section.settings.padding_left }}px;
padding-right: {{ section.settings.padding_right }}px;
{% if section.settings.width == ‘wide’ -%}
width: 100%;
{%- elsif section.settings.width == ‘half’ -%}
width: 50%;
{%- endif %}
}

{% render ‘css-loop’,
css: section_css,
id: section.id
%}
{% render ‘css-loop’,
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}

{% comment %} HTML markup {% endcomment %}
{% if title != blank or subheading != blank or preheading != blank %}

{% if preheading != blank %}
{{ preheading }}
{% endif %}

{% if title != blank %}

{{ title }}

{% endif %}

{% if subheading != blank %}

{{ subheading }}
{% endif %}

{% if settings.display_heading_divider == true %}

{% endif %}
{% endif %}

{% schema %}
{
“name”: “Heading”,
“class”: “heading-section”,
“settings”: [
{
“type”: “richtext”,
“id”: “preheading”,
“label”: “Preheading”,
“default”: “

Add a preheading

”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Heading”,
“default”: “Section heading”
},
{
“type”: “richtext”,
“id”: “subheading”,
“label”: “Subheading”,
“default”: “

Additional text or description of section

”
},
{
“type”: “header”,
“content”: “Text colors”
},
{
“type”: “color”,
“id”: “preheading_color”,
“label”: “Preheading”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “color”,
“id”: “heading_color”,
“label”: “Heading”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “color”,
“id”: “subheading_color”,
“label”: “Subheading”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “header”,
“content”: “Background”
},
{
“type”: “color”,
“id”: “background”,
“label”: “Background”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “color”,
“id”: “gradient”,
“label”: “Gradient”,
“default”: “rgba(0,0,0,0)”
},
{
“type”: “range”,
“id”: “gradient_rotation”,
“label”: “Gradient rotation”,
“min”: 0,
“max”: 180,
“step”: 10,
“default”: 0,
“unit”: “deg”
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “select”,
“id”: “heading_alignment”,
“label”: “Text alignment”,
“options”: [
{
“value”: “start”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “end”,
“label”: “Right”
}
],
“default”: “center”
},
{
“type”: “select”,
“id”: “vertical_spacing”,
“label”: “Vertical spacing”,
“options”: [
{
“value”: “small”,
“label”: “Small”
},
{
“value”: “medium”,
“label”: “Medium”
},
{
“value”: “large”,
“label”: “Large”
}
],
“default”: “medium”
},
{
“type”: “select”,
“id”: “width”,
“label”: “Width”,
“default”: “standard”,
“options”: [
{
“value”: “half”,
“label”: “Half”
},
{
“value”: “standard”,
“label”: “Standard”
},
{
“value”: “wide”,
“label”: “Wide”
}
]
},
{
“type”: “range”,
“id”: “padding_top”,
“label”: “Top spacing”,
“min”: 0,
“max”: 80,
“default”: 20,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_bottom”,
“label”: “Bottom spacing”,
“min”: 0,
“max”: 80,
“default”: 20,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_left”,
“label”: “Left spacing”,
“min”: 0,
“max”: 80,
“default”: 0,
“unit”: “px”
},
{
“type”: “range”,
“id”: “padding_right”,
“label”: “Right spacing”,
“default”: 0,
“min”: 0,
“max”: 80,
“unit”: “px”
},
{
“type”: “select”,
“id”: “animation”,
“label”: “Animation”,
“default”: “none”,
“options”: [
{
“value”: “none”,
“label”: “None”
},
{
“value”: “fadeIn”,
“label”: “Fade in”
},
{
“value”: “fadeInDown”,
“label”: “Fade in down”
},
{
“value”: “fadeInLeft”,
“label”: “Fade in left”
},
{
“value”: “fadeInRight”,
“label”: “Fade in right”
},
{
“value”: “slideInLeft”,
“label”: “Slide in left”
},
{
“value”: “slideInRight”,
“label”: “Slide in right”
},
{
“value”: “zoomIn”,
“label”: “Zoom in”
}
]
},
{
“type”: “header”,
“content”: “Advanced”
},
{
“type”: “paragraph”,
“content”: “Learn more”
},
{
“type”: “text”,
“id”: “css_class”,
“label”: “CSS Class”
},
{
“type”: “textarea”,
“id”: “custom_css”,
“label”: “Custom CSS”
}
],
“presets”: [
{
“name”: “Heading”,
“category”: “Layout”,
“settings”: {

}
}
]
}
{% endschema %}

7

Hi @CWv1988 ,

Please ‘Add a new section’ and create a new file with the name ‘index__heading_new.liquid’

Screenshot.png
Screenshot.png1069×336 26.9 KB

Then paste the whole code below:

{% comment %}
** Heading **
{% endcomment %}

{%- assign preheading = section.settings.preheading -%}
{%- assign title = section.settings.title -%}
{%- assign subheading = section.settings.subheading -%}

{% comment %} Is the color set to transparent? {% endcomment %}
{%- assign heading_alpha = section.settings.heading_color | color_extract: 'alpha' -%}
{%- assign preheading_alpha = section.settings.preheading_color | color_extract: 'alpha' -%}
{%- assign subheading_alpha = section.settings.subheading_color | color_extract: 'alpha' -%}
{%- assign background_alpha = section.settings.background | color_extract: 'alpha' -%}
{%- assign gradient_alpha = section.settings.gradient | color_extract: 'alpha' -%}

{% comment %} Section specific CSS {% endcomment %}
{% capture section_css -%}

.section {
background-image: linear-gradient({{ section.settings.gradient_rotation }}deg, rgba(255,255,255,0), {{ section.settings.gradient }});
background-color: {%- if background_alpha != 0 -%}{{ section.settings.background }}{%- endif -%};
}

.heading-section__heading {
color: {%- if heading_alpha != 0 -%}{{ section.settings.heading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}

.heading-section__preheading {
color: {%- if preheading_alpha != 0 -%}{{ section.settings.preheading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}

.heading-section__subheading {
color: {%- if subheading_alpha != 0 -%}{{ section.settings.subheading_color }}{%- else -%}{{ settings.heading_color }}{%- endif -%};
}

{%- endcapture -%}

{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
padding-left: {{ section.settings.padding_left }}px;
padding-right: {{ section.settings.padding_right }}px;
{% if section.settings.width == 'wide' -%}
width: 100%;
{%- elsif section.settings.width == 'half' -%}
width: 50%;
{%- endif %}
}

{% render 'css-loop',
css: section_css,
id: section.id
%}
{% render 'css-loop',
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}

{% comment %} HTML markup {% endcomment %}
{% if title != blank or subheading != blank or preheading != blank %}

  {% endif %}

  {% schema %}
  {
  "name": "Heading New",
  "class": "heading-section",
  "settings": [
  {
  "type": "richtext",
  "id": "preheading",
  "label": "Preheading",
  "default": "

Add a preheading

"
  },
  {
  "type": "text",
  "id": "title",
  "label": "Heading",
  "default": "Section heading"
  },
  {
  "type": "richtext",
  "id": "subheading",
  "label": "Subheading",
  "default": "

Additional text or description of section

"
  },
  {
  "type": "header",
  "content": "Text colors"
  },
  {
  "type": "color",
  "id": "preheading_color",
  "label": "Preheading",
  "default": "rgba(0,0,0,0)"
  },
  {
  "type": "color",
  "id": "heading_color",
  "label": "Heading",
  "default": "rgba(0,0,0,0)"
  },
  {
  "type": "color",
  "id": "subheading_color",
  "label": "Subheading",
  "default": "rgba(0,0,0,0)"
  },
  {
  "type": "header",
  "content": "Background"
  },
  {
  "type": "color",
  "id": "background",
  "label": "Background",
  "default": "rgba(0,0,0,0)"
  },
  {
  "type": "color",
  "id": "gradient",
  "label": "Gradient",
  "default": "rgba(0,0,0,0)"
  },
  {
  "type": "range",
  "id": "gradient_rotation",
  "label": "Gradient rotation",
  "min": 0,
  "max": 180,
  "step": 10,
  "default": 0,
  "unit": "deg"
  },
  {
  "type": "header",
  "content": "Layout"
  },
  {
  "type": "select",
  "id": "heading_alignment",
  "label": "Text alignment",
  "options": [
  {
  "value": "start",
  "label": "Left"
  },
  {
  "value": "center",
  "label": "Center"
  },
  {
  "value": "end",
  "label": "Right"
  }
  ],
  "default": "center"
  },
  {
  "type": "select",
  "id": "vertical_spacing",
  "label": "Vertical spacing",
  "options": [
  {
  "value": "small",
  "label": "Small"
  },
  {
  "value": "medium",
  "label": "Medium"
  },
  {
  "value": "large",
  "label": "Large"
  }
  ],
  "default": "medium"
  },
  {
  "type": "select",
  "id": "width",
  "label": "Width",
  "default": "standard",
  "options": [
  {
  "value": "half",
  "label": "Half"
  },
  {
  "value": "standard",
  "label": "Standard"
  },
  {
  "value": "wide",
  "label": "Wide"
  }
  ]
  },
  {
  "type": "range",
  "id": "padding_top",
  "label": "Top spacing",
  "min": 0,
  "max": 80,
  "default": 20,
  "unit": "px"
  },
  {
  "type": "range",
  "id": "padding_bottom",
  "label": "Bottom spacing",
  "min": 0,
  "max": 80,
  "default": 20,
  "unit": "px"
  },
  {
  "type": "range",
  "id": "padding_left",
  "label": "Left spacing",
  "min": 0,
  "max": 80,
  "default": 0,
  "unit": "px"
  },
  {
  "type": "range",
  "id": "padding_right",
  "label": "Right spacing",
  "default": 0,
  "min": 0,
  "max": 80,
  "unit": "px"
  },
  {
  "type": "select",
  "id": "animation",
  "label": "Animation",
  "default": "none",
  "options": [
  {
  "value": "none",
  "label": "None"
  },
  {
  "value": "fadeIn",
  "label": "Fade in"
  },
  {
  "value": "fadeInDown",
  "label": "Fade in down"
  },
  {
  "value": "fadeInLeft",
  "label": "Fade in left"
  },
  {
  "value": "fadeInRight",
  "label": "Fade in right"
  },
  {
  "value": "slideInLeft",
  "label": "Slide in left"
  },
  {
  "value": "slideInRight",
  "label": "Slide in right"
  },
  {
  "value": "zoomIn",
  "label": "Zoom in"
  }
  ]
  },
  {
  "type": "header",
  "content": "Advanced"
  },
  {
  "type": "paragraph",
  "content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
  },
  {
  "type": "text",
  "id": "css_class",
  "label": "CSS Class"
  },
  {
  "type": "textarea",
  "id": "custom_css",
  "label": "Custom CSS"
  }
  ],
  "presets": [
  {
  "name": "Heading New",
  "category": "Layout",
  "settings": {

  }
  }
  ]
  }
  {% endschema %}

Now, you just need to go to Customize and add ‘Heading New’ section, it will work fine.

8

ahhhh you hero! thanks SO much!! :smiling_face_with_sunglasses:

9

Final question, how do I change the headings on the Yotpo fly out widget to be H4?

You can get the widget to show on the fly out on the left side

CWv1988_2-1655455628374.png
CWv1988_2-1655455628374.png1078×1232 191 KB

We need to change these headings from H2 → H4

CWv1988_0-1655455498798.png
CWv1988_0-1655455498798.png1208×936 129 KB

Thank you so so much. Let me know if you want me to move this to a new thread so i can bump your ‘solution score’ :slightly_smiling_face:

10

Hi @CWv1988 ,

This is managed by the app so you need to contact the app directly, they will guide you to change it.

It wouldn’t be possible if someone else changed it.

Hope it helps!

11

how to implement in blogger? someone may to teach me?