How can I change my site header to h1 and alter font color and style?

Store Design
1

can anyone assist please , i need to change my site header (shop name) to h1 as currently it says header logo is h1 but i don’t have a logo and want the shop name to show as hi?

also need to change the font and font colour if possible ?

header.liquid below for my site

{% else %}
{% endif %} {% if section.settings.brand_type == 'image' %} {% if section.settings.logo_image and section.settings.logo_image != blank%} {{ section.settings.logo_image.alt | default: shop.name }} {% else %} {{shop.name | truncate: 25 }} {% endif %} {% elsif section.settings.brand_text != "" %} {{ section.settings.brand_text }} {% else %} {{shop.name | truncate: 25 }} {% endif %} {% if template == 'index' %}

https://ljvapes.co.uk

2

Hi @Ljvapes ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:

To change the store name:

You can go Settings → Store details → Edit → Change your store name

PageFlyKate_0-1676481234525.png
PageFlyKate_0-1676481234525.png975×175 25.9 KB

To chang font color:

Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme-styles-setting.css->paste below code at the bottom of the file:

.logo-title {
   color: black;
}

Note: You can chang the color value to match your store

Hope my answer will help you

3

Hiya my apologies if I’ve not explained correctly . I wasn’t wanting to change the title of my store . I’m wanting to make the store name h1 as it says the logo is h1 but I don’t have a store logo on the page so not sure if this is effecting my seo ?

Also thank you for the font code below but is there one I can change the colour and the font?

4

Sorry for the misunderstanding.

To change your site header to use an H1 tag and modify the font and font color, you can modify the code in your header.liquid file as follows:

  • Replace the existing code for the header logo with an H1 tag that contains your shop name. Here’s an example of what the updated code might look like:
# 
  Your Shop Name Here
  • In the updated code, you can replace “Your Shop Name Here” with your actual shop name. You can also modify the font-family and color styles as desired. For example, you could change “Arial” to a different font and update the color code to match your site’s color scheme.
5

that’s great thank you so much for the assist.

is there any way to have it change on mobile devices also please as its only changed on desktop ?

6

To ensure that your shop name is displayed as an H1 tag on mobile devices, you can modify this class to take up the full 12 columns. Here’s an example of what the updated code might look like:

# 
  Your Shop Name Here

In the updated code, I’ve added the “col-md-3” class to specify that the header logo should take up 3 out of 12 columns on medium screens (i.e., desktop devices). This should ensure that the header logo appears as expected on desktop devices while allowing the H1 tag with your shop name to take up the full 12 columns on mobile devices.

7

Thank you , the font hasn’t changed though on mobile

this is what i have input to the header. Liquid

LJVapes

8

It’s possible that the font you specified (Cinzel-400) is not supported on mobile devices, which could be why the font hasn’t changed on mobile.

9

Ah I see thank you for that and i really appreciate the help with this