Can anyone help with slick slide block settings issue?

Store Design
, ,

Topic summary

A user is experiencing CSS issues when attempting to add a mobile image alignment select option to a Slick slider banner component (banner-slide.liquid).

The Problem:

  • Adding a new block setting with a select dropdown for mobile image alignment causes the existing slide/block CSS to break
  • The user has created a class image-mobile--{{ block.settings.image_alignment_mobile }} and corresponding block settings

Code Provided:

  • Block setting configuration with options for left/center/right alignment
  • Custom CSS styling for banner elements including preheading, buttons, and terms text
  • Liquid template code for slideshow component with adaptive image height logic

Current Status:
The discussion remains open with no responses yet. The user is seeking help identifying where their code implementation is causing the CSS conflict. The posted code snippets appear partially corrupted or reversed in formatting, which may be part of the issue.

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

Hi there, I am trying to add a new class with a select option on the slick slider (banner-slide.liquid), but when I add the bock setting it completely throws off the rest of the slide/blocks css. Would someone mind taking a look at where my code is having an issue?

class:

image-mobile–{{ block.settings.image_alignment_mobile }}

Block setting:

{
“type”: “select”,
“id”: “image_alignment_mobile”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_alignment_mobile.option_1.label”
}, {
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_alignment_mobile.option_2.label”
}, {
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_alignment_mobile.option_3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.settings.image_alignment_mobile.label”
}

2

{%- if section.settings.slide_height == ‘adapt_image’ and section.blocks.first.settings.image != blank -%}
{%- style -%}

.preheading {
margin-bottom: 1rem;
}

.preheading h4 {
font-weight: normal !important;
font-family: filson-pro, sans-serif;
text-transform: uppercase;
}

.banner__buttons {
margin-top: 3rem !important;
}

.banner__text-terms {
font-size: 12px;
margin-top: 2rem;
}

.banner__text-terms a {
color: #FF9E21;
}

.banner__text-terms a:hover {
color: #FF9E21;
text-decoration: underline;
}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}:: before, #Slider-{{ section.id }}.media::before, #Slider-{{ section.id }}:not(.banner–mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}

@media screen and (min-width: 750px) {
#Slider-{{ section.id }}:: before, #Slider-{{ section.id }}.media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: ‘’;
display: block;
}
}
{%- endstyle -%}
{%- endif -%}

{%- for block in section.blocks -%} #Slider-{{ section.id }}.banner::after { opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }}; } #Slide-{{ section.id }}-{{ forloop.index }}.banner__content { justify-content: {{ block.settings.text_box_position }}; justify-content: flex-{{ block.settings.text_box_position }}; align-items: center; }
{%- if block.settings.image -%} {{ block.settings.image.alt | escape }} {%- else -%} {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%}
{% if block.settings.bubble_image %} {% endif %} {%- if block.settings.preheading != blank -%}
{{ block.settings.preheading }}
{%- endif -%} {% if block.settings.heading_size == 'large' %}

{{ block.settings.heading | escape }}

{%- elsif block.settings.heading_size == 'medium' -%}

{{ block.settings.heading | escape }}

{%- else -%}

{{ block.settings.heading | escape }}

{%- endif -%} {%- if block.settings.subheading != blank -%}
{{ block.settings.subheading }}
{%- endif -%} {%- if block.settings.subheading2 != blank -%}
{{ block.settings.subheading2 }}
{%- endif -%} {%- if block.settings.button_label != blank -%} {%- endif -%} {%- if block.settings.promoTerms != blank -%}
{{ block.settings.promoTerms }}
{%- endif -%}
{%- endfor -%}

{%- if section.blocks.size > 1 -%}

{% render 'icon-caret' %}
{%- if section.settings.slider_visual == 'counter' -%} 1 / {{ 'general.slider.of' | t }} {{ section.blocks.size }} {%- else-%}
{%- for block in section.blocks -%} {%- if section.settings.slider_visual == 'numbers' -%} {{ forloop.index }} {% else %} {%- endif -%} {%- endfor -%}
{%- endif -%}
{% render 'icon-caret' %}

{%- if section.settings.auto_rotate -%}

{% comment %}
{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}
{% endcomment %}

{%- endif -%}

{%- for block in section.blocks -%} {{ forloop.index }} {%- endfor -%}
{%- endif -%}

{%- if request.design_mode -%}

{%- endif -%}

