Adding a custom HTML field to a section

Martin19
Excursionist
14 0 15

Hi there,

I'm building a site using the Debut theme for a client who will be selling physical products through Shopify but they also sell event tickets for on Eventbrite. They are looking for a way to integrate the events sales within Shopify for a more self contained "feel" to the purchasing of tickets without moving away from Eventbrite.

The soloution I have come up with is to add the event thumbnail and description to a new page using a duplicate version of the feature-columns.liquid section - text with image, but rather than use the included button in the section to link directly over to the Eventbrite website for each event I would like to use the Eventbright widget that creates a button to buy tickets and then when clicked opens up a modal window over the page. To keep this as simple as possible and easy to add / remove events I would ideally like to add a Custom HTML field to the bottom of each feature column item so that I can embed the Eventbrite widget below each description.

I have been using this workaround on other pages to include custom content which allows custom HTML to be added to a page from within the theme editor, if I could include this field within the text with image section that would work perfectly!

Can anyone help with how I would add a custom HTML area to the existing section please?

Thank you in advance 🙂

Replies 18 (18)

Martin19
Excursionist
14 0 15

Can anyone help please?

Re-reading my post above I realise that it was probably a quite confusing!

Basically what I would like to do is add the "Custom HTML" field from the third party section linked above and add it to the bottom of the feature-columns.liquid section - text with image section.

Any help would be greatly appreciated

Martin19
Excursionist
14 0 15

For anyone who may have a similar issue and wants to add HTML to an existing section I found a soloution.

In a section with a text area find the following code

            "type": "richtext",
            "id": "text",

Change "richtext" to "textarea". This will change the text field in the section in theme editor from formated text to HTML and you can then format the text using HTML and also add any custom HTML to that section that you want.

Thanks to this post that helped me work the out!

Amy_Dunis
Excursionist
13 0 1

This is great, thanks Martin.


Do you know if it's possible to do for headers of sections as well? I am having trouble trying to find how to do that. 

adlib87
Visitor
2 0 0

Hey @Amy_Dunis, just wondering if you figured out how to make the headers HTLM editable? I am also having trouble applying the method mentioned above to headers. Cheers

Petester
Visitor
3 0 0

yeah but, what about an area like for input field for pop up maker? It doesn't even have underline option, seriously did Shopify forgot some us know how to code HTML?

 

Screen Shot 2019-10-02 at 12.49.14 PM.png

Ninthony
Shopify Partner
2329 350 1023

Do you know how to code HTML? Rich text is an ok option, but there's actually a type of "html" you can put in the schema instead of "richtext" which gives you a blank area and you can put html in there. I don't believe it has any text editing options. 

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
Petester
Visitor
3 0 0
I’m use to working In Wordpress this shopify thing, is annoyingly weird platform to be working in, can you please point me into a direction where I can change the input field to accept html? I didn’t choose Shopify as my “go to” platform if it weren’t for my client.
Ninthony
Shopify Partner
2329 350 1023

What input field are you talking about? Are you talking about the rich text editor mentioned previously in this post? If you go into the schema you can change it to be an html field if you change it's type to html:

 

"type": "html",
  "id": "section_html",

Which you would then render in the HTML of the section with:

 

{{ section.settings.section_html }}

If you need help navigating the platform or figuring out where to put stuff, you can send me a personal message with your questions and I should be able to guide you in whatever you're trying to do. You will have to enable messaging in your profile first though.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
PanBuddha
Visitor
1 0 1

I'm trying to add my custom code in the text area so that I can add a Privy registration form.  tried to follow the article using the Debut theme and I cannot make it work! Is there another way to add and embed for in a section of my Shopify store? 

div class= ' privy-embed-form '  data-campaign=' #### '
 
nyc_seth
Tourist
9 0 2

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! ❤️ 

 

<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:

Screen Shot 2020-03-21 at 10.47.27 AM.png

Ninthony
Shopify Partner
2329 350 1023
Change:
{{ section.settings.section_html |escape }}

To:

{{ block.settings.section_html |escape }}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
nyc_seth
Tourist
9 0 2

Thank you so much for the quick reply! I made the change you suggested and now the content is displaying...wahoo!

 

Unfortunately, the html markup isn't actually functioning. For instance the following entry yields this output:

Screen Shot 2020-03-21 at 12.52.39 PM.pngScreen Shot 2020-03-21 at 12.52.31 PM.png

nyc_seth
Tourist
9 0 2

Any other suggestions on this @Ninthony ? Thanks in advance ♥️

Ninthony
Shopify Partner
2329 350 1023

Whoops, I think you should remove that escape filter from the output:

 

{{ block.settings.section_html | escape }}

to:

{{ block.settings.section_html }}
If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
RicoisRichard
Shopify Partner
12 0 5

Ninthony, and NyC Seth — thanks to the two of you for getting this solved. I am using online store 2.0 with Clean Canvas's Symmetry theme, and so far it's working. Woohoo.

I thought I would note that online 89 you still leave the name of the section "Rich text". I changed that to HTML text just for my brain, and to see that Shopify would alphabetize it correctly, and it did. Sweetness. I'll let you know if I run into issues.

OH - p.s. is all of the script section at the top required? I ask because if you create a new section, it starts with the schema calls. Thanks!

friendoftheroot
Shopify Partner
45 4 7

This is useful for custom HTML and embeds.
You create a file raw.liquid in "Sections" / "Abschnitte" (in german)

<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.section_html != blank %}
          <div class="pxs-rich-text-content rte">
            {{ block.settings.section_html }}
          </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": "RAW Element",
  "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": "RAW Element"
        },
        {
          "type": "html",
          "id": "section_html",
          "label": "Texts",
          "default": "<p>Here goes your JS code, or embeds</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": "RAW Element",
      "category": "Text",
      "blocks": [
        {
          "type": "text"
        }
      ]
    }
  ]
}

{% endschema %}

 

adlib87
Visitor
2 0 0

Hi @Ninthony, I'm trying to get this to work for the 'section heading'. Specifically, so i can add HTML in that box to create an anchor for that section eg:

<section id="section1">Section 1</section>
Is it possible to turn a header text box into an html box? I tried the above and it worked for the richtext block, but not for the header blocks.
Thanks!

JosephWoods
Shopify Partner
1 0 0

Thanks for updating!