Adding a Background Image to Your Shopify Store Using Shopify Liquid

Technically, you only need text to set up a Shopify store. Product titles, descriptions, and prices, along with some navigation options and Add to Cart/Buy Now buttons, are all that’s really needed to get a visitor from your homepage to checkout.

But who would ever buy from a store like that? There’s good reason why just about every online merchant includes a generous amount of images on their website in addition to their text — product photography will give visitors a better idea of exactly what you sell, which typically increases conversion rates and reduces return rates, and you can also use images to help connect with the specific demographics you’re targeting and create a positive association with your brand (e.g., a store selling orthopedic shoes might want to include an image of an older adult enjoying a walk with their family). 

An image that takes up the entire background of a page can be particularly striking, further enhancing these benefits if it’s used correctly and optimized.

In this guide, we’ll show you how to use Shopify’s open-source templating language — Shopify Liquid — to add this feature to your store. 

Adding a Background Image Using Shopify Liquid

Shopify’s default Dawn theme comes with a section called “Image banner”, which can be accessed through Shopify’s built-in theme editor. This allows you to add a full-width background image (and also overlay text and other content in front of the image) without writing any code. 

But if you’re using another one of the themes available in the Shopify Theme Store (or, for that matter, a theme from a third-party platform like ThemeForest or TemplateMonster), there might not be a default option that allows you to add a background image with just a couple clicks. In some cases, you might need to add a background image using Shopify Liquid instead. 

The easiest way to do this is to simply copy and paste the “Image banner” code from Shopify’s Dawn theme over to whichever theme you’re currently using:

Step 1. Log in to your Shopify account and select the sales channel you would like to customize in the left sidebar of the main dashboard. 

Step 2. Open the “…” dropdown menu next to the theme you’re currently using and select “Edit code”. 

Step 3. In the left sidebar of Shopify’s code editor, open the “sections” folder and select “Add a new section”. 

Step 4. Add the following code to this new section:

{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}

{%- if section.settings.image_height == 'adapt' and section.settings.image != blank -%}
  {%- style -%}
    @media screen and (max-width: 749px) {
      #Banner-{{ section.id }}::before,
      #Banner-{{ section.id }} .banner__media::before,
      #Banner-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
        padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 }}%;
        content: '';
        display: block;
      }
    }

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

{%- style -%}
  #Banner-{{ section.id }}::after {
    opacity: {{ section.settings.image_overlay_opacity | divided_by: 100.0 }};
  }
{%- endstyle -%}

{%- liquid
  if section.settings.image_behavior == 'ambient'
    assign half_width = '60vw'
    assign full_width = '120vw'
    assign stacked_sizes = '(min-width: 750px) 60vw, 120vw'
    assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
  else
    assign half_width = '50vw'
    assign full_width = '100vw'
    assign stacked_sizes = '(min-width: 750px) 50vw, 100vw'
    assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
  endif
-%}

<div
  id="Banner-{{ section.id }}"
  class="banner banner--content-align-{{ section.settings.desktop_content_alignment }} banner--content-align-mobile-{{ section.settings.mobile_content_alignment }} banner--{{ section.settings.image_height }}{% if section.settings.stack_images_on_mobile and section.settings.image != blank and section.settings.image_2 != blank %} banner--stacked{% endif %}{% if section.settings.image_height == 'adapt' and section.settings.image != blank %} banner--adapt{% endif %}{% if section.settings.show_text_below %} banner--mobile-bottom{%- endif -%}{% if section.settings.show_text_box == false %} banner--desktop-transparent{% endif %}"
