Full width banner to all pages – Shopify

Shopify uses it’s a Rich Text editor to give merchants the option of adding content to their pages. Whether a product, collection, blog post or just an about us page all follow the same flow and have the same formatting for that content. Breaking this up into a more segmented flow takes code knowledge and modifications to the theme files which we understand not all store owners will be able to do.

Editing your theme code to add this feature

Required files: section [full-banner.liquid];
  • In the Section directory, Create a new file named full-banner.liquid and add the following code:
{% if section.settings.enable_full_banner %}

    <div class="section--fullwidth-banner" id="section--fullwidth-banner" style="background-image: url('{{section.settings.img | img_url: 'master' }}')">
      <h2 class="title"><span> {{page_title}}</span></h2>
    </div>

  <style>
    .section--fullwidth-banner{
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: {{section.settings.img_height}}px;
      overflow: visible;
      text-align: center;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: 50% 50%;
    }
    .section--fullwidth-banner .title{

      z-index: 1;
      width: 100%;
      font-weight: 900;
      font-size: 170%;

    }
    .section--fullwidth-banner .title span{
      display: inline-block;
      padding: 10px 20px;
      background: rgba(255,255,255,0.8);
      color: #000;
    }
    {% comment %} .section--fullwidth-banner img{
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      right: 0;
    } {% endcomment %}

  </style>


{% endif %}

{% schema %}
  {
    "name": "Full-width Banner",
    "settings": [
      {
        "type": "checkbox",
        "id": "enable_full_banner",
        "label": "Enable Fullwidth Banner",
        "default": true
      },
      {
        "type": "image_picker",
        "id": "img",
        "label": "Default image"
      },
      {
        "type": "number",
        "id": "img_height",
        "label": "Image height in px",
            "default": 200
      }
    ]
  }

{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

 

  • In the Layout directory, find theme.liquid and locate {% section 'header' %}. Add the following code right after the {% section 'header' %} :
{%- if template contains 'page' or template contains 'collection' -%}
        {% section 'full-banner' %}
    {% endif %}

 

  • Congrats, You’ve completed the coding parts.
  • Now you can see this in any pages and collections. It’s enabled by default.
  • Also, it’s available in Themes>Customize theme section where you could disable this feature or change the image

 

  • It’s not available in the home or product page but you could configure this through theme.liquid file.

You’ve completed this feature. 🙂

cart search