Slideshow FAQ

Here are a few of the most frequent asked questions about the Split theme homepage slideshow:

Can I change the slideshow position in the page?

Unfortunately the vertical slider cannot be moved in a different location and it only works for the top of the homepage as it was originally designed. There are code limitations in place here related to the animation that make it impossible to add other content above the slider.

Can I change the vertical slideshow to a horizontal slideshow? 

The homepage vertical slideshow is one of the key elements from our theme design. The entire idea of having a "split" design started with this original and new slider that is designed to work when scrolling on desktop screens (what users are so familiar nowadays from the portable devices).

For mobile devices we had to include the "classic" slider because you couldn't have a vertical slider there. 

Unfortunately the desktop slider cannot be easily changed to an usual horizontal slider. This would be a complex work that will require to rebuild the slideshow almost from scratch. 

As an alternative, please try the "image with text" sections as presented in our Looker style:  https://looker-theme.myshopify.com/

How to remove the slideshow section?

You can easily delete the homepage slideshow using the "remove content" option from each slide the theme customizer Slideshow section - screen record

How can I edit the "shop now" button text?

To customize the "shop now" default text for the slideshow buttons and insert different texts for different slides, please open the  snippets/slideshow_content.liquid file and replace this code from lines 17-19 (it may vary depending on the theme version):

{% unless block.settings.link == blank %}
        <a class="button with-icon {{ block.settings.bg_style }}" href="{{ block.settings.link }}">{{ 'general.shop_now' | t }} <span class="icon">{% include 'asset_svg' with 'arrow_icon_smallest' %}</span></a>
      {% endunless %}

with this new one where you can edit the button texts with your own:

 {% unless block.settings.link == blank %}

        {% case forloop.index %}
          {% when 1 %}
            {% assign custom_text = 'Text one' %}
          {% when 2 %}
            {% assign custom_text = 'Text two' %}
          {% when 3 %}
            {% assign custom_text = 'Text three' %}
        {% endcase %}

        <a class="button with-icon {{ block.settings.bg_style }}" href="{{ block.settings.link }}"> {{ custom_text}} <span class="icon">{% include 'asset_svg' with 'arrow_icon_smallest' %}</span></a>
        
      {% endunless %}

What is the recommended size for the uploaded slideshow images? Why are the images cropped?

The homepage slider design in the theme is to display the images full-width. Because of that, a level of cropping on different screen sizes is required and cannot be avoided for the images as this is how all the full width images work in order to display full width on all the screens.

To minimize the cropping, we recommend to use 1680 x 1890px, or even 1920 x 2160px size images for the slideshow images ( Homepage sections).

Also, please avoid including important elements of the image (as text for example) on the edges (please see this image  example from demo).

How to change the slideshow "subheading" text spacing?

If you're after customizing the default line spacing for the slideshow text, please use this CSS code at the end of the assets/css_main.scss.liquid file:

.site-box.box__slideshow-split .slideshow-item .subtitle {
    line-height: 1.3 !important;
}