{%- if section.settings.slider_counter_position == ‘inside’ -%}
{%- style -%}
#Banner_Slider_{{ section.id }}.slideshow__controls {
margin-top: -27px;
border-top: none;
border-bottom: none;
z-index: 99999;
padding-right: 10px;
}
@media screen and (max-width: 820px) {
#Banner_Slider_{{ section.id }}.slideshow__controls {
margin-top: -35px;
}
}
{%- endstyle -%}
{%- endif -%}
{%- if section.settings.slider_button_display == ‘hide’ -%}
{%- style -%}
#Banner_Slider_{{ section.id }}.slideshow__controls .slider-button.slider-button–prev, #Banner_Slider_{{ section.id }}.slideshow__controls .slider-button.slider-button–next {
display: none;
}
{%- endstyle -%}
{%- endif -%}

{%- style -%}
#Banner_Slider_{{ section.id }}.slider-counter__link–active.slider-counter__link–dots .dot {
background-color: {{ section.settings.dot_color }} !important;
}
#Banner_Slider_{{ section.id }}.slideshow__controls {
float: {{ section.settings.slider_button_position }};
}
{%- endstyle -%}

{% schema %}
{
“name”: “Banner Slide”,
“tag”: “section”,
“class”: “spaced-section spaced-section–full-width”,
“settings”: [
{
“type”: “select”,
“id”: “layout”,
“options”: [
{
“value”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.options__1.label”
}, {
“value”: “grid”,
“label”: “t:sections.slideshow.settings.layout.options__2.label”
}
],
“default”: “full_bleed”,
“label”: “t:sections.slideshow.settings.layout.label”
},
{
“type”: “select”,
“id”: “slide_height”,
“options”: [
{
“value”: “adapt_image”,
“label”: “t:sections.slideshow.settings.slide_height.options__1.label”
}, {
“value”: “small”,
“label”: “t:sections.slideshow.settings.slide_height.options__2.label”
}, {
“value”: “medium”,
“label”: “t:sections.slideshow.settings.slide_height.options__3.label”
}, {
“value”: “large”,
“label”: “t:sections.slideshow.settings.slide_height.options__4.label”
}
],
“default”: “adapt_image”,
“label”: “t:sections.slideshow.settings.slide_height.label”
},
{
“type”: “select”,
“id”: “slider_visual”,
“options”: [
{
“value”: “dots”,
“label”: “t:sections.slideshow.settings.slider_visual.options__2.label”
}, {
“value”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.options__1.label”
}, {
“value”: “numbers”,
“label”: “t:sections.slideshow.settings.slider_visual.options__3.label”
}
],
“default”: “counter”,
“label”: “t:sections.slideshow.settings.slider_visual.label”
},
{
“type”: “color”,
“id”: “dot_color”,
“label”: “Dot Color”,
“default”: “#FF9E21”
}, {
“type”: “select”,
“id”: “slider_counter_position”,
“options”: [
{
“value”: “inside”,
“label”: “Inside”
}, {
“value”: “outside”,
“label”: “Outside”
}
],
“default”: “outside”,
“label”: “Outside”
}, {
“type”: “select”,
“id”: “slider_button_display”,
“options”: [
{
“value”: “show”,
“label”: “Show”
}, {
“value”: “hide”,
“label”: “Hide”
}
],
“default”: “show”,
“label”: “Show”
}, {
“type”: “select”,
“id”: “slider_button_position”,
“options”: [
{
“value”: “none”,
“label”: “Center”
}, {
“value”: “left”,
“label”: “Left”
}, {
“value”: “right”,
“label”: “Right”
}
],
“default”: “none”,
“label”: “Position”
}, {
“type”: “checkbox”,
“id”: “auto_rotate”,
“label”: “t:sections.slideshow.settings.auto_rotate.label”,
“default”: false
}, {
“type”: “range”,
“id”: “change_slides_speed”,
“min”: 3,
“max”: 9,
“step”: 2,
“unit”: “s”,
“label”: “t:sections.slideshow.settings.change_slides_speed.label”,
“default”: 5
}, {
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
}, {
“type”: “checkbox”,
“id”: “show_text_below”,
“label”: “t:sections.slideshow.settings.show_text_below.label”,
“default”: true
}, {
“type”: “header”,
“content”: “t:sections.slideshow.settings.accessibility.content”
}, {
“type”: “text”,
“id”: “accessibility_info”,
“label”: “t:sections.slideshow.settings.accessibility.label”,
“info”: “t:sections.slideshow.settings.accessibility.info”,
“default”: “Slideshow about our brand”
}
],
“blocks”: [
{
“type”: “slide”,
“name”: “t:sections.slideshow.blocks.slide.name”,
“limit”: 1,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “t:sections.slideshow.blocks.slide.settings.image.label”
},
{
“type”: “checkbox”,
“id”: “bubble_image”,
“label”: “Bubble Image”,
“default”: false
},
{
“type”: “text”,
“id”: “heading”,
“default”: “Image slide”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading.label”
},
{
“type”: “richtext”,
“id”: “preheading”,
“label”: “t:sections.slideshow.blocks.slide.settings.preheading.label”
}, {
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “large”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading_size.options__1.label”
}, {
“value”: “medium”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading_size.options__2.label”
}, {
“value”: “small”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading_size.options__3.label”
}
],
“default”: “medium”,
“label”: “t:sections.slideshow.blocks.slide.settings.heading_size.label”
}, {
“type”: “richtext”,
“id”: “subheading”,
“default”: “

Subheading One

”,
“label”: “t:sections.slideshow.blocks.slide.settings.subheading.label”
}, {
“type”: “richtext”,
“id”: “subheading2”,
“default”: “

Body

”,
“label”: “t:sections.slideshow.blocks.slide.settings.subheading2.label”
}, {
“type”: “text”,
“id”: “button_label”,
“default”: “Button label”,
“label”: “t:sections.slideshow.blocks.slide.settings.button_label.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.button_label.info”
}, {
“type”: “url”,
“id”: “link”,
“label”: “t:sections.slideshow.blocks.slide.settings.link.label”
}, {
“type”: “richtext”,
“id”: “promoTerms”,
“default”: “

Terms and Conditions

”,
“label”: “t:sections.slideshow.blocks.slide.settings.promoTerms.label”
}, {
“type”: “checkbox”,
“id”: “button_style_secondary”,
“label”: “t:sections.slideshow.blocks.slide.settings.secondary_style.label”,
“default”: false
}, {
“type”: “select”,
“id”: “box_align”,
“options”: [
{
“value”: “top-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__1.label”
},
{
“value”: “top-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__2.label”
},
{
“value”: “top-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__3.label”
},
{
“value”: “middle-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__4.label”
}, {
“value”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__5.label”
}, {
“value”: “middle-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__6.label”
}, {
“value”: “bottom-left”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__7.label”
}, {
“value”: “bottom-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__8.label”
}, {
“value”: “bottom-right”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.options__9.label”
}
],
“default”: “middle-center”,
“label”: “t:sections.slideshow.blocks.slide.settings.box_align.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.box_align.info”
}, {
“type”: “checkbox”,
“id”: “show_text_box”,
“label”: “t:sections.slideshow.blocks.slide.settings.show_text_box.label”,
“default”: true
}, {
“type”: “select”,
“id”: “text_alignment”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label”
}, {
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label”
}, {
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.text_alignment.label”
}, {
“type”: “select”,
“id”: “text_box_position”,
“options”: [
{
“value”: “center”,
“label”: “Center”
}, {
“value”: “start”,
“label”: “Left”
}, {
“value”: “end”,
“label”: “Right”
}
],
“default”: “center”,
“label”: “Block Position”
}, {
“type”: “range”,
“id”: “image_overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 10,
“unit”: “%”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label”,
“default”: 0
}, {
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “white”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__1.label”
},
{
“value”: “burgandy”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__2.label”
},
{
“value”: “goldenrod”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__3.label”
},
{
“value”: “earthy-green”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__4.label”
}, {
“value”: “orange”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__5.label”
}, {
“value”: “soft-white”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__6.label”
}, {
“value”: “green-header”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__7.label”
}, {
“value”: “blue-header”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__8.label”
}, {
“value”: “burgandy-header”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__9.label”
}, {
“value”: “purple”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.options__10.label”
}
],
“default”: “white”,
“label”: “t:sections.slideshow.blocks.slide.settings.color_scheme.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.color_scheme.info”
}, {
“type”: “header”,
“content”: “t:sections.slideshow.settings.mobile.content”
}, {
“type”: “select”,
“id”: “image_alignment_mobile”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_alignment_mobile.option_1.label”
}, {
“value”: “center”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_alignment_mobile.option_2.label”
}, {
“value”: “right”,
“label”: “t:sections.slideshow.blocks.slide.settings.image_alignment_mobile.option_3.label”
}
],
“default”: “center”,
“label”: “t:sections.slideshow.settings.image_alignment_mobile.label”
}
],
“limit”: 30
}
],
“presets”: [
{
“name”: “Banner Slide”,
“blocks”: [
{
“type”: “slide”
}, {
“type”: “slide”
}
]
}
]
}
{% endschema %}}