Looking for a section code to add Rich Text with HTML

Store Design
1

Hey Shopify squad,

I’m looking to add a basic Rich Text section that allows for insertion of CSS/HTML. As of now the built-in rich text in my theme allows for just a heading, subheading and body text without the ability to have a custom field to style type and add html/css.

Any advice is appreciated, I’ve already duplicated the Rich Text section and it’s ready to replace with a more flexible option. Below is what is there now:

{% render 'content--rich-text' with
  id: section.id,
  section_style: section.settings.section_style,
  alignment: section.settings.alignment,
  overline: section.settings.overline,
  title: section.settings.title,
  text: section.settings.text,
  text_max_width: section.settings.text_max_width,
  link: section.settings.link,
  link_text: section.settings.link_text
%}

{% schema %}
  {
    "name": "Rich text",
    "class": "section-dynamic section-borderable",
    "settings": [
      {
        "type": "header",
        "content": "Section style"
      },
      {
        "type": "select",
        "id": "section_style",
        "label": "Style",
        "default": "default",
        "options": [
          {
            "value": "default",
            "label": "Default"
          },
          {
            "value": "contrast",
            "label": "Contrast"
          }
        ]
      },
      {
        "type": "header",
        "content": "Section content"
      },
      {
        "type": "text",
        "id": "overline",
        "label": "Small heading"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Heading",
        "default":"This is the Rich text section"
      },
      {
        "id": "text",
        "type": "richtext",
        "label": "Text",
        "default": "

Use this text area to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.

"
      },
      {
        "id": "link",
        "type": "url",
        "label": "Link"
      },
      {
        "id": "link_text",
        "type": "text",
        "label": "Link text"
      },
      {
        "type": "select",
        "id": "alignment",
        "label": "Alignment",
        "default": "center",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          }
        ]
      },
      {
        "type": "range",
        "id": "text_max_width",
        "label": "Max width of text",
        "min": 16,
        "max": 50,
        "step": 1,
        "default": 36
      }
    ],
    "presets": [{
        "name": "Rich text",
        "category": "Text"
    }]
  }
{% endschema %}

Thank you in advance!

1 Like
2

@cocreative

sorry for that

rich text doesn’t allow custom HTML and CSS you have textarea and HTML field you you can easy to use

3

I see! Is there another section code that allows for it? I know I’ve used in other themes.

1 Like
4

Hi @cocreative ,

You can manually add CSS to it as a stylesheet tag:

{% stylesheet %}

// code CSS

{% endstylesheet %}

https://i.imgur.com/KsvgIdy.png

Refer https://shopify.dev/docs/themes/sections#javascript-and-stylesheet-tags

Also you can add {% style %}{% endstyle %} or

Hope it clear to you.

5

@cocreative

Yes, please try this

https://www.tech-prastish.com/blog/how-to-create-custom-sections-in-shopify/