How to add old Debut 'Gallery' section to new Dawn theme?

Technical Q&A
, ,

Topic summary

A user is migrating from Shopify’s Debut theme to Dawn 15.0.2 and wants to preserve the “Gallery” section (image-bar.liquid) from Debut.

The Problem:
After copying the image-bar.liquid file to Dawn’s sections folder, images fail to render. The code appears corrupted or reversed in the original post, making direct analysis difficult.

Key Dependencies Identified:

  • CSS styles for .image-bar classes (defining heights, overlays, transitions)
  • The bgset snippet for responsive image loading
  • Additional JavaScript and CSS from other theme files

Proposed Solution:
One respondent suggests transplanting the bgset snippet (used for background image sets) and references Shopify’s official theme migration documentation for OS 2.0. The solution requires identifying and migrating all dependent CSS, JavaScript, and Liquid snippets—not just the section file itself.

Status: The issue remains unresolved with guidance provided but no confirmed fix.

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

I am currently in the process of migrating my store from an older Debut theme to a new 2.0 theme, specifically Dawn version 15.0.2.

Unfortunately, Dawn doesn’t have a section built in that I really like from the old Debut theme and I would like to be able to use it. The section I am referring to is labelled as “Gallery” on the old Debut theme and it is image-bar.liquid

Since I would like to use old Debut section exactly as is, but in my new Dawn theme I created a new image-bar.liquid file under sections on my new theme and copied all of the code as it was. However when I use the section the images are not rendering on the new Dawn theme so it is therefore not working at all. What would I need to change on the code in order to make it work with Dawn?

It’s code (minus the multilingual schema at the end) is as follows:


  {% case section.blocks.size %}
    {% when 1 %}
      {%- assign column_size = '' -%}
    {% when 2 %}
      {%- assign column_size = 'medium-up--one-half' -%}
    {% when 3 %}
      {%- assign column_size = 'medium-up--one-third' -%}
    {% else %}
      {%- assign column_size = 'medium-up--one-quarter' -%}
  {% endcase %}

  {% for block in section.blocks %}
    

      {% if block.settings.link != blank %}
        
          

      {% elsif block.settings.image != blank %}
        

      {% else %}
        

      {% endif %}
      

        {% if block.settings.image == blank %}
          {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
        {% endif %}

        {% if block.settings.cta_label != blank %}
          

            ### {{ block.settings.cta_label | escape }}
          

        {% endif %}
      

      {% if block.settings.link != blank %}
        

      {% else %}
        

      {% endif %}
    

    
  {% endfor %}

{% if section.blocks.size == 0 %}
  {% include 'no-blocks' %}
{% endif %}
2

I know that the above code refers to additional code in my theme.liquid file on the original debut theme. I believe I have found all of that code but I’m not sure where I should add it for the new Dawn theme. That code is as follows:

.image-bar {
  overflow: hidden; }
  @media only screen and (max-width: 749px) {
    .image-bar {
      max-width: 400px;
      margin: 0 auto; } }

.image-bar__item {
  display: block;
  color: var(--color-overlay-title-text);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }

.image-bar__link:hover .image-bar__overlay::before, .image-bar__link:focus .image-bar__overlay::before {
  opacity: var(--hover-overlay-opacity); }

.image-bar__link:focus {
  position: relative;
  z-index: 2; }
  .image-bar__link:focus .image-bar__content {
    outline: 1px dotted #212121;
    outline: 5px auto -webkit-focus-ring-color; }

.image-bar__content, .image-bar__item {
  position: relative;
  width: 100%; }
  .image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
    height: 94px; }
  .image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
    height: 225px; }
  .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
    height: 357px; }
  .image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
    height: 488px; }
  .image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
    height: 582px; }
  @media only screen and (min-width: 750px) {
    .image-bar--x-small .image-bar__content, .image-bar--x-small .image-bar__item {
      height: 125px; }
    .image-bar--small .image-bar__content, .image-bar--small .image-bar__item {
      height: 300px; }
    .image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
      height: 475px; }
    .image-bar--large .image-bar__content, .image-bar--large .image-bar__item {
      height: 650px; }
    .image-bar--x-large .image-bar__content, .image-bar--x-large .image-bar__item {
      height: 775px; } }

.image-bar__overlay::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-image-overlay);
  opacity: var(--opacity-image-overlay); }

.image-bar__caption {
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);
  width: 100%;
  text-align: center;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.4); }
3

@FairWind

images are not rendering

transplant the bg-set snippet as well :

data-bgset="{% include 'bgset', image: block.settings.image %}"

And transplant any relevant css AND Javascript from other files.

Also see https://shopify.dev/docs/storefronts/themes/os20/migration