Full-Width Custom HTML Section

Astronaut
835 95 178

So your section has a {% schema %} at the bottom of it. Inside the schema is all your settings that you can use for the section. There's many different types of data that you can allow the customize editor to access. So let's say for instance your section and schema looks like this:

 

<div class="">
{{ section.settings.my_html }}
</div>
{% schema %}
  {
    "name": "Custom HTML",
    "settings": [
      {
        "id": "my_html",
        "type": "html",
        "label": "Custom HTML",
        "default": "<div><p>Some HTML content</p></div>"
      }
    ]
  }
{% endschema %}

By default, inside the containing div that has no class at the moment, this will render your "default" html until you add something into Custom HTML in your customize editor. What I was saying, is that you can add an additional setting called "Custom Class" that you can then use for the div with (right now) no class name. Actually, I think a checkbox would be more appropriate. So say you had a checkbox for full width, you would add this to the schema, and then add a conditional statement for the class:

<div class="{% if section.settings.full_width %}full-width{% else %}container{% endif %}">
{{ section.settings.my_html }}
</div>
{% schema %}
  {
    "name": "Custom HTML",
    "settings": [
      {
        "id": "my_html",
        "type": "html",
        "label": "Custom HTML",
        "default": "<div><p>Some HTML content</p></div>"
      },
      {
        "id": "full_width",
        "type": "checkbox",
        "label": "Full Width",
        "default": false
      }
    ]
  }
{% endschema %}

Now in your customize editor there will be a checkbox called "Full Width". If  "Full Width" is checked in your customize editor it will add the class "full-width", otherwise it will have the class "container".

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 :D
0 Likes
New Member
9 0 0

I tried to implement this, the checkbox appeared, but now front-end simply says "This section doesn’t currently include any content. Add content to this section using the sidebar." and nothing I add into the box changes that.

 

This is what was entered into the section by default:

 

{% comment %}
** Custom HTML - homepage partial **
- Draggable section
{% endcomment %}

{% include 'include-custom-html' %}

{% schema %}
{
  "name": "Custom HTML",
  "class": "custom-html-section",
  "settings": [
    {
      "type": "textarea",
      "id": "custom_html",
      "label": "Custom html"
    }
  ],
  "presets": [{
    "name": "Custom HTML",
    "category": "Content",
    "settings": {
    }
  }]
}

{% endschema %}

Where would I add your amendments?

 

Thank you again for all your help so far!

0 Likes
Highlighted
Astronaut
835 95 178

could you also post the code for the snippet that is included? That's where you're going to have to make your html edits. In the snippets folder the "include-custom-html.liquid" is the file you'd be looking for.

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 :D
0 Likes
New Member
9 0 0

Of course, here is the content:

{% if type == 'block' %}
  {% assign custom_html = block.settings.custom_html %}
{% else %}
  {% assign custom_html = section.settings.custom_html %}
{% endif %}

<div class="homepage_content clearfix">
  <div class="container">
    <div class="sixteen columns">
      <div class="section clearfix">
        {% if custom_html != blank %}
         {{ custom_html }}
        {% else %}
          <p class="center">
            {{ 'homepage.onboarding.no_content' | t }}
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
0 Likes
Astronaut
835 95 178

What I'm gathering here is that you haven't actually added anything into the custom HTML area. That condition that says:

 

        {% if custom_html != blank %}
         {{ custom_html }}
        {% else %}
          <p class="center">
            {{ 'homepage.onboarding.no_content' | t }}
          </p>
        {% endif %}

Is saying, "if there is custom_html, put it here, or else put {{ 'homepage.onboarding.no_content' | t }} there.

 

 

That's probably the message you were seeing, if you go into your Locales folder and open you en.default.json (I think that's what it will be called) and ctrl+f and look for "no_content", you'll probably find the message you saw appear. This should go away when you start typing custom HTML into the text area and be replaced with what you type. So you have a div with the class "container" in the second level of all that html, which I assume is giving you a max-width restriction. So add the checkbox to the schema, like we discussed earlier, and change that class to the conditional statement provided before:

 

<style>
.homepage_content .full-width {
  width: 100%;
}
</style>
{% if type == 'block' %}
  {% assign custom_html = block.settings.custom_html %}
{% else %}
  {% assign custom_html = section.settings.custom_html %}
{% endif %}

<div class="homepage_content clearfix">
  <div class="{% if section.settings.full_width %}full-width{% else %}container{% endif %}">
    <div class="sixteen columns">
      <div class="section clearfix">
        {% if custom_html != blank %}
         {{ custom_html }}
        {% else %}
          <p class="center">
            {{ 'homepage.onboarding.no_content' | t }}
          </p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "Custom HTML",
  "class": "custom-html-section",
  "settings": [
    {
      "type": "textarea",
      "id": "custom_html",
      "label": "Custom html"
    },
    {
      "type": "checkbox",
      "id": "full_width",
      "label": "Full Width",
      "default": false
    }
  ],
  "presets": [{
    "name": "Custom HTML",
    "category": "Content",
    "settings": {
    }
  }]
}

 

 I also added a style for full-width at the top in style tags to give it 100% width. This should work, assuming that there is not some other container that {{ content_for_index }} is inside. 

 

 

 

 

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 :D
0 Likes
New Member
9 0 0

I did as instructed but for some reason, everything that was entered into Custom HTML was duplicated on the front-end.

0 Likes
Astronaut
835 95 178

Im not sure what you mean, do you mean that it's showing the actual HTML on the front end?

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 :D
0 Likes