Help me with some page blocks!

candicenowrise
New Member
2 0 0

Hi. Im having an issue. I would like to add a centered text block to add some descriptions for the services im providing below that title BATH & HAIRCUT PACKAGE. I would like to have this descriptive text block where I drawed the red square.

candicenowrise_0-1634766396966.png

 

but when I click on add column it only lets me add text column with images 

candicenowrise_1-1634766397163.png

 

 

I tried to do it withing the code with no luck. Maybe im doing it wrong. Here is the code:

 

{% if section.settings.divider %}<div class="section--divider">{% endif %}

<div class="page-width">
  {% if section.settings.title != blank %}
    <div class="section-header text-{{ section.settings.align_text }}">
      <h2>{{ section.settings.title }}</h2>
    </div>
  {% endif %}

  <div class="grid {% unless section.blocks.size == 5 %}grid--uniform{% endunless %} grid--flush-bottom">
    {%- assign grid_item_width = 'medium-up--one-third' -%}
    {% case section.blocks.size %}
      {% when 1 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 2 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
      {% when 4 %}
        {%- assign grid_item_width = 'medium-up--one-half' -%}
    {% endcase %}
    {% for block in section.blocks %}
      {% if section.blocks.size == 5 and forloop.index < 3 %}
        {%- assign column_width = 'medium-up--one-half' -%}
      {% else %}
        {%- assign column_width = grid_item_width -%}
      {% endif %}
      <div class="grid__item {{ column_width }} text-{{ section.settings.align_text }}" {{ block.shopify_attributes }} data-aos="row-of-3">
        {% if block.settings.enable_image %}
          <div style="{% if section.settings.align_text == 'center' %}margin: 0 auto;{% endif %} max-width: {{ block.settings.image_width }}px;">
            {% if block.settings.button_link != blank %}
              <a href="{{ block.settings.button_link }}">
            {% endif %}
            {% if block.settings.image != blank %}
              <div class="image-wrap text-spacing" style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.image.aspect_ratio }}%;">
                {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
                <img class="lazyload"
                    data-src="{{ img_url }}"
                    data-widths="[180, 360, 540, 720, 900, 1080]"
                    data-aspectratio="{{ block.settings.image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ block.settings.image.alt }}">
              </div>
            {% else %}
              <div class="image-wrap text-spacing">{{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}</div>
            {% endif %}
            {% if block.settings.button_link != blank %}
              </a>
            {% endif %}
          </div>
        {% endif %}
        {% if block.settings.title != blank %}
          <h3>{{ block.settings.title }}</h3>
        {% endif %}
        {% if block.settings.text != blank %}
          <div class="rte-setting text-spacing">{{ block.settings.text }}</div>
        {% endif %}
        {% if block.settings.button_label != blank %}
          <a href="{{ block.settings.button_link }}" class="btn btn--secondary btn--small">
            {{ block.settings.button_label }}
          </a>
        {% endif %}
      </div>
    {% endfor %}
  </div>
</div>

{% if section.settings.divider %}</div>{% endif %}


{% schema %}
  {
    "name": "Text columns with images",
    "class": "index-section",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Heading"
      },
      {
        "type": "select",
        "id": "align_text",
        "label": "Alignment",
        "default": "left",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Centered"
          }
        ]
      },
      {
        "type": "checkbox",
        "id": "divider",
        "label": "Show section divider",
        "default": false
      }
    ],
    "blocks": [
      {
        "type": "text_block",
        "name": "Column",
        "settings": [
          {
            "type": "checkbox",
            "id": "enable_image",
            "label": "Show image",
            "default": true
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "range",
            "id": "image_width",
            "label": "Image width",
            "default": 650,
            "min": 60,
            "max": 650,
            "step": 10,
            "unit": "px"
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Example title"
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Use this section to explain a set of product features, to link to a series of pages, or to answer common questions about your products. Add images for emphasis.</p>"
          },
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
            "default": "Optional button"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Link"
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Text columns with images",
        "category": "Text",
        "blocks": [
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          },
          {
            "type": "text_block"
          }
        ]
      }
    ]
  }
{% endschema %}

<div class="index-section">
  <div class="page-width text-{{ block.settings.align_text }}">
    <div class="grid">
      <div class="grid__item{% if block.settings.narrow_column %} medium-up--three-quarters medium-up--push-one-eighth{% endif %}">
        {% if block.settings.title != blank %}
          <p class="h2">
            {{ block.settings.title | escape }}
          </p>
        {% endif %}
        {% if block.settings.text != blank %}
          <div class="rte">
            {% if block.settings.enlarge_text %}<div class="enlarge-text">{% endif %}
              {{ block.settings.text }}
            {% if block.settings.enlarge_text %}</div>{% endif %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

 

I request some help and assistance with this. Thank you so much for your time!

Replies 0 (0)