Shopify - Banner Jumbo con texto y botones centrado

jumbo-banner.liquid

{% comment %}
    @rotcl
{% endcomment %}


<header class="desktop masthead" style="background-image:url('{{ section.settings.bg_image | img_url: '2000x'}}');">
    {% if section.settings.bg_image != nil %}
    <div class="container">
        <div class="row">
            <div class="position--{{ section.settings.text_position }} col-md-10 col-lg-8 mx-auto">
                <div class="align--{{ section.settings.text_align }} site-heading">
                    {% if section.settings.pretext != blank %}
                    <div class="pretext">
                        {{ section.settings.pretext }}
                    </div>
                    {% endif %} {% if section.settings.title != nil %}
                    <h1 class="headline" style="color: {{ settings.iwto_original }}">{{ section.settings.title }}</h1>{% endif %}{% if section.settings.subtitle != nil %}<span class="subtitle" style="color: {{ settings.iwto_original }}"><p>{{ section.settings.subtitle }}</p></span>{% endif %} {% if section.settings.button1_link != blank %}
                    <a href="{{ section.settings.button1_link }}" class="action_button first_button highlight-true">
                          {{ section.settings.button1 }}
                        </a> {% endif %} {% if section.settings.button2_link != blank %}
                    <a href="{{ section.settings.button2_link }}" class="action_button second_button highlight-true">
                          {{ section.settings.button2 }}
                        </a> {% endif %}
                </div>

            </div>
        </div>
    </div>
    {% endif %}
</header>
<header class="mobile masthead" style="background-image:url('{{ section.settings.mb_image | img_url: '2000x'}}');">
    {% if section.settings.bg_image != nil %}
    <div class="container">
        <div class="row">
            <div class="position--{{ section.settings.text_position }} col-md-10 col-lg-8 mx-auto">
                <div class="align--{{ section.settings.text_align }} site-heading">
                    {% if section.settings.pretext != blank %}
                    <div class="pretext">
                        {{ section.settings.pretext }}
                    </div>
                    {% endif %} {% if section.settings.title != nil %}
                    <h1 class="headline" style="color: {{ settings.iwto_original }}">{{ section.settings.title }}</h1>{% endif %}{% if section.settings.subtitle != nil %}<span class="subtitle" style="color: {{ settings.iwto_original }}"><p>{{ section.settings.subtitle }}</p></span>{% endif %} {% if section.settings.button1_link != blank %}
                    <a href="{{ section.settings.button1_link }}" class="action_button first_button highlight-true">
                          {{ section.settings.button1 }}
                        </a> {% endif %} {% if section.settings.button2_link != blank %}
                    <a href="{{ section.settings.button2_link }}" class="action_button second_button highlight-true">
                          {{ section.settings.button2 }}
                        </a> {% endif %}
                </div>

            </div>
        </div>
    </div>
    {% endif %}
</header>


<style>
  

 header.masthead{
     margin-bottom:0;
     background:no-repeat 50%;
     background-color:#6c757d;
     background-attachment:scroll;
     position:relative;
     background-size:cover 
}
 header.masthead .overlay{
     position:absolute;
     top:0;
     left:0;
     height:100%;
     width:100%;
     background-color:#212529;
     opacity:.5 
}
 header.masthead .page-heading,header.masthead .post-heading,header.masthead .site-heading{
     padding:200px 0 150px;
     color:#fff 
}
 @media only screen and (min-width:768px){
     header.masthead .page-heading,header.masthead .post-heading,header.masthead .site-heading{
         padding:200px 0 
    }
}


</style>

{% schema %}
{
  "name": "Jumbo banner",
  "class": "act-section",
  "settings": [
	{
		"type": "image_picker",
		"id": "bg_image",
		"label": "Imagen fondo",
		"info": "Ojalá bien gramde"
	},
	{
		"type": "image_picker",
		"id": "mb_image",
		"label": "Imagen fondo Mobile",
		"info": "Ojalá bien gramde tambiem"
	},
	{
		"type": "richtext",
		"id": "pretext",
		"label": "mini título",
		"info": "Debug"
	},
	{
		"type": "text",
		"id": "title",
		"label": "Título",
		"info": "Debug"
	},
	{
		"type": "richtext",
		"id": "subtitle",
		"label": "Subtitulo",
		"info": "Debug"
	},
	{
      "type": "select",
      "id": "text_position",
      "label": "Posición del texto",
      "options": [
        {
          "value": "left",
          "label": "Izquierda"
        },
        {
          "value": "center",
          "label": "Centrado"
        },
        {
          "value": "right",
          "label": "Derecha"
        }
      ]
    },
	{
      "type": "select",
      "id": "text_align",
      "label": "Alineado texto",
      "options": [
        {
          "value": "left",
          "label": "Izquierda"
        },
        {
          "value": "center",
          "label": "Centrado"
        },
        {
          "value": "right",
          "label": "Derecha"
        }
      ]
    },
	{
      "type": "text",
      "id": "button1",
      "label": "Texto botón 1"
    },
    {
      "type": "url",
      "id": "button1_link",
      "label": "Link botón 1"
    },
	{
      "type": "text",
      "id": "button2",
      "label": "Texto botón 2"
    },
    {
      "type": "url",
      "id": "button2_link",
      "label": "Link botón 2"
    }
  ],
  "presets": [{
    "name": "Jumbo banner",
    "category": "Custom"
  }]

}
{% endschema %}

styles.scss

