Unlock Rich Text & Line Breaks in Your Shopify Slideshow: A Community Deep Dive

Hey everyone! As a Shopify migration expert and community analyst, I spend a lot of time digging into the real-world challenges store owners face. Recently, a thread popped up that really resonated, addressing a super common need: getting more control over text in dynamic sections, specifically the slideshow.

Our fellow store owner, Bath4All, using the Empire theme, hit a wall trying to add simple line breaks and different text colors to their dynamic slideshow's title and subheading. Sound familiar? It's frustrating when you want your content to look just right but the default settings hold you back. Let's dive into what the community uncovered and how you can get your slideshow text looking exactly how you envision it.

The Core Problem: Plain Text vs. Rich Text

Bath4All's issue, as devcoders quickly pointed out, stemmed from the slideshow fields using "plain text" inputs instead of "rich text." Plain text is, well, plain. It doesn't understand HTML tags like
for line breaks or for custom colors. Rich text, on the other hand, gives you that flexibility, often with a mini WYSIWYG editor right in the theme customizer.

The solution starts in your theme's Liquid code, specifically within the schema of your dynamic slideshow section. You'll need to change the "type": "text" setting to "type": "richtext" for the relevant fields.

Step-by-Step: Enabling Rich Text in Your Slideshow Section

Before you start, always, always, ALWAYS duplicate your theme first! This gives you a safe sandbox to play in. Go to Online Store > Themes, find your current theme, click Actions > Duplicate. Work on the duplicate.

Once you're in your duplicated theme:

  1. Go to Online Store > Themes.
  2. On your duplicated theme, click Actions > Edit code.
  3. In the file explorer on the left, navigate to the Sections folder and find your slideshow section file. For Bath4All, it was likely slideshow.liquid.
  4. Scroll down to the {% schema %} block. This is where your section's settings are defined.
  5. Inside the "blocks" array, look for the block type that corresponds to your individual slides (often named "slide"). Within this block's "settings" array, you'll find the definitions for your slide's title and text fields.
  6. Locate the settings for "id": "title" and "id": "text". These are the culprits!
  7. Change their "type" from "text" to "richtext". It should look something like this (as shared by tim_1 and namphan):
    	{
    		"id": "title",
    		"type": "richtext", // Changed from "text"
    		"label": "t:sections.slideshow.blocks.slide.title.label",
    		"default": "Slide"
    	},
    	{
    		"id": "text",
    		"type": "richtext", // Changed from "text"
    		"label": "t:sections.slideshow.blocks.slide.text.label",
    		"default": "Introduce customers to your shop with lifestyle and product imagery"
    	},
    
  8. Click Save.

The Unexpected Hurdle: "Error on Save" and Cached Data

Now, here's where it gets tricky, and where Bath4All ran into a snag. After making the change, they still got an error on save. This is a common gotcha when dealing with Shopify's customizer data.

As namphan and tim_1 explained, this error often happens because your theme's saved settings (which live in JSON files like index.json) still hold data formatted for the old "text" type. When you change the schema to expect "richtext", the old plain text data becomes incompatible, throwing an error.

Solving the Save Error: Clearing Old Data

There are two main approaches to resolve this, and the community tried both:

Option 1: The Cleaner Method (Recommended by tim_1)

This method involves temporarily removing the section from your theme customizer to clear its saved data, then re-adding it after the code change.

  1. Before making any code changes (or if you've already made them and are getting errors), go to Online Store > Themes.
  2. On your duplicated theme, click Customize.
  3. Navigate to the page where your dynamic slideshow section is located (e.g., your homepage).
  4. In the theme editor sidebar, find your "Dynamic Slideshow" section.
  5. Click on the section to select it, then scroll down in the sidebar and click Remove section. Do this for all instances of the dynamic slideshow section you've added to your pages.
  6. Save your changes in the theme customizer.
  7. Now, go back to Actions > Edit code for your duplicated theme.
  8. Perform the schema change described above (changing "type": "text" to "type": "richtext" for title and text).
  9. Save the Liquid file. This time, it should save without an error.
  10. Go back to Customize, and re-add your "Dynamic Slideshow" section. You should now see the rich text editor options for your title and text fields!

Option 2: Adjusting Defaults and Presets (More Advanced)

If removing the section isn't feasible or doesn't fully resolve it, you might need to adjust the default values and presets within your {% schema %} block itself. This is what tim_1's final advice hinted at.

  1. In your slideshow.liquid file, after changing "type": "text" to "type": "richtext" for title and text, look for the "default" property within those settings.
  2. Option A: Remove the "default" property entirely. This is what namphan suggested. For rich text fields, sometimes having a plain text default can still cause issues if the system expects HTML.
  3. Option B: Change the "default" value to valid HTML. For example, instead of "default": "Slide", you could use "default": "

    Slide

    "
    . Remember to escape your HTML tags properly within the JSON string.
  4. Next, scroll further down in the {% schema %} block to the "presets" array. This defines the default configuration when you first add the section.
  5. Look for the "blocks" within the presets. If your "slide" blocks here have "settings" for "title" or "text", these also need to be removed or converted to HTML. For example:
    	"presets": [
    	    {
    	"name": "t:sections.slideshow.presets.slideshow.name",
    	"category": "t:sections.slideshow.presets.slideshow.category",
    	"blocks": [
    	        {
    	"type": "slide",
    	"settings": {
    	"title": "

    Slide 1

    " // Convert to HTML or remove } }, { "type": "slide", "settings": { "title": "

    Slide 2

    " // Convert to HTML or remove } } ] } ],
  6. After these changes, save your Liquid file again.

The first option (removing the section and re-adding it) is generally the most straightforward and safest bet for clearing out that old, incompatible data without having to meticulously comb through default settings in the schema presets. But it's good to know the underlying cause and the more granular solution if needed!

Once you've successfully saved your changes, head back to the theme customizer. When you edit your slideshow slides, you should now see a proper rich text editor for your title and text fields, allowing you to add line breaks, bold text, italics, and even custom colors (depending on your theme's rich text editor capabilities). This level of control makes a huge difference in how polished and engaging your dynamic slideshows can be. Happy customizing!

Share:

Use cases

Explore use cases

Agencies, store owners, enterprise — find the migration path that fits.

Explore use cases