Have your say in Community Polls: What was/is your greatest motivation to start your own business?

How to adjust the position of the text in the slideshow

Solved

How to adjust the position of the text in the slideshow

Pachos
Tourist
10 0 3

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/

 

vitamia01.jpg

Accepted Solution (1)
Roy-ロイ
Shopify Partner
91 19 34

This is an 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>

 

 

 

Let's connect and grow your Shopify business together! 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Connect with me at: roy.solution.partner@gmail.com ( CRO | Site Speed Optimization | Custom Development )

View solution in original post

Replies 5 (5)

Roy-ロイ
Shopify Partner
91 19 34

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: 

 

Roy_1-1721876234357.png

 

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



Let's connect and grow your Shopify business together! 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Connect with me at: roy.solution.partner@gmail.com ( CRO | Site Speed Optimization | Custom Development )

Pachos
Tourist
10 0 3

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-ロイ
Shopify Partner
91 19 34

This is an 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>

 

 

 

Let's connect and grow your Shopify business together! 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - Connect with me at: roy.solution.partner@gmail.com ( CRO | Site Speed Optimization | Custom Development )

Pachos
Tourist
10 0 3

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

Dan-From-Ryviu
Shopify Partner
10261 2039 2110

Hi @Pachos 

Please move code follow this image 

Screenshot 2024-07-25 at 11.20.50.png

- Helpful? Like and Accept solution! Or Support me: Buy Coffees
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.