Hide a custom section when there is no data added

Technical Q&A

Topic summary

A user created a custom section (Kava-image-Lily-02) in the Dawn theme that displays properly with content but doesn’t automatically hide when empty.

Solution Provided:
Another user suggested wrapping the entire section code in a conditional statement that checks whether either background_image or image_description settings contain data:

{% if section.settings.image_description != "" or section.settings.background_image %}
  [existing code here]
{% endif %}

This conditional should be placed immediately after the section ID assignment, ensuring the section only renders when at least one of these fields has content.

Outcome:
The original poster confirmed the solution worked successfully. A follow-up question asked for clarification on where to add this code in the theme files, with the response indicating it should be added in the “Sections” folder within the KAVA section file.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

in Dawn theme I added a section Kava-image-Lily-02. Works fine. but when no data is added (text or images) the section does not hide.

I would like to adjust the code to make the section hide when there is no data added.

Can anyone help?

Code:

{% assign sec_id = section.id | slice: -8, 8 | replace: “-”, “_” %}

{%- style -%}

img {
max-width: 100%;
height: auto;
}

.pw-container,
.pw-container-fluid {
width: 100%;
padding-right: var(–pw-gutter-x, 15px);
padding-left: var(–pw-gutter-x, 15px);
margin-right: auto;
margin-left: auto;
}

@media (min-width: 576px) {
.pw-container {
max-width: 540px;
}
}

@media (min-width: 750px) {
.pw-container {
max-width: 720px;
}
}

@media (min-width: 992px) {
.pw-container {
max-width: 960px;
}
{% if section.settings.container_max_width >= 720 and section.settings.container_max_width <= 960 %}
.pw-section__{{sec_id}} .pw-container {
max-width: {{section.settings.container_max_width}}px;
}
{% endif %}
}

@media (min-width: 1200px) {
.pw-container {
max-width: 1140px;
}
{% if section.settings.container_max_width >= 720 and section.settings.container_max_width <= 1140 %}
.pw-section__{{sec_id}} .pw-container {
max-width: {{section.settings.container_max_width}}px;
}
{% endif %}
}

@media (min-width: 1400px) {
.pw-container {
max-width: 1320px;
}
{% if section.settings.container_max_width >= 720 and section.settings.container_max_width != 1320 %}
.pw-section__{{sec_id}} .pw-container {
max-width: {{section.settings.container_max_width}}px;
}
{% endif %}
}

.pw-container,
.pw-container-fluid {
padding-right: var(–pw-gutter-x, 15px);
padding-left: var(–pw-gutter-x, 15px);
}

.pw-section__{{sec_id}} {
–pw-gutter-x: 25px;
padding-top: {{section.settings.section_padding_top}}px;
padding-bottom: {{section.settings.section_padding_bottom}}px;
position: relative;
line-height: 1.5;
}

{% if section.settings.is_fullwidth == true %}
.pw-section__{{sec_id}} .pw-container-fluid {
padding-left: 0;
padding-right: 0;
}
{% endif %}

.pw-section__{{sec_id}} .pw-img-wrapper {
position: relative;
min-height: {{section.settings.img_min_height}}vh;
}

.pw-section__{{sec_id}} .pw-img-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
object-position: {{section.settings.background_position_x}}% {{section.settings.background_position_y}}%;
}

.pw-section__{{sec_id}} .pw-img-text {
padding: 10px 15px;
background-color: rgba(0,0,0,0.7);
color: #fff;
font-size: var(–id-fz);
display: inline-block;
position: absolute;
left: 5%;
max-width: 90%;
bottom: 50px;
z-index: 1;
}

@media only screen and (max-width: 749px) {
.pw-section__{{sec_id}} .pw-img-wrapper {
position: relative;
min-height: {{section.settings.img_min_height_mobile}}vh;
}
.pw-section__{{sec_id}} .pw-img-wrapper img {
object-position: {{section.settings.background_position_x_mobile}}% {{section.settings.background_position_y_mobile}}%;
}
.pw-section__{{sec_id}} .pw-img-text {
font-size: 18px;
bottom: 30px;
}
}

{%- endstyle -%}