.mx-auto {
  width: 100%;

  @include respond-to('large'){
    max-width: 960px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  @include respond-to('xlarge'){
    max-width: 1200px;
  }
  @include respond-to('medium'){
    width: 100%;
  }
  @include respond-to('small'){
    margin: 5% 0;
    font-size: 3vw;
    position: static;
    transform: none;
    width: 100%;
  }
  a {
    pointer-events: all;
  }
  &.position--center {
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    @include respond-to('medium'){
      width: 85%;
    }
    @include respond-to('small'){
      width: 100%;
      padding: 0 5%;
      margin: 5% 0;
    }
  }
  &.position--left {
    left: 0;
    text-align: left;
    padding: 0 2%;
  }
  &.position--right {
    right: 0;
    text-align: right;
    padding: 0 2%;
  }
  .pretext {
    color: {{ settings.banner_color }};
    font-family: {{ settings.slideshow_subtitle__font.family }}, {{ settings.slideshow_subtitle__font.fallback_families }};
    font-weight: {{ settings.slideshow_subtitle__font.weight }};
    text-transform: {{settings.slideshow_subtitle_font_style}};
    font-size: {{settings.slideshow_subtitle_size}}px;
    letter-spacing: {{settings.slideshow_subtitle_letter_spacing}}px;
    margin-bottom: 10px;
    {% if settings.slideshow_shadow != blank %}
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    {% endif %}
    @include respond-to('small'){
      font-size: 1.4em;
      color: {{ settings.regular_color }};
      text-shadow: none;
    }
    @include respond-to('medium'){
      font-size: {{settings.slideshow_subtitle_size | divided_by: 1.5 }}px;
    }
    @include respond-to('large'){
      font-size: {{settings.slideshow_subtitle_size | divided_by: 1.2 }}px;
    }
    @include respond-to('larger'){
      font-size: {{settings.slideshow_subtitle_size}}px;
    }
  }
  .headline {
    color: {{ settings.banner_color }};
    font-family: {{ settings.slideshow_headline__font.family }}, {{ settings.slideshow_headline__font.fallback_families }};
    font-weight: {{ settings.slideshow_headline__font.weight }};
    text-transform: {{ settings.slideshow_headline_font_style }};
    font-size: {{ settings.slideshow_headline_size }}px;
    letter-spacing: {{ settings.slideshow_headline_letter_spacing }}px;
    line-height: 1.4em;
    margin-bottom: 15px;
    {% if settings.slideshow_headline_shadow != blank %}
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    {% endif %}

    @include respond-to('small'){
      font-size: 2.6em;
      color: {{ settings.regular_color }};
      text-shadow: none;
    }
    @include respond-to('medium'){
      font-size: {{settings.slideshow_headline_size | divided_by: 1.5 }}px;
    }
    @include respond-to('large'){
      font-size: {{settings.slideshow_headline_size | divided_by: 1.2 }}px;
    }
    @include respond-to('larger'){
      font-size: {{settings.slideshow_headline_size}}px;
    }
  }
  .subtitle {
    color: {{ settings.banner_color }};
    font-family: {{ settings.slideshow_subtitle__font.family }}, {{ settings.slideshow_subtitle__font.fallback_families }};
    font-weight: {{ settings.slideshow_subtitle__font.weight }};
    text-transform: {{settings.slideshow_subtitle_font_style}};
    font-size: {{settings.slideshow_subtitle_size}}px;
    letter-spacing: {{settings.slideshow_subtitle_letter_spacing}}px;
    position: relative;
    {% if settings.slideshow_shadow != blank %}
      text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
    {% endif %}

    @include respond-to('small'){
      font-size: 1.4em;
      color: {{ settings.regular_color }};
      text-shadow: none;
    }
    @include respond-to('medium'){
      font-size: {{settings.slideshow_subtitle_size | divided_by: 1.5 }}px;
    }
    @include respond-to('large'){
      font-size: {{settings.slideshow_subtitle_size | divided_by: 1.2 }}px;
    }
    @include respond-to('larger'){
      font-size: {{settings.slideshow_subtitle_size}}px;
    }
  }
  .pretext:empty,
  .headline:empty,
  .subtitle:empty {
    display: none;
    &:before {
      height: 0;
    }
  }
}

.subtitle p a {
  pointer-events: all;
}

.site-heading {
  display: inline-block;
  float: none;
  max-width: 60%;
  // font-size:0 eliminates offset buttons when they are stacked (inline-block ghost space)
  font-size: 0;
  @include respond-to('medium'){
    max-width: 80%;
  }
  @include respond-to('small'){
    width: 100%;
    max-width: 100%;
  }
  .action_button {
    margin: 10px;
    @include respond-to('medium'){
      // tightens up stacked buttons on iPad
      margin: 5px;
    }
    @include respond-to('small'){
      font-size: 16px;
    }
  }
  &.align--center {
    text-align: center;
    @include respond-to('medium'){
      max-width: 80%;
    }
    @include respond-to('small'){
      width: 100%;
      max-width: 100%;
    }
  }
  &.align--left {
    text-align: left;
    &:first-child .action_button {
      margin-left: 0;
    }
    .subtitle:before {
      margin-left: 0;
    }
  }
  &.align--right {
    text-align: right;
    &:last-child .action_button {
      margin-right: 0;
    }
    .subtitle:before {
      margin-right: 0;
    }
  }
}

eCommerce - ⚡️ Shopify ⚡️

Ante la necesidad, hice un banner responsive con texto adentro, está hecho para compatibilizar en Turbo con bootstrap.
Solo agregar jumbo-banner.liquid como section, y agregar dentro del Home / Pág internas.