how to create top banner section for section themes

Solved
AvidBrio
Shopify Expert
144 7 12
  • debut theme top banner section 
  • top banner for every page 
  • dynamic top banner 
If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes
AvidBrio
Shopify Expert
144 7 12

This is an accepted solution.

here is I create custom solution 

you can add this section to any templates  

 

{% section 'top-banner' %}

 


section file   top-banner.liquid 

 

<style>

.section-top-banner {
  	display: flex;
	 
/*	background-image: url({{ section.settings.bgimg | image_url }}); */
	background-repeat: no-repeat;
        background-size: cover;
        margin: 0;
    height: 350px;
    align-items: center;
    justify-content: center;
    color: #fff;     margin-bottom: 50px;
}
</style>

<header class="collection-header">
		
    <div class="page-width_top_banner">
      <div class=" text-center">
        <h1 class="section-top-banner"  style="background-image:url('{{ section.settings.bgimg.src | img_url: 'master' }}')"​​​​​​ >
            
          <span role="text"> {% if section.settings.title != blank %} 
              {{ section.settings.title }}  
            {% else %}
            {{ page.title }}
          {% endif %} 
          </span>
        </h1>
        
      </div>
    </div>
  
  </header>

  {% schema %}
  {
    "name": "Contact us top banner",
    "settings": [
      {
        "type": "text",
        "id": "title",
		"label": "Heading"
      },
      {
        "id": "bgimg",
        "type": "image_picker",
        "label": "page starting html content"
      }
       
	],       
    "presets": [
      {
        "name": "Contact us top banner",
        "category": "Custom"
      }
    ]
  }
  {% endschema %}
  
  {% stylesheet %}
  {% endstylesheet %}
  
  {% javascript %}
  {% endjavascript %}
  

 




If you find our comment helpful, hit the like button and accept it as a solution.
Want us to implement custom changes in your store? Contact us
Email me directly - jim@avidbrio.com
0 Likes