richt text box - separate content on 3 lines

PhMA · ‎09-03-2024

Hello Dear Community

in my refresh theme, I have added a richt text box and in the heading: I added on 3 lines, 3 different words/sentences

but on the screen the spacing is not the same as in the editor

I need to have it line by line like this:

ENERGÍA DE LIBERACIÓN LENTA

CLARIDAD MENTAL

ESTADO DE ÁNIMO REFORZADO

how can I achieve this?

many thanks

theme: https://5rrz0cg9e15zsifz-61049766108.shopifypreview.com

AnneLuo · ‎09-03-2024

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Customize.
Step 2: Find the Homepage template and replace a custom liquid section to the rich text box. Then add the following code to the custom liquid box

<div class="container">
 <h2>ENERGÍA DE LIBERACIÓN LENTA</h2>
 <h2>CLARIDAD MENTAL</h2>
 <h2>ESTADO DE ÁNIMO REFORZADO</h2>
</div>

<style>
.container{
    width: fit-content;
    text-align: left;
    margin: 0 auto;
}
.container h2{
   margin: 0 !important;
}
</style>

Result:

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me

Buy Me A Coffee ☕

namphan · ‎09-03-2024

Hi @PhMA,

Please go to Actions > Edit code > sections > rich-text.liquid file and change code here:

inline_richtext => richtext

Then you just need to re-enter the text, it will display fine

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

PhMA · ‎09-04-2024

Im a beginner, I wasn't able to find this. My file looks different. can you please help me and make step by step guide, many thanks. also it needs to work on mobile screen, thanks

namphan · ‎09-04-2024

Hi @PhMA,

Please send me the code of the whole file, and I will check it for you

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

PhMA · ‎09-06-2024

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
<div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
<div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
<div class="rich-text__blocks {{ section.settings.content_alignment }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h2>
{%- when 'caption' -%}
<p
class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.caption | escape }}
</p>
{%- when 'text' -%}
<div
class="rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.text }}
</div>
{%- when 'button' -%}
<div
class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- if block.settings.button_label != blank -%}
<a
{% if block.settings.button_link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link }}"
{% endif %}
class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.rich-text.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.label",
"info": "t:sections.rich-text.settings.desktop_content_position.info"
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.content_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "full_width",
"default": true,
"label": "t:sections.rich-text.settings.full_width.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 52
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.rich-text.blocks.heading.name",
"limit": 3,
"settings": [
{
"type": "inline_richtext",
"id": "heading",
"default": "t:sections.rich-text.blocks.heading.settings.heading.default",
"label": "t:sections.rich-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.rich-text.blocks.caption.name",
"limit": 3,
"settings": [
{
"type": "text",
"id": "caption",
"default": "t:sections.rich-text.blocks.caption.settings.text.default",
"label": "t:sections.rich-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"limit": 3,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "t:sections.rich-text.blocks.text.settings.text.default",
"label": "t:sections.rich-text.blocks.text.settings.text.label"
}
]
},
{
"type": "button",
"name": "t:sections.rich-text.blocks.buttons.name",
"limit": 2,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "t:sections.rich-text.blocks.buttons.settings.button_label_1.default",
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"default": false,
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.rich-text.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}

namphan · ‎09-06-2024

Hi @PhMA,

Please change all code:

{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

<div class="isolate{% unless section.settings.full_width %} page-width{% endunless %}">
<div class="rich-text content-container color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width content-container--full-width{% endif %} section-{{ section.id }}-padding">
<div class="rich-text__wrapper rich-text__wrapper--{{ section.settings.desktop_content_position }}{% if section.settings.full_width %} page-width{% endif %}">
<div class="rich-text__blocks {{ section.settings.content_alignment }}">
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'heading' -%}
<h2
class="rich-text__heading rte inline-richtext {{ block.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.heading }}
</h2>
{%- when 'caption' -%}
<p
class="rich-text__caption {{ block.settings.text_style }} {{ block.settings.text_style }}--{{ block.settings.text_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.caption | escape }}
</p>
{%- when 'text' -%}
<div
class="rich-text__text rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{{ block.settings.text }}
</div>
{%- when 'button' -%}
<div
class="rich-text__buttons{% if block.settings.button_label != blank and block.settings.button_label_2 != blank %} rich-text__buttons--multiple{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- if block.settings.button_label != blank -%}
<a
{% if block.settings.button_link == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link }}"
{% endif %}
class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label | escape -}}
</a>
{%- endif -%}
{%- if block.settings.button_label_2 != blank -%}
<a
{% if block.settings.button_link_2 == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ block.settings.button_link_2 }}"
{% endif %}
class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
>
{{- block.settings.button_label_2 | escape -}}
</a>
{%- endif -%}
</div>
{%- endcase -%}
{%- endfor -%}
</div>
</div>
</div>
</div>

