Image with text slider
A guide to set up and customize an Image with text slider in Zest theme
Last updated
A guide to set up and customize an Image with text slider in Zest theme
Last updated
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.
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)
The section also lets you fill in the Slider description for customers using screen readers.
Adjust the Color scheme tabs for the blocks.
You can add Images for desktop and mobile versions separately (Desktop image/ Mobile image).
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.
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.
The call-to-action button will get the link from the provided Button link field.
Give the button a label, and a specific Button style:
Primary button
Secondary button
Underline button
White button
and the Button size:
Default
Small
Medium
