Help adjusting rich text section
Solved
Hi, I'm frustrated that I don't know how to do this! I have a rich text section that requires an image – if there's no image, it just defaults to a placeholder. How do I make it so that if there's no image, the text just expands to full width?
Code is below.
Thanks in advance for any help.
{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}
<div class="{% unless section.settings.is_fullwidth %} container--large {% else %} container--fullwidth {% endunless %} {% unless section.settings.remove_margin %} container--vertical-space {% endunless %} {% if section.settings.section_background_color != "rgba(0,0,0,0)" or section.settings.section_background_gradient != blank %} container--has-background {% endif %}">
<div id="element-{{ section.id }}" class="card
{% if section.settings.is_fullwidth %} card--no-radius card--no-sideborders card--no-shadow {% endif %}
{% unless section.settings.image_position contains "top" %}
element--height-{{ section.settings.height }}
{% else %}
rich-text--image-on-top
{% endunless %}
rich-text">
<div class="rich-text__container rich-text__container--image-{{ section.settings.image_position }} {% if section.settings.is_fullwidth %} rich-text__container--fullwidth {% if section.settings.image_position contains 'top' %} container--large {% endif %} {% endif %}">
{%- unless section.settings.image_position contains "no-image" -%}
<div class="rich-text__image
{% unless section.settings.image_crop %} rich-text__image--fit {% endunless %}
{% if section.settings.image_position contains "top" %} element--height-{{ section.settings.height }} {% endif %}"
aria-hidden="true">
{%- liquid
if section.index == 1
assign preload = true
else
assign preload = false
endif
-%}
{%- liquid
unless section.settings.image == blank
render 'lazy-image', image: section.settings.image, type: '', alt: section.settings.title, image_alignment: true, id: section.id, preload: preload
else
echo 'image' | placeholder_svg_tag
endunless
-%}
</div>
{%- endunless -%}
<div class="rich-text__text align-content align-content--{{ section.settings.text_alignment }} align-content--vertical-middle">
<div class="card__text
{% unless section.settings.is_fullwidth %} gutter--xlarge {% endunless %}
{% if section.settings.is_fullwidth and section.settings.image_position contains "top" %} gutter-top--xlarge gutter-bottom--xlarge {% endif %}
spacing--large remove-empty-space">
{%- for block in section.blocks -%}
{%- case block.type %}
{%- when 'custom_liquid' -%}
<div {{ block.shopify_attributes }}>
{{ block.settings.custom_liquid }}
</div>
{%- when 'title' -%}
<{{ block.settings.seo_h_tag }}
class="{{ block.settings.title_size }} rte rich-text__title"
{{ block.shopify_attributes }}
>
{{ block.settings.title }}
</{{ block.settings.seo_h_tag }}>
{%- when 'text' -%}
<div
class="rte text-size--{{ block.settings.text_size }}"
{{ block.shopify_attributes }}
>
{{ block.settings.text }}
</div>
{%- when 'button' -%}
<div
class="increased-spacing"
{{ block.shopify_attributes }}
>
<a href="{{ block.settings.link }}" {% unless block.settings.open_in_new_window == false %} target="_blank" {% endunless %} class="button button--{{ block.settings.button_size }} button--{{ block.settings.button_style }}">
{{ block.settings.button_label }}
</a>
</div>
{%- when 'space' -%}
<div class="empty-space" {{ block.shopify_attributes }}> </div>
{%- endcase %}
{%- endfor -%}
</div>
</div>
{%- render 'custom-colors', id: section.id, text: section.settings.color_text_main, background: section.settings.color_background_main, accent: section.settings.color_accent_main, borders: section.settings.color_borders_main, shadow: section.settings.color_shadow_main, hide_borders: section.settings.color_hide_borders, hide_shadow: section.settings.color_hide_shadow -%}
</div>
</div>
</div>
{%- if section.settings.section_background_color != "rgba(0,0,0,0)" -%}
{% style %}
#shopify-section-{{ section.id }} {
background-color: {{ section.settings.section_background_color }};
}
{% endstyle %}
{%- endif -%}
{%- if section.settings.section_background_gradient != blank -%}
{% style %}
#shopify-section-{{ section.id }} {
background: {{ section.settings.section_background_gradient }};
}
{% endstyle %}
{%- endif -%}
{% schema %}
{
"name": "t:sections.rich-text.name",
"class": "can-be-fullwidth no-fullwidth-padding",
"max_blocks": 9,
"settings": [
{
"id": "image",
"type": "image_picker",
"label": "t:sections.gallery.blocks.image.settings.image.label"
},
{
"type": "select",
"id": "image_position",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.label",
"options": [
{
"value": "left",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__1"
},
{
"value": "top",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__2"
},
{
"value": "right",
"label": "t:sections.local-extra-words.sections.rich-text.settings.image_position.option__3"
},
{
"value": "top no-image",
"label": "t:late_edits.rich-text.image_position.no_image.label",
"group": "t:late_edits.rich-text.image_position.no_image.group"
}
],
"default": "right"
},
{
"type": "select",
"id": "height",
"label": "t:sections.local-extra-words.sections.rich-text.settings.height.label",
"info": "t:sections.local-extra-words.sections.rich-text.settings.height.info",
"options": [
{
"value": "small",
"label": "t:sections.image-with-text.settings.image_height.options__1.label"
},
{
"value": "regular",
"label": "t:sections.image-with-text.settings.image_height.options__2.label"
},
{
"value": "large",
"label": "t:sections.image-with-text.settings.image_height.options__3.label"
}
],
"default": "regular"
},
{
"type": "checkbox",
"id": "image_crop",
"label": "t:sections.local-extra-words.sections.rich-text.settings.crop.label",
"info": "t:sections.local-extra-words.sections.rich-text.settings.crop.info",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"label": "t:sections.image-with-text.settings.text_alignment.label",
"options": [
{
"value": "horizontal-left",
"label": "t:sections.rich-text.settings.text_alignment.options__1.label"
},
{
"value": "horizontal-center",
"label": "t:sections.rich-text.settings.text_alignment.options__2.label"
},
{
"value": "horizontal-right",
"label": "t:sections.rich-text.settings.text_alignment.options__3.label"
}
],
"default": "horizontal-center"
},
{
"type": "header",
"content": "t:local-march-update.labels.section_design"
},
{
"type": "checkbox",
"id": "is_fullwidth",
"label": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.label",
"default": false,
"info": "t:sections.local-extra-words.sections.rich-text.settings.fullwidth.info"
},
{
"type": "color",
"id": "section_background_color",
"label": "t:sections.local-extra-words.settings_schema.product-card.badges.custom_badges.color",
"default": "rgba(0,0,0,0)"
},
{
"type": "color_background",
"id": "section_background_gradient",
"label": "t:local-230.background_gradient"
},
{
"type": "checkbox",
"id": "remove_margin",
"label": "t:sections.local-extra-words.sections.rich-text.settings.remove_margin.label",
"default": false
},
{
"type": "header",
"content": "t:sections.local-extra-words.sections.headings.custom_colors"
},
{
"type": "color",
"id": "color_background_main",
"label": "t:sections.split-extra-words.settings_schema.colors.settings.background",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_text_main",
"label": "t:sections.split-extra-words.settings_schema.colors.settings.text",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_accent_main",
"label": "t:sections.local-extra-words.settings_schema.colors.settings.accent",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_borders_main",
"label": "t:sections.local-extra-words.settings_schema.colors.settings.borders",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "color_shadow_main",
"label": "t:local-march-update.shadows.label",
"default": "rgba(0,0,0,0)"
},
{
"type": "checkbox",
"id": "color_hide_borders",
"label": "t:sections.local-extra-words.settings_schema.colors.settings.hide_border",
"default": false
},
{
"type": "checkbox",
"id": "color_hide_shadow",
"label": "t:local-march-update.shadows.hide",
"default": false
}
],
"blocks": [
{
"type": "title",
"name": "t:sections.rich-text.blocks.heading.name",
"settings": [
{
"type": "inline_richtext",
"id": "title",
"label": "t:sections.rich-text.blocks.heading.settings.heading.label",
"default": "Talk about your brand"
},
{
"type": "select",
"id": "title_size",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.label",
"options": [
{
"value": "h3",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "h2",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
},
{
"value": "h1",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__3.label"
}
],
"default": "h2"
},
{
"type": "header",
"content": "t:sections.refactor_words.seo.name"
},
{
"type": "select",
"id": "seo_h_tag",
"label": "t:sections.refactor_words.seo.label",
"info": "t:sections.refactor_words.seo.info",
"options": [
{
"value": "h1",
"label": "H1"
},
{
"value": "h2",
"label": "H2"
},
{
"value": "h3",
"label": "H3"
},
{
"value": "h4",
"label": "H4"
},
{
"value": "span",
"label": "span"
}
],
"default": "h2"
}
]
},
{
"type": "text",
"name": "t:sections.rich-text.blocks.text.name",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "t:sections.rich-text.blocks.text.settings.text.label",
"default": "<p>Use this text to share information about your brand with your customers. Describe a product, share announcements or welcome customers to your store.</p>"
},
{
"type": "select",
"id": "text_size",
"label": "t:sections.footer.blocks.text.settings.text_size.label",
"options": [
{
"value": "regular",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.heading.settings.heading_size.options__2.label"
}
],
"default": "regular"
}
]
},
{
"type": "button",
"name": "t:sections.rich-text.blocks.button.name",
"settings": [
{
"type": "text",
"id": "button_label",
"label": "t:sections.rich-text.blocks.button.settings.button_label.label",
"default": "Show more"
},
{
"type": "url",
"id": "link",
"label": "t:sections.rich-text.blocks.button.settings.button_link.label"
},
{
"type": "checkbox",
"id": "open_in_new_window",
"label": "t:sections.local-extra-words.sections.announcement-bar.blocks.content.settings.target",
"default": false
},
{
"type": "select",
"id": "button_size",
"label": "t:sections.rich-text.blocks.button.settings.button_size.label",
"options": [
{
"value": "regular",
"label": "t:sections.rich-text.blocks.button.settings.button_size.options__1.label"
},
{
"value": "large",
"label": "t:sections.rich-text.blocks.button.settings.button_size.options__2.label"
}
],
"default": "large"
},
{
"id": "button_style",
"label": "t:sections.local-extra-words.sections.buttons.style.label",
"type": "select",
"options": [
{
"value": "outline",
"label": "t:sections.local-extra-words.sections.buttons.style.option__1"
},
{
"value": "solid",
"label": "t:sections.local-extra-words.sections.buttons.style.option__2"
}
],
"default": "outline"
}
]
},
{
"type": "custom_liquid",
"name": "t:sections.refactor_words.custom_code.name",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label"
}
]
},
{
"type": "space",
"name": "t:local-march-update.blocks.space.name"
}
],
"presets": [
{
"name": "t:sections.rich-text.name",
"blocks": [
{ "type": "title" },
{ "type": "text" },
{ "type": "button" }
]
}
]
}
{% endschema %}
Accepted Solution (1)
Thanks for the info, check this one.
From you Admin page, go to Online Store > Themes
Select the theme you want to edit
Under the Asset folder, open the main.css(base.css, style.css or theme.css)
Then place the code below at the very bottom of the file.
.rich-text__image {
display: none;
}
.card.element--height-regular.rich-text .rich-text__container {
display: grid;
grid-template-columns: 1fr;
}
And save.
Result:
Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
Community Blog Articles
Members of March '25
Hey Community 👋 Did you know that March 15th is National Everything You Think Is W...
By JasonH Apr 1, 2025
The power of automation: New Shopify Flow fundamentals learning path
Discover how to increase the efficiency of commerce operations with Shopify Academy's l...
By Jacqui Mar 26, 2025
Canadian merchants: Update account details by March 24, 2025 to continue us...
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025