Image with text slider 🔥

A guide to set up and customize an Image with text slider in Zest theme

The Image with text slider is a quick and interactive way to showcase content and information in carousel form with the image and video on your site.

This section lets you display your most outstanding and popular information or shout out about what's new with a call-to-action button.

Steps:

In the theme editor (Customize) > click Add section
Select Image with text slider.
Save.

Section settings

General

Adjust the Container type (Fixed width/ Full width/ Stretched width) of this section.

You can change the Image height (Adapt/ Small/ Medium/ Large), Image width (40%-80%), and Image position (Left/Right) to make it look reasonable with the text and your website layout.

The corresponding image will change when customers slide to another content.

Therefore, the setting allows you to make modifications to the slider:

Enable/ disable the Show pagination/ Show navigation/ Auto-rotates slides (the slideshow will slide automatically).
Set the duration time to change slides in Change slides every field from 2s-10s (Only works when you enable Auto-rotates slides)
Change the Desktop controls position to the Left/ Center/ Right and Pagination type (Dots/ Counter)

Accessibility

The section also lets you fill in the Slider description for customers using screen readers.

Block settings

Image slide

Adjust the Color scheme tabs for the blocks.

You can add Images for desktop and mobile versions separately (Desktop image/ Mobile image).

Video slide

Not only adding an Image, you can also add a Video for the block which makes the section look dynamic and outstanding.

Adjust the Color scheme tabs for the blocks.

You can only use the Shopify-hosted video, select a video from your Files, and add Video alt text for it.

Content settings

You can change the content position on the desktop by selecting the option in the Desktop content position field:

Top left / Top center / Top right
Middle left / Middle center / Middle right
Bottom left / Bottom center / Bottom right

And adjust the Desktop content alignment field:

Left
Center
Right

Add the content you want in the Heading, Subheading, and Description to attract customers' attention

Leave them blank if you do not want to display them

You can also change the Heading size to Small/ Medium/ Large/ Extra-large and the Description size to Small/ Medium/ Large to make the content look balanced on your website.