{% if section.settings.custom_css != blank %}
{%- style -%}
{{section.settings.custom_css}}
{%- endstyle -%}
{% endif %}

{% if section.settings.is_fullwidth == true %}
{% assign container = ‘pw-container-fluid’ %}
{% else %}
{% assign container = ‘pw-container’ %}
{% endif %}

{% if section.settings.background_image == blank %} {% else %} {{ section.settings.background_image.alt | escape }} {% endif %} {% if section.settings.image_description != blank %}
{{ section.settings.image_description }}
{% endif %}

{% schema %}

{
“name”: “[Kava] Image-Lily-02”,
“tag”: “section”,
“class”: “kava-image kava-image-lily-02”,
“settings”: [
{
“type”: “header”,
“content”: “Main settings”
},
{
“type”: “checkbox”,
“id”: “is_fullwidth”,
“default”: true,
“label”: “Full width section”,
“info”: “Overrides сontent width limit”
},
{
“type”: “image_picker”,
“id”: “background_image”,
“label”: “Image”
},
{
“type”: “textarea”,
“id”: “image_description”,
“label”: “Image description”,
“default”: “Beautiful sunsets for real advanturers”
},
{
“type”: “range”,
“id”: “image_description_fz”,
“min”: 10,
“max”: 30,
“step”: 1,
“unit”: “px”,
“label”: “Font size”,
“default”: 24
},
{
“type”: “header”,
“content”: “Desktop”
},
{
“type”: “range”,
“id”: “section_padding_top”,
“min”: 0,
“max”: 200,
“step”: 10,
“unit”: “px”,
“label”: “Section padding-top”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_padding_bottom”,
“min”: 0,
“max”: 200,
“step”: 10,
“unit”: “px”,
“label”: “Section padding-bottom”,
“default”: 0
},
{
“type”: “range”,
“id”: “img_min_height”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “vh”,
“label”: “Image min height”,
“default”: 100
},
{
“type”: “range”,
“id”: “background_position_x”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “Image background position X”,
“default”: 50
},
{
“type”: “range”,
“id”: “background_position_y”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “Image background position Y”,
“default”: 50
},
{
“type”: “header”,
“content”: “Mobile”
},
{
“type”: “range”,
“id”: “section_padding_top_mobile”,
“min”: 0,
“max”: 300,
“step”: 10,
“unit”: “px”,
“label”: “Section padding-top”,
“default”: 0
},
{
“type”: “range”,
“id”: “section_padding_bottom_mobile”,
“min”: 0,
“max”: 300,
“step”: 10,
“unit”: “px”,
“label”: “Section padding-bottom”,
“default”: 0
},
{
“type”: “range”,
“id”: “img_min_height_mobile”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “vh”,
“label”: “Image min height”,
“default”: 100
},
{
“type”: “range”,
“id”: “background_position_x_mobile”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “Image background position X mobile”,
“default”: 50
},
{
“type”: “range”,
“id”: “background_position_y_mobile”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “Image background position Y mobile”,
“default”: 50
},
{
“type”: “header”,
“content”: “Customization”
},
{
“type”: “number”,
“id”: “container_max_width”,
“label”: “Content width limit (px)”,
“default”: 1320
},
{
“type”: “textarea”,
“id”: “custom_css”,
“label”: “Custom CSS”
}
],
“presets”: [
{
“name”: “[Kava] Image-Lily-02”,
“settings”: {
“is_fullwidth”: false,
“section_padding_top”: 50,
“section_padding_bottom”: 50,
“image_description”: “”
}
}
]
}

{% endschema %}

2

I’d suggest immediately after the section ID is assigned, you wrap everything else in if condition that checks for either background_image or image_description:

{% assign sec_id = section.id | slice: -8, 8 | replace: "-", "_" %}
{% if section.settings.image_description != "" or section.settings.background_image %}
	ALL EXISTING CODE GOES HERE
{% endif %}
{% schema %}
.....

That will ensure the entirety of that section is only rendered when either an image description or a background image is set.

1 Like
3

Many Thanks. This works for me. Great help!

4

Please could you show me where on my theme code I would add this?

5

Adjust code of your theme
in “Sections” find KAVA.
Then do as said above.

Does this help?