How to adjust the position of the text in the slideshow

[Pachos]

Hi. I want to change the position of text, moving it below the button in the slideshow. It's a subheading text. I'm using August theme.

website link: https://vitamia.mx/

[Roy-ロイ]

Hi @Pachos , 

I'm happy to help you with that! You can easily achieve this by moving few HTML around in your theme.

To get started, follow these steps:

1. Log in to your Shopify Admin panel.
2. Go to Online Store > Theme > Edit code.
3. In the code editor, navigate to the slideshow-1.liquid file.
4. Find the line of code with "slideshow__text-wrap--desktop" . (Ctrl F and search for the text) 
5. Here you will find the button element with class "slideshow__btn-wrapper". 
6. You will also find the <li> element with class "mt-4 mb-5" . Cut this li element and paste it right after the button element. 
7.  Move the "mt-4" class to the button.

Result: 

Feel free to ask any question in the reply. I would be happy to help.

[Pachos]

Thank you for your response. I'm a little confused where to exactly paste the class attribute.

This is what I found searching "text-wrap slideshow__text-wrap--desktop in the slideshow-1.liquid file:

In red color is the <li> element with class "mt-4 mb-5" and in green color is the button element with class "slideshow__btn-wrapper"

--------------------------------------------------------------------------------------------------------------------------------------------

<div class="slideshow__text-wrap slideshow__text-wrap--desktop">
<div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}">
<div class="container" data-aos="fade" data-aos-anchor-placement="top-bottom" data-aos-once="true">

<div class="d-inline-block text-{% if text_horizontal_alignment == 'right' %}left{% else %}{{text_horizontal_alignment}}{% endif %} ">
<ul class="list-unstyled" >
{%- unless block.settings.slide_toptitle == blank -%}
<li class="mb-3">
<p class="slideshow__toptitle subtop" style="color:{{block.settings.slide_toptitle_color}}">
{{ block.settings.slide_toptitle }}
</p>
</li>
{%- endunless -%}
{%- unless block.settings.slide_title == blank -%}
<li>
<h2 class="h1 mega-title slideshow__title font-family-1" style="color:{{block.settings.slide_title_color}}">
{{ block.settings.slide_title }}
</h2>
</li>
{%- endunless -%}
{%- unless block.settings.subheading == blank -%}
<li class="mt-4 mb-5">
<div class="mega-subtitle slideshow__subtitle d-lg-block fz-2" style="color:{{block.settings.subheading_color}}">
{{ block.settings.subheading }}
</div>
</li>
{%- endunless -%}
</ul>

{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if show_link_button -%}
<style>
.slideshow__btn{{block.id}}{
background-color:{{block.settings.bg_button}};
color:{{block.settings.color_button}};
}
.slideshow__btn{{block.id}}:before{
background-color:{{block.settings.bg_button_hover}};
}
.slideshow__btn{{block.id}}:hover{
color:{{block.settings.color_button_hover}};
}
.slideshow__btn{{block.id}}:hover:before{
background-color:{{block.settings.bg_button_hover}};
}
</style>
<div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}" >
<a href="{{ block.settings.button_link }}" class="btn gradient-theme slideshow__btn slideshow__btn{{block.id}} {%if block.settings.stylebtn %} btn-theme {% else %} btn-underline {% endif %}">
<span>{{ block.settings.button_label | escape }}</span>
</a>
</div>
{%- endif -%}
</div>
</div>
</div>
</div>
</div>

----------------------------------------------------------------------------------------------------------------------------

Do I have to cut all the red text and paste it after the green text?

[Roy-ロイ · Accepted solution]

@Pachos Amazing job finding the exact elements you needed to work on. I have went ahead and made the changes on the given code and arranged it to your liking. 
Just replace the above given code with the below one. I am sure it will solve your problem. 

<div class="slideshow__text-wrap slideshow__text-wrap--desktop">
    <div
        class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}">
        <div class="container" data-aos="fade" data-aos-anchor-placement="top-bottom" data-aos-once="true">

            <div
                class="d-inline-block text-{% if text_horizontal_alignment == 'right' %}left{% else %}{{text_horizontal_alignment}}{% endif %} ">
                <ul class="list-unstyled">
                    {%- unless block.settings.slide_toptitle == blank -%}
                    <li class="mb-3">
                        <p class="slideshow__toptitle subtop" style="color:{{block.settings.slide_toptitle_color}}">
                            {{ block.settings.slide_toptitle }}
                        </p>
                    </li>
                    {%- endunless -%}
                    {%- unless block.settings.slide_title == blank -%}
                    <li>
                        <h2 class="h1 mega-title slideshow__title font-family-1"
                            style="color:{{block.settings.slide_title_color}}">
                            {{ block.settings.slide_title }}
                        </h2>
                    </li>
                    {%- endunless -%}
                </ul>

                {%- assign show_link_button = false -%}
                {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                {%- assign show_link_button = true -%}
                {%- endif -%}
                {%- if show_link_button -%}
                <style>
.slideshow__btn{{block.id}}{
background-color:{{block.settings.bg_button}};
color:{{block.settings.color_button}};
}
.slideshow__btn{{block.id}}:before{
background-color:{{block.settings.bg_button_hover}};
}
.slideshow__btn{{block.id}}:hover{
color:{{block.settings.color_button_hover}};
}
.slideshow__btn{{block.id}}:hover:before{
background-color:{{block.settings.bg_button_hover}};
}
                </style>
                <div
                    class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %} mt-4">
                    <a href="{{ block.settings.button_link }}"
                        class="btn gradient-theme slideshow__btn slideshow__btn{{block.id}} {%if block.settings.stylebtn %} btn-theme {% else %} btn-underline {% endif %}">
                        <span>{{ block.settings.button_label | escape }}</span>
                    </a>
                </div>
                {%- endif -%}
                {%- unless block.settings.subheading == blank -%}
                <div class="mt-4 mb-5">
                    <div class="mega-subtitle slideshow__subtitle d-lg-block fz-2"
                        style="color:{{block.settings.subheading_color}}">
                        {{ block.settings.subheading }}
                    </div>
                </div>
                {%- endunless -%}
            </div>
        </div>
    </div>
</div>
</div>

[Pachos]

It works! Thank you very much! Just another thing, how can I change the font size of that slideshow__subtitle?

[Dan-From-Ryviu]

Hi @Pachos 

Please move code follow this image