Shopify themes, liquid, logos, and UX
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.
but when I click on add column it only lets me add text column with images
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!
User | RANK |
---|---|
118 | |
95 | |
77 | |
69 | |
38 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022