>
  {%- if section.settings.image != blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- liquid
        assign image_height = section.settings.image.width | divided_by: section.settings.image.aspect_ratio
        if section.settings.image_2 != blank
          assign image_class = 'banner__media-image-half'
        endif
        if section.settings.image_2 != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image
        | image_url: width: 3840
        | image_tag:
          loading: 'lazy',
          width: section.settings.image.width,
          height: image_height,
          class: image_class,
          sizes: sizes,
          widths: widths
      }}
    </div>
  {%- elsif section.settings.image_2 == blank -%}
    <div class="banner__media media{% if section.settings.image == blank and section.settings.image_2 == blank %} placeholder{% endif %}{% if section.settings.image_2 != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
    </div>
  {%- endif -%}
  {%- if section.settings.image_2 != blank -%}
    <div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
      {%- liquid
        assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
        if section.settings.image != blank
          assign image_class_2 = 'banner__media-image-half'
        endif
        if section.settings.image != blank and section.settings.stack_images_on_mobile
          assign sizes = stacked_sizes
        elsif section.settings.image_2 != blank
          assign sizes = half_width
        else
          assign sizes = full_width
        endif
      -%}
      {{
        section.settings.image_2
        | image_url: width: 3840
        | image_tag:
          loading: 'lazy',
          width: section.settings.image_2.width,
          height: image_height_2,
          class: image_class_2,
          sizes: sizes,
          widths: widths
      }}
    </div>
  {%- endif -%}
  <div class="banner__content banner__content--{{ section.settings.desktop_content_position }} page-width">
    <div class="banner__box content-container content-container--full-width-mobile color-{{ section.settings.color_scheme }} gradient">
      {%- for block in section.blocks -%}
        {%- case block.type -%}
          {%- when 'heading' -%}
            <h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}" {{ block.shopify_attributes }}>{{ block.settings.heading }}</h2>
          {%- when 'text' -%}
            <div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
              <p>{{ block.settings.text }}</p>
            </div>
          {%- when 'buttons' -%}
            <div
              class="banner__buttons{% if block.settings.button_label_1 != blank and block.settings.button_label_2 != blank %} banner__buttons--multiple{% endif %}"
              {{ block.shopify_attributes }}
            >
              {%- if block.settings.button_label_1 != blank -%}
                <a
                  {% if block.settings.button_link_1 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_1 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_1 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_1 | escape -}}
                </a>
              {%- endif -%}
              {%- if block.settings.button_label_2 != blank -%}
                <a
                  {% if block.settings.button_link_2 == blank %}
                    role="link" aria-disabled="true"
                  {% else %}
                    href="{{ block.settings.button_link_2 }}"
                  {% endif %}
                  class="button{% if block.settings.button_style_secondary_2 %} button--secondary{% else %} button--primary{% endif %}"
                >
                  {{- block.settings.button_label_2 | escape -}}
                </a>
              {%- endif -%}
            </div>
        {%- endcase -%}
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.image-banner.name",
  "tag": "section",
  "class": "section",
  "disabled_on": {
    "groups": ["header", "footer"]
  },
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_2",
      "label": "t:sections.image-banner.settings.image_2.label"
    },
    {
      "type": "range",
      "id": "image_overlay_opacity",
      "min": 0,
      "max": 100,
      "step": 10,
      "unit": "%",
      "label": "t:sections.image-banner.settings.image_overlay_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "image_height",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.image-banner.settings.image_height.options__1.label"
        },
        {
          "value": "small",
          "label": "t:sections.image-banner.settings.image_height.options__2.label"
        },
        {
          "value": "medium",
          "label": "t:sections.image-banner.settings.image_height.options__3.label"
        },
        {
          "value": "large",
          "label": "t:sections.image-banner.settings.image_height.options__4.label"
        }
      ],
      "default": "medium",
      "label": "t:sections.image-banner.settings.image_height.label",
      "info": "t:sections.image-banner.settings.image_height.info"
    },
    {
      "type": "select",
      "id": "desktop_content_position",
      "options": [
        {
          "value": "top-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__1.label"
        },
        {
          "value": "top-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__2.label"
        },
        {
          "value": "top-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__3.label"
        },
        {
          "value": "middle-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__4.label"
        },
        {
          "value": "middle-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__5.label"
        },
        {
          "value": "middle-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__6.label"
        },
        {
          "value": "bottom-left",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__7.label"
        },
        {
          "value": "bottom-center",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__8.label"
        },
        {
          "value": "bottom-right",
          "label": "t:sections.image-banner.settings.desktop_content_position.options__9.label"
        }
      ],
      "default": "middle-center",
      "label": "t:sections.image-banner.settings.desktop_content_position.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_box",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_box.label"
    },
    {
      "type": "select",
      "id": "desktop_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.desktop_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.desktop_content_alignment.label"
    },
    {
      "type": "select",
      "id": "color_scheme",
      "options": [
        {
          "value": "accent-1",
          "label": "t:sections.all.colors.accent_1.label"
        },
        {
          "value": "accent-2",
          "label": "t:sections.all.colors.accent_2.label"
        },
        {
          "value": "background-1",
          "label": "t:sections.all.colors.background_1.label"
        },
        {
          "value": "background-2",
          "label": "t:sections.all.colors.background_2.label"
        },
        {
          "value": "inverse",
          "label": "t:sections.all.colors.inverse.label"
        }
      ],
      "default": "background-1",
      "label": "t:sections.all.colors.label",
      "info": "t:sections.image-banner.settings.color_scheme.info"
    },
    {
      "type": "header",
      "content": "t:sections.all.animation.content"
    },
    {
      "type": "select",
      "id": "image_behavior",
      "options": [
        {
          "value": "none",
          "label": "t:sections.all.animation.image_behavior.options__1.label"
        },
        {
          "value": "ambient",
          "label": "t:sections.all.animation.image_behavior.options__2.label"
        }
      ],
      "default": "none",
      "label": "t:sections.all.animation.image_behavior.label"
    },
    {
      "type": "header",
      "content": "t:sections.image-banner.settings.mobile.content"
    },
    {
      "type": "select",
      "id": "mobile_content_alignment",
      "options": [
        {
          "value": "left",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__1.label"
        },
        {
          "value": "center",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__2.label"
        },
        {
          "value": "right",
          "label": "t:sections.image-banner.settings.mobile_content_alignment.options__3.label"
        }
      ],
      "default": "center",
      "label": "t:sections.image-banner.settings.mobile_content_alignment.label"
    },
    {
      "type": "checkbox",
      "id": "stack_images_on_mobile",
      "default": true,
      "label": "t:sections.image-banner.settings.stack_images_on_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "show_text_below",
      "default": true,
      "label": "t:sections.image-banner.settings.show_text_below.label"
    }
  ],
  "blocks": [
    {
      "type": "heading",
      "name": "t:sections.image-banner.blocks.heading.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "default": "Image banner",
          "label": "t:sections.image-banner.blocks.heading.settings.heading.label"
        },
        {
          "type": "select",
          "id": "heading_size",
          "options": [
            {
              "value": "h2",
              "label": "t:sections.all.heading_size.options__1.label"
            },
            {
              "value": "h1",
              "label": "t:sections.all.heading_size.options__2.label"
            },
            {
              "value": "h0",
              "label": "t:sections.all.heading_size.options__3.label"
            }
          ],
          "default": "h1",
          "label": "t:sections.all.heading_size.label"
        }
      ]
    },
    {
      "type": "text",
      "name": "t:sections.image-banner.blocks.text.name",
      "limit": 1,
      "settings": [
        {
          "type": "inline_richtext",
          "id": "text",
          "default": "Give customers details about the banner image(s) or content on the template.",
          "label": "t:sections.image-banner.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "caption-with-letter-spacing",
              "label": "t:sections.image-banner.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.image-banner.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "buttons",
      "name": "t:sections.image-banner.blocks.buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "button_label_1",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_1.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_1.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_1.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_1",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_1.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "default": "Button label",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_label_2.label",
          "info": "t:sections.image-banner.blocks.buttons.settings.button_label_2.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.image-banner.blocks.buttons.settings.button_link_2.label"
        },
        {
          "type": "checkbox",
          "id": "button_style_secondary_2",
          "default": false,
          "label": "t:sections.image-banner.blocks.buttons.settings.button_style_secondary_2.label"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.image-banner.presets.name",
      "blocks": [
        {
          "type": "heading"
        },
        {
          "type": "text"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}

Depending on which theme you’re using, you may also need to adjust other aspects of your theme code in order to get this “Image banner” section to work properly. For example, if you were using Gumroad’s free Star theme and wanted to add this section to your homepage, you would need to add a reference to this new section in your “index.json” template file, and you would also need to copy over the “en.default.schema.json” locale file from the default Dawn theme over to your third-party Star theme.

Once you have all the code set up, you can customize this section through Shopify’s theme editor as needed — you’ll be able to choose any image that’s been uploaded to your Shopify account’s media library to serve as this section’s full-width background.

Adding a Background Image to a Shopify Page Using Shogun

Another option is to use Shogun to add a background image to a Shopify page. If the page you want to edit already exists on your site, you’ll first need to import it from Shopify into Shogun:

• Log into Shopify and select the “Apps” option in the left sidebar of the main dashboard. 
• Open Shogun.
• Go to the “Pages” section of the Shogun app. Here, you’ll see two tabs: “Shogun” and “Shopify”.
• Open the “Shopify” tab — you’ll find a list of pages that haven’t yet been imported into Shogun. Search for the page you would like to import and click on the “Import page” button next to it.

You can also create a new page in Shogun to use as a starting point:

• Go to the “Pages” section of the Shogun app. 
• Hover your mouse over the “Build or edit a page” option. 
• Choose whether you would like to save time by using a template or start with a completely blank page.

Whether you’re importing a page or starting from scratch, the next step is to use Shogun’s visual editor to add your background image: 

• Go to the “Pages” section of the Shogun app, open the “Shogun” tab, and select the page that you would like to edit — this will open the page in Shogun’s visual editor. 
• In the left sidebar of the visual editor, click on the “Elements” icon (it’s the one that looks like a plus sign inside of a circle) — this will open up the visual editor’s element library. 
• Click and hold on the “Container” element, then drag it to wherever you would like your background image to be located.
• Once your “Container” element has been added to the page, you can click on it to access the element’s customization settings. This is where you can determine which image is used as the container’s background — you’ll be able to choose from your Shogun media library as well as your Shopify media library, and there’s an integration with Unsplash that allows you to search through this database of free images directly from the Shogun app.
• After you have chosen your background image and made any other edits that you would like to make, save your changes and publish the page.

With the “Container” element, you’ll also be able to add any of the other options available in the element library (headings, text, icons, buttons, etc.) in front of your background image. Each of these elements is fully customizable, giving you complete control over the look and functionality of this part of your Shopify store.