How To Change The Homepage H1 Tag from logo to text Under Theme "District"?

Store Design
,
1

Hello Everyone,

I am currently trying to change the H1 Tag in District theme since by default it is linked to the logo. However, I want to create a text for this H1 Tag leaving the same layout!

Thanks in advance :slightly_smiling_face:

2

Hi @dreamland11

Locate the “header.liquid” file and click on it to open the file in the code editor.

Find the H1 tag that’s currently wrapping the logo. It should look something like this:

#

Remove the H1 tag from around the logo.

Next, you can add a separate H1 tag with your desired text right below the logo code or anywhere else within the header section, like this:

# Your Custom Text Here

Now, you’ll need to add some CSS to style your custom H1 text. In the left sidebar, find the “theme.scss.liquid” or “styles.scss.liquid” file inside the “Assets” folder and add the following CSS code at the bottom of the file:

.custom-header-text {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin: 20px 0;
}

Feel free to customize the CSS code to adjust the appearance of the H1 text as per your preferences.

1 Like