How to create a blurry background for signup form in Shopify

This simple design technique can significantly boost your conversion rates by creating visual interest and a sense of curiosity.

How to set it up in Shopify

Follow our guide:

1. Access your Shopify theme code editor
   • Log into your Shopify admin
   • Go to Online Store → Themes
   • Click “Actions” → “Edit code” on your active theme
2. Locate your theme’s CSS file
   • Navigate to the Assets folder
   • Find your theme’s main CSS file (typically base.css, theme.css, or theme.scss.liquid depending on your theme)
3. Locate your signup form section
   • Find the section containing your newsletter signup or lead capture form in your theme files
   • Note the class name of this section for targeting with CSS
4. Add the blurred background effect
   • Add the following CSS code to your theme’s CSS file:

.your-form-section-class {
  position: relative;
}

.your-form-section-class:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('your-image-url.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.8;
  z-index: 0;
}

.your-form-section-class:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  z-index: 0;
}

.form-container {
  position: relative;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.7);
  padding: 20px;
  border-radius: 8px;
}

The backdrop-filter property is supported in most modern browsers like Chrome, Edge, and Safari, but it may not work in older versions of Firefox or Internet Explorer 11. To ensure better cross-browser support, you can use a fallback by applying filter: blur(8px); directly to the background image:

.your-form-section-class:before {
  filter: blur(8px);
}

This won’t create the same layered blur effect as backdrop-filter, but it ensures a blurred background appearance in unsupported browsers.

Alternative Method: using Liquid Templates

For a more direct approach, you can modify your section’s Liquid template:

1. Locate the section file in the Sections folder
2. Add a background image setting to the schema
3. Add the necessary HTML structure and inline styles

<div class="signup-section" style="position: relative;">
  <div class="blurred-background" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('{{ section.settings.background_image | img_url: 'master' }}');
    background-size: cover;
    background-position: center;
    opacity: 0.8;
    z-index: 0;
  "></div>
  <div class="blur-overlay" style="
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(8px);
    z-index: 0;
  "></div>
  <div class="form-container" style="position: relative; z-index: 1;">
    <!-- Your form content here -->
  </div>
</div>