Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Kalles - Slideshow

Annie

Written by Annie

Last updated

2318 views

On this page


This section allows you to create the Slider with images, Customers can swipe to see the next images or they watch it autoplay. You also can add texts, call-out buttons for them.

section.gif

It is usually located on Homepage. However, Shopify 2.0 allows you to add the Slideshow section to any pages that you wanna use.

Steps: In the theme editor (Customize) > Add section > Slideshow > Save.

1. Slideshow contents

Click on Slideshow > ADD BLOCK > choose the block you want to add.

block.gif

1.1. Image slide (parent)

This is an important block, you can choose image for slideshow (both desktop and mobile version) and config the content inside this image.

im1.gif
  • Image position, Image color (before loaded image), Link image, Image effect

2023-06-10_17-10-13.gif
  • Content align, Content position: please follow the video below to config it.

Notice: Content position option only works with Content width: Auto

  • CONTENT BACKGROUND, COLOR OPTIONS: help you config the color/design for the content box.

1.2. Other blocks (Child)

  • Text: you can add a text to the banner image and you can adjust text with many options like Font family, Font size, color, etc.

  • Button: This block allows you to create a button for the banner, you can customize this button with many options like add a link, style, effect, color, etc.

  • HTML: you can add a HTML codes

  • Image (Child): With this block, you can add a Image(child) inside the Image(parent) and you can adjust the Image(child) more creatively.

  • Countdown timer: This block help you add the countdown timer and set it very easily just by adding the date countdown into.

  • Newsletter: you can add a subscribe form here.

  • Space HTML: This block allows you to create a separator line for this section.

You can refer to this video to know more about these blocks:

2. How to configure the Slideshow section?

GENERAL OPTIONS:

  • Section Height option: This option allows you to configure the height for the Slideshow section. There are many choices for you to choose, if you choose the Custom height option, you can configure the height for all devices: Desktop, Tablet and mobile devices; you can enter different values for the height for the Slideshow section.

2023-05-31_16-01-08.gif

OPTIONS FOR CAROUSEL LAYOUT:

  • You can adjust Slider effect, Enable Loop and Autoplay feature

  • Change style for Prev next button and Page dots

2023-05-31_16-07-37.gif

DESIGN OPTIONS:

Please follow this guideline to config Layout, Background, Margin/Padding for the section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.