Add subheader to the Slider (Minimal Theme)

Solved
Highlighted
Tourist
9 1 0

Hey Guys,

I would like the slider to have a sub header under the Header Text in my Minimal Theme. I've looked at another post that does something similar for the Brooklyn Theme. But I can't see how to incorporate the same logic in the Minimal Theme.
Can someone please help me with this. Also, should we be able to add a sub header section, is there a way to customize the fonts for both the header and the sub header separately.

Any help would be appreciated. Thank you.

0 Likes
Highlighted
Tourist
9 1 0

So, I thought I had opened this post on the Shopify Discussions panel, but ended up opening a ticket. :/

I got an answer from the community and I thought I should share that here, in case someone wanted to achieve the same thing.
So the solution was to modify the slider.liquid file. 

 

In the slider.liquid file, look for:

 

            {%- unless block.settings.slide_heading == blank and show_link_button == false -%}
              <div class="slides__text-content text-{{ block.settings.text_alignment }}">
                <div class="slides-text-content-wrapper-{{ block.settings.text_alignment }}">
                  
                  {%- unless block.settings.slide_heading == blank -%}
                    <h2 class="slides__title slides__title--{{ section.settings.text_size }} h1">
                      {{ block.settings.slide_heading | escape }}
                    </h2>
                  {%- endunless -%}
                   
                  {%- if show_link_button -%}
                    <a href="{{ block.settings.button_link }}" class="slides__btn btn">
                      {{ block.settings.button_label | escape }}
                    </a>
                  {%- endif -%}
                </div>
              </div>
            {%- endunless -%}

and replace that with 

 

 

            {%- unless block.settings.slide_heading == blank and show_link_button == false -%}
              <div class="slides__text-content text-{{ block.settings.text_alignment }}">
                <div class="slides-text-content-wrapper-{{ block.settings.text_alignment }}">
                  
                  {%- unless block.settings.slide_heading == blank -%}
                    <h2 class="slides__title slides__title--{{ section.settings.text_size }} h1">
                      {{ block.settings.slide_heading | escape }}
                    </h2>
                  {%- endunless -%}
                                    
                  {% comment %} Code added{% endcomment %}
                  {%- unless block.settings.slide_subheading == blank -%}
                   	<p class="slides__subtitle slides__subtitle--mobile slides__subtitle">
                  	  {{ block.settings.slide_subheading | escape }}
                  	</p>
                  {%- endunless -%}
                  {% comment %} End of Code added{% endcomment %}
                  
                  {%- if show_link_button -%}
                    <a href="{{ block.settings.button_link }}" class="slides__btn btn">
                      {{ block.settings.button_label | escape }}
                    </a>
                  {%- endif -%}
                </div>
              </div>
            {%- endunless -%} 

 

 

0 Likes
Highlighted
Tourist
9 1 0

This is an accepted solution.

Also look for 

{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
          <div class="slides__text-content slides__text-content--mobile text-center" data-mobile-slide-text="{{ forloop.index0 }}" data-text-mobile>
            
            {%- unless block.settings.slide_heading == blank -%}
              <h2 class="slides__title slides__title--mobile slides__title--{{ section.settings.text_size }} h1">
                {{ block.settings.slide_heading | escape }}
              </h2>
            {%- endunless -%}
            
          
            {%- if show_link_button -%}
              <a href="{{ block.settings.button_link }}" class="slides__btn slides__btn--mobile btn">
                {{ block.settings.button_label | escape }}
              </a>
            {%- endif -%}
          </div>
        {%- endunless -%}

And replace it with 

{%- unless block.settings.slide_heading == blank and show_link_button == false -%}
          <div class="slides__text-content slides__text-content--mobile text-center" data-mobile-slide-text="{{ forloop.index0 }}" data-text-mobile>
            
            {%- unless block.settings.slide_heading == blank -%}
              <h2 class="slides__title slides__title--mobile slides__title--{{ section.settings.text_size }} h1">
                {{ block.settings.slide_heading | escape }}
              </h2>
            {%- endunless -%}
            
            {% comment %} Code added{% endcomment %}
            {%- unless block.settings.slide_subheading == blank -%}
              <p class="slides__subtitle slides__subtitle--mobile slides__subtitle">
                {{ block.settings.slide_subheading | escape }}
              </p>
            {%- endunless -%}
            {% comment %} End of Code added{% endcomment %}
            
            {%- if show_link_button -%}
              <a href="{{ block.settings.button_link }}" class="slides__btn slides__btn--mobile btn">
                {{ block.settings.button_label | escape }}
              </a>
            {%- endif -%}
          </div>
        {%- endunless -%}

In the Schema Section add 

{
          "type": "text",
          "id": "slide_subheading",
          "default": "slide_subheading slide",
          "label": {
            "de": "subÜberschrift",
            "en": "subHeading",
            "es": "subTítulo",
            "fr": "subEn-tête",
            "it": "subHeading",
            "ja": "sub見出し",
            "nl": "subKop",
            "pt-BR": "subTítulo",
            "zh-CN": "sub标题",
            "zh-TW": "sub標題"
          }
        },

So all of those changes will add a Subheading Field to the slider Section of your Minimal theme.

0 Likes
Highlighted
New Member
2 0 0

Great job my friend. The only issue is, when I go on the mobile version, the subheading stays like this.... Any idea how to fix it?

 

Capture.JPG

0 Likes
Highlighted
Tourist
9 1 0

Sorry 21chakras,


@21chakras wrote:

Great job my friend. The only issue is, when I go on the mobile version, the subheading stays like this.... Any idea how to fix it?

 

Capture.JPG



I've not kept up with the Shopify community mails. Were you able to fix your issue?

0 Likes
Highlighted
New Member
2 0 0

Yes, fixed

0 Likes