How to add line breaks in Shopify custom sections and settings on a per viewport basis

When building custom theme sections, one of the main advantages is that you and your team can go in and modify site content directly, without the need for a developer or any code changes. (this has always been true for basic pages, using the rich text editor (“RTE” or “WYSIWYG editor”), but the sections feature expanded this capability to include custom content types in custom layouts.

There are two types available for text fields: the plaintext, and aptly named, “text”, and a lightweight RTE field, called “richtext”. 

The richtext field allows for italics, bold, and links. Additionally, the output is always wrapped in html tags (so make sure to set the default to something like “<p>Default Text</p>” rather than just the “Default Text”).

Oftentimes, a richtext field isn’t necessary and the standard text field will work just fine. However, in both cases, there’s limited flexibility when it comes to defining line breaks - how the text wraps, especially at various viewports (device sizes).

There’s some limited options in CSS - we have the word-wrap property, and the white-space property, which are helpful - but sometimes it makes sense to be able to manually define where the line should break at each viewport.

Here’s the solution we use now:

The <br> HTML tag, literally “line break” tag, is made for this. Since it’s the same as any other HTML tag, it can have classes, with different attributes at different breakpoints. 

So, we can use <br class=”hide-mobile”>, along with the css rule:
@media only screen and (max-width: 600px) {
  .hide-mobile {
    Display: none;
  }
}

This creates a line break on all viewports larger than 600px - Voilà!

But - clients can’t enter HTML in a plaintext field! So how do we get it in there?

Well, this is where the liquid comes in! When the client enters the desired text in the plaintext field, it’s output in the Liquid template via a Liquid output tag, like so {{ section.settings.my_cool_text }}.

By utilizing Liquid filters, we can modify the text entered by the user before it ends up in the HTML source (see the Cheat Sheet for reference and more filters!). 

By selecting some characters which are unlikely to appear in the text, we can find and replace on those characters with HTML elements!

{{ section.settings.copy | replace: ';', '<br>' }}

If a client enters “Hello; Friend”, then the HTML source will contain “Hello<br> Friend” - boom! We’ve injected a line break - rendered server-side and before the page load (so no SEO concerns) - which the merchant or client can define. 

Combining these, we get:

{{ section.settings.copy | replace: ';', '<br>' | replace: '%', '<br class="hide-mobi">'}}

Now the client can define additional line breaks to appear on the desktop site only, while letting text wrap normally on mobile. 

You can add a helpful “info” property to the settings schema in order to prompt the client to remind them how it works, like so:

{
  "type": "text",
  "id": "question-headline",
  "label": "question headline",
  "default": "Question not above?", 
  "info":"use a ; for a line break, % for line break on desk only "
},

This is rendered in admin like this:

There ya go! That’s our method - Enjoy! :)