Add an image block in 'Image Banner' in Dawn

Store Design
,

Topic summary

A user asks how to add an image block above the title within Dawn theme’s Image Banner section, rather than just changing the background.

Solution provided involves two steps:

  1. Edit slideshow.liquid file: Insert custom code before the heading block to create an image picker field that displays above the title
  2. Update schema section: Add configuration options for the special image, including image picker, width control (50-300px), and bottom margin (0-100px)

Technical details:

  • Code placement: Sections > slideshow.liquid, before {%- if block.settings.heading != blank -%}
  • Schema updates enable customization controls in the theme editor
  • Backup theme before editing recommended

Follow-up issues:

  • One user reports mobile CSS solution not working for component-slideshow.css
  • Another user cannot see new options in banner block after implementation, noting differences between their code and provided screenshots

The discussion remains open with unresolved implementation questions from multiple users attempting the solution.

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

How do I add an image block within an image banner section in Dawn?

Screenshot 2023-02-12 at 05.17.00.png
Screenshot 2023-02-12 at 05.17.00.png1394×692 220 KB

URL: www.sunshinefoodsuk.com / pass:sunshine

2

@dan_hoo

Hi,

Please add the code below to Assets > component-slideshow.css file.

@media screen and (min-width: 750px) {
  .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-accent-2.gradient.slideshow__text--center.slideshow__text-mobile--center {
    background: url(https://cdn.shopify.com/s/files/Your_PC_Image_File.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
  }
}
@media screen and (max-width: 749px) {
  .slideshow__text.banner__box.content-container.content-container--full-width-mobile.color-accent-2.gradient.slideshow__text--center.slideshow__text-mobile--center {
    background: url(https://cdn.shopify.com/s/files/Your_Mobile_Image_File.jpg);
    background-position: center;
    background-size: contain;
    background-repeat: repeat;
  }
}

Please change the full URL of the background image per your needs.

The top part is for PC and the bottom part is for mobile.

The image will be applied to all content block (all slideshow images).

Hope it helps.

3

Hi David, this solution changes the background from a solid colour to a repeated image. I want to add an image block that sits above the title.

4

@dan_hoo

Hi,

I thought you wanted the background for the content box.

If you want to add an image, you need to edit the slideshow.liquid file.

Please follow the steps below.

  1. Go to Sections > slideshow.liquid file.

  2. Find (ctrl+F) —> {%- if block.settings.heading != blank -%}

  3. Before the code {%- if block.settings.heading != blank -%}, add the code below.

{% comment %} Special Image above the title Start {% endcomment %}
            {% if block.settings.sp_image != blank %}
              

              
            {% endif %}
            {% comment %} Special Image above the title End {% endcomment %}

It will be as below.

20230212_175945.png
20230212_175945.png1878×771 79.2 KB

  1. After adding the above code, scroll down and find “blocks” under schema (as the screenshot below).

20230212_180522.png
20230212_180522.png1215×856 58.2 KB

  1. Add the code below as the screenshot above.
{
          "type": "image_picker",
          "id": "sp_image",
          "label": "Special Image",
          "info": "Add special image above the title"
        },
        {
          "type": "range",
          "id": "sp_image_width",
          "min": 50,
          "max": 300,
          "step": 5,
          "unit": "px",
          "label": "Special image width",
          "default": 100
        },
        {
          "type": "range",
          "id": "sp_image_bottom",
          "min": 0,
          "max": 100,
          "step": 2,
          "unit": "px",
          "label": "Special image bottom margin",
          "default": 12
        },

  1. Save the file.

  2. Go to Customize the theme.

  3. In the block, you will see an image picker, image size (width), and bottom margin of the image.

20230212_181028.png
20230212_181028.png691×752 195 KB

Before you edit the code, please make a BACKUP copy of your theme!!!

If you were unable to edit the code, please send me a PM.

Hope it helps.

5

Thanks, I’ll give it a try.

6

Hey @DavidEKim I’ve added the mobile block to the Assets > component-slideshow.css file, but am not seeing any changes when viewing on mobile.

link is here: https://q2lu1kdx2wt3u5hr-55863771214.shopifypreview.com/pages?preview_key=114e442afe24bed01d004d9a454aa730

I’m just basically wanting the event logo to sit on top of the image.

7

Good Afternoon David,

I have attempted to implement your solution, but do not see any changes or new options in the banner block. I see some differences in my liquid vs your screenshots, perhaps they updated it? Thank you so much for your help.