Vantange Theme - Image Carousel with Text - Mobile Display issues

New Member
3 0 0




I am new the the Shopify community. I have just purchased the Vantage theme and I have a main page with Three sections of "Image Carousel with Text"


In short: I am looking for an option to Always show first text, than image on mobile for text with carousel. regardless of how text is outlined.


Current main page setup of sections:


  1.  Text outlined Right
  2. Text outlined Left
  3. Text Outlined Right


When switching to mobile the sections are automatically aranged.  

When text outlined right mobile first show picture, then Text and vice versa for left out lined text. 


As shown in the screenshot below this give a confusing look to the end user. 


Shopify Screenshot Image with Text.png


How can show text first and image second for this section type?


Regards, Stijn

Shopify Expert
2458 414 518

Hi @SvanderSpank 

If you want to show text first and then image in mobile then you have to change code structure of image with text section, you have to create text first and then image so in mobile it look text first and then image.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

Hello @SvanderSpank,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Performance Site Audit
New Member
3 0 0

Hi @Jasoliya@oscprofessional 


I first would like to try and do it myself to get better understanding of the workings.


I guess the adjustment is done in the folder sections on the file  "image-carousel-with-text.liquid"? There are two instances where I find a right or left text in the code. Is this the place to adjust the code? I have tried to play with line 6 of the code but no changes. 


please advice.


    <div class="row images-with-text">
      <div class="{% unless section.settings.full_width %}desktop-12 tablet-6 {% endunless %}image-with-text-wrapper">

        {% if section.settings.layout == 'left' %}
          {{ image_layout }}
        {% endif %}

        <div class="{{ image_offset }} mobile-3 contained text-with-image text_section{% if section.settings.text_align == 'center' %} text-centered{% elsif section.settings.text_align == 'right' %} text-right{% endif %}">
          {% if section.settings.title != blank %}
            <h3>{{ section.settings.title | escape }}</h3>
          {% endif %}
          {% if section.settings.text != blank %}
            <div class="rte">{{ section.settings.text }}</div>
          {% endif %}
          {% if section.settings.button != blank and != blank %}
            <a href="{{ }}" class="button">
              {{ section.settings.button | escape }}
          {% endif %}

        {% if section.settings.layout == 'right' %}
          {{ image_layout }}
        {% endif %}
  {% if section.settings.full_width %}</div></div>{% endif %}
<style media="screen">