Craft Theme - hard return in heading

[CCJ1983]

Hello - I'd like to use richtext to create hard returns for headings in the Craft theme, but when I try some of the solutions listed for other themes, I'm not able to make the same changes in this theme.

For example, I'd like this to read:

Our nesest collaboration: <hrt>

Harte Outdoor Lighting

[DaisyVo]

Hi @CCJ1983 

I completely get where you're coming from—sometimes getting the formatting to look just right in Shopify themes like Craft can be tricky. Let’s break it down and find a solution to help you achieve the hard return for your headings.

Why the Craft Theme Handles Headings Differently

The Craft theme has its own coding structure, which might not fully support certain rich text features out of the box. What you're describing—a hard return within a heading—usually requires custom changes to the theme’s code since Shopify themes typically treat headings as single-line elements.

How to Add a Hard Return (Line Break)

To achieve the desired formatting for your heading:

1-Edit the Theme Code:

• Go to Online Store > Themes > Actions > Edit Code.
• Open the file where your heading is defined, which is often located in:
• Sections (e.g., header.liquid or featured-banner.liquid), or
• Snippets (e.g., rich-text.liquid).
• Look for the heading HTML tag, such as <h1> or <h2>.

2-Insert <br> for a Line Break:

• Modify your heading text by adding a <br> tag where you want the break. For example:
  <h1>Our newest collaboration:<br>Harte Outdoor Lighting</h1>
• Save your changes and preview your theme to ensure it looks as expected.

3-Use Rich Text Fields (If Available):

• If your theme allows rich text editing in the customizer, you can manually include a <br> tag within the heading text in your settings.

Considerations for Custom Styling

If adding a hard return impacts your design or spacing:

Use CSS adjustments. For example, you can add custom CSS to ensure the line break aligns perfectly with your theme’s style:

h1 {

  line-height: 1.5; /* Adjust spacing */

}

•  
• Add this CSS in Online Store > Themes > Edit Code > Assets > base.css or similar.

What If This Doesn't Work?

If these steps seem too technical or don’t yield the results you need:

• Reach out to a Shopify Expert to tweak your theme.
• Post in the Shopify Community or contact the Craft theme developer directly for guidance.

If you need any other assistance, I am willing to help.
Best regards,
Daisy.

[CCJ1983]

Hi - I've looked in the areas you recommended, and thanks!

Tried a
in the Image Heading, but got an error message that this wasn't
allowed.

There was nothing in the Snippets related to rich text.

I'm not a coder but certainly know enough to follow instructions. Here's
the code in the Image Banner I'm trying to adjust:



"blocks": [

{

"type": "heading",

"name": "t:sections.image-banner.blocks.heading.name",

"limit": 1,

"settings": [

{

"type": "inline_richtext",

"id": "heading",



"label":
"t:sections.image-banner.blocks.heading.settings.heading.label"

},

{

"type": "select",

"id": "heading_size",

"options": [

{

"value": "h2",

"label": "t:sections.all.heading_size.options__1.label"

},

{

"value": "h1",

"label": "t:sections.all.heading_size.options__2.label"

},

{

"value": "h0",

"label": "t:sections.all.heading_size.options__3.label"

}

],

"default": "h1",

"label": "t:sections.all.heading_size.label"

}

]

},

{

"type": "text",

"name": "t:sections.image-banner.blocks.text.name",

"limit": 1,

"settings": [

{

"type": "inline_richtext",

"id": "text",

"default": "Give customers details about the banner image(s) or
content on the template.",

"label": "t:sections.image-banner.blocks.text.settings.text.label"

},

{

"type": "select",

"id": "text_style",

"options": [

{

"value": "body",

"label":
"t:sections.image-banner.blocks.text.settings.text_style.options__1.label"

},

{

"value": "subtitle",

"label":
"t:sections.image-banner.blocks.text.settings.text_style.options__2.label"

},

{

"value": "caption-with-letter-spacing",

"label":
"t:sections.image-banner.blocks.text.settings.text_style.options__3.label"

}

],

"default": "body",

"label":
"t:sections.image-banner.blocks.text.settings.text_style.label"

}

]

},

{