{% schema %}
{
"name": "t:sections.rich-text.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "desktop_content_position",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.desktop_content_position.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.desktop_content_position.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.desktop_content_position.label",
"info": "t:sections.rich-text.settings.desktop_content_position.info"
},
{
"type": "select",
"id": "content_alignment",
"options": [
{
"value": "left",
"label": "t:sections.rich-text.settings.content_alignment.options__1.label"
},
{
"value": "center",
"label": "t:sections.rich-text.settings.content_alignment.options__2.label"
},
{
"value": "right",
"label": "t:sections.rich-text.settings.content_alignment.options__3.label"
}
],
"default": "center",
"label": "t:sections.rich-text.settings.content_alignment.label"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "full_width",
"default": true,
"label": "t:sections.rich-text.settings.full_width.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 52
}
],
"blocks": [
{
"type": "heading",
"name": "t:sections.rich-text.blocks.heading.name",
"limit": 3,
"settings": [
{
"type": "richtext",
"id": "heading",
"default": "t:sections.rich-text.blocks.heading.settings.heading.default",
"label": "t:sections.rich-text.blocks.heading.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
},
{
"value": "hxl",
"label": "t:sections.all.heading_size.options__4.label"
},
{
"value": "hxxl",
"label": "t:sections.all.heading_size.options__5.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
}
]
},
{
"type": "caption",
"name": "t:sections.rich-text.blocks.caption.name",
"limit": 3,
"settings": [
{
"type": "text",
"id": "caption",
"default": "t:sections.rich-text.blocks.caption.settings.text.default",
"label": "t:sections.rich-text.blocks.caption.settings.text.label"
},
{
"type": "select",
"id": "text_style",
"options": [
{
"value": "subtitle",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__1.label"
},
{
"value": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.options__2.label"
}
],
"default": "caption-with-letter-spacing",
"label": "t:sections.rich-text.blocks.caption.settings.text_style.label"
},
{
"type": "select",
"id": "text_size",
"options": [
{
"value": "small",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__1.label"
},
{
"value": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__2.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.options__3.label"
}
],
"default": "medium",
"label": "t:sections.rich-text.blocks.caption.settings.caption_size.label"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"limit": 3,
"settings": [
{
"type": "richtext",
"id": "text",
"default": "t:sections.rich-text.blocks.text.settings.text.default",
"label": "t:sections.rich-text.blocks.text.settings.text.label"
}
]
},
{
"type": "button",
"name": "t:sections.rich-text.blocks.buttons.name",
"limit": 2,
"settings": [
{
"type": "text",
"id": "button_label",
"default": "t:sections.rich-text.blocks.buttons.settings.button_label_1.default",
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_1.label",
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_1.info"
},
{
"type": "url",
"id": "button_link",
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_1.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"default": false,
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_1.label"
},
{
"type": "text",
"id": "button_label_2",
"label": "t:sections.rich-text.blocks.buttons.settings.button_label_2.label",
"info": "t:sections.rich-text.blocks.buttons.settings.button_label_2.info"
},
{
"type": "url",
"id": "button_link_2",
"label": "t:sections.rich-text.blocks.buttons.settings.button_link_2.label"
},
{
"type": "checkbox",
"id": "button_style_secondary_2",
"default": false,
"label": "t:sections.rich-text.blocks.buttons.settings.button_style_secondary_2.label"
}
]
}
],
"presets": [
{
"name": "t:sections.rich-text.presets.name",
"blocks": [
{
"type": "heading"
},
{
"type": "text"
},
{
"type": "button"
}
]
}
]
}
{% endschema %}

then you just go to Customize and re-enter the text, it will display fine

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

PhMA · ‎09-07-2024

but I only want to change it for this very section, not for the entire theme

plus please indicate where excatly you did the change -> I do not want to replace entire out of the box codes without knowing what to do...

can you give me a solution that only solve my problem on that very section -> just indicate in the code exactly where I need to enter and what type of new code snippet I need to enter... many thanks

namphan · ‎09-07-2024

Hi @PhMA,

It will change the code here:

And when you change, it will not affect other sections, you just need to change Customize at the section you want to enter 3 lines and it will display well.

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

PhMA · ‎09-08-2024

its unfortunately not working and there is an error.

Can someone help solve this problem.

I do not want to change entire code. please point out the exact code line and mark the place where I need to replace what

many thanks

namphan · ‎09-08-2024

Hi @PhMA,

Can I send you a collaborator invite? it will help me add it and notify you soon

☕ Coffee tips fuels my dedication.
Shopify Development Service
➜ PageFly Page Builder Optimize your Shopify store (Free plan available)
Need help with your store? namphan992@gmail.com

richt text box - separate content on 3 lines

richt text box - separate content on 3 lines

Buy Me A Coffee ☕

Community Blog Articles