Looking for a section code to add Rich Text with HTML

cocreative
New Member
2 0 2

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": "<p>Use this text area to share information about your brand with your customers. Describe a product, share announcements, or welcome customers to your store.</p>"
      },
      {
        "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!

KetanKumar
Shopify Partner
20459 2116 7714

@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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
cocreative
New Member
2 0 2

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

LitExtension
Shopify Partner
1200 154 215

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 <style></style>

Hope it clear to you.

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
KetanKumar
Shopify Partner
20459 2116 7714

@cocreative 

Yes, please try this 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes