Hey there,
This is my first Shopify site and I’ve been trying for hours to do something that seems like it would be pretty simple. I want to create a section on the homepage where I can just enter HTML…I can’t stand the “rich text” editor that doesn’t allow you to edit HTML code but only allows Bold, Italic and a Link.
I’ve tried following the directions you’ve outlined and I feel like I got really close, but in the end nothing was changing. I am using the Handy theme and also tried duplicating one of the sections that was working (in an effort to make sure I had the schema right). This created a section but when I entered HTML, it wouldn’t display on the page. I have shown the code I was using below and also attached a screenshot of what I am seeing.
Thank you so much for any help you can offer! <3
<script
type="application/json"
data-section-id="{{ section.id }}"
data-section-type="html-area"
></script>
<section
class="
pxs-rich-text
pxs-rich-text-width-{{ section.settings.width }}
"
>
{% for block in section.blocks %}
<article
class="
pxs-rich-text-block
pxs-rich-text-heading-{{ block.settings.heading_size }}
{%- if block.settings.text_alignment != blank -%}
pxs-rich-text-alignment-{{ block.settings.text_alignment }}
{%- endif -%}
"
{{ block.shopify_attributes }}
>
{% if block.type == 'text' %}
{% if block.settings.title != blank %}
<h2 class="pxs-rich-text-heading">
{{ block.settings.title | escape }}
</h2>
{% endif %}
{% if block.settings.section_html != blank %}
<div class="pxs-rich-text-content rte">
{{ section.settings.section_html |escape }}
</div>
{% endif %}
{% endif %}
{% if block.type == 'page' and block.settings.page %}
{% if block.settings.show_heading %}
<h2 class="pxs-rich-text-heading">
{{ pages[block.settings.page].title | escape }}
</h2>
{% endif %}
<div class="pxs-rich-text-content rte">
{{ pages[block.settings.page].content }}
</div>
{% endif %}
</article>
{% endfor %}
</section>
{% schema %}
{
"name": "HTML Text",
"class": "pxs-rich-text-section",
"max_blocks": 2,
"settings": [
{
"id": "width",
"type": "select",
"label": "Section width",
"options": [
{
"value": "regular",
"label": "Regular"
},
{
"value": "wide",
"label": "Wide"
},
{
"value": "full-width",
"label": "Full width"
}
],
"default": "regular"
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Rich text"
},
{
"type": "html",
"id": "section_html",
"label": "Texts",
"default": "<p>Use this section to welcome customers to your store, say a bit about your brand, or share news and seasonal promotions.</p>"
},
{
"id": "heading_size",
"type": "select",
"label": "Heading size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"id": "text_alignment",
"type": "select",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"type": "checkbox",
"id": "show_heading",
"label": "Show heading"
},
{
"id": "heading_size",
"type": "select",
"label": "Heading size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "large"
},
{
"type": "page",
"id": "page",
"label": "Page"
}
]
}
],
"presets": [
{
"name": "Rich text",
"category": "Text",
"blocks": [
{
"type": "text"
}
]
}
]
}
{% endschema %}
This is what I’m seeing to edit it. The title shows but not the HTML:
