Discover how to seamlessly blend images, text, and call-to-action buttons to create an engaging slideshow section.
A slideshow is a powerful visual presentation tool that helps convey information in a lively and engaging way. This document will guide you on how to customize slideshows to create impressive and professional presentations.
You can access a slideshow by following these simple steps:
Step 1: From Shopify Admin, click on Online Store > Select Themes > In the Current theme section, click the Customize button.
Step 2: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select Slideshow.
You can configure some general options for the Slideshow section below:
Image height: Customize the height of the slide image.
+ Adapt to first image: The slideshow height will match the height of the first image.
+ Adapt to image: Each slide will adjust its height based on the image being shown. Choose "Adapt to image" to not cut images.
+ Fill screen height: The slideshow will expand to fill the full height of the screen.
+ Fixed height: You can set a custom height (in pixels) for the slideshow.
Fixed height: Sets the slideshow image height on desktop (e.g., 600px).
Mobile image height: Controls the image height on mobile devices.
Auto-rotate slides: When enabled, slides will automatically switch after a set time.
Change slides every: Sets the time interval between slide transitions (in seconds, e.g., 3s)
Stack content below image: When enabled, the content (text and buttons) will appear below the image on mobile instead of overlaying it.
Pagination style: Choose how to display navigation between slides (e.g., Bars – small lines or dots below the slideshow).
Desktop position: Set the alignment of the slideshow content (text/buttons) on desktop: Left, Center, or Right.
To add a Slide block, click the Add block button (plus icon ➕) under the Slideshow section > In the Blocks tab, select Slide.
You can configure some general options for the Slide block below:
Image: Upload or select the main image for the slide (used for desktop view). You can also browse free stock images.
Mobile image: Choose a different image for mobile view. If left blank, the desktop image will be used on mobile by default.
Color scheme: Select a predefined color scheme for the text and background elements on the slide.
Hide background color on content: When enabled, the background color behind the slide content (text/buttons) will be hidden, making the content background transparent.
Image overlay opacity: Adjust the darkness of the overlay on the slide image (0% = no overlay, 100% = fully black overlay). Useful for improving text readability over the image.
Desktop content position: Set the position of the slide content (text/buttons) on desktop screens. Options typically include positions like top left, middle center, bottom right, etc.
Mobile content position: Set the position of the slide content (text/buttons) on mobile screens. Helps ensure optimal content placement across devices.
Content animation: Choose how the slide content appears when the slide loads (e.g., “Slide from bottom”, “Zoom in”, etc.).
Content maximum width: Set the maximum width (in pixels) of the content area within the slide. This helps control the layout and avoid content stretching too wide on large screens.
You can edit a Text block using the following options:
Text: This is where you enter the main message or headline that appears on the slide. You can format the text using bold, italic, link icon, text alignment etc...
Color: Choose between the primary or secondary color styles defined by your theme for the text.
Size: Choose the font size for your text. Options typically include like small, medium, large, extra large, double extra large, four extra large, six extra large.
Hide on the mobile: When enabled, this text will not appear on mobile devices. This can help simplify the mobile layout if space is limited
You can edit a Subtext block using the following options:
Text: Enter the subtext that appears above the main heading on the slide. This is usually used for a short label or category.
Font: There are two font styles you can choose from: body and heading.
Size: Choose the size of the subtext from small or medium
Color: Select the text color
+ Primary: Uses the theme’s primary color.
+ Secondary: Uses the secondary color style defined in your theme settings.
Uppercase: Toggle this on to automatically convert the subtext to ALL UPPERCASE letters. When off, the text appears as typed.
Once the Button Group block is added, you can customize its settings in the left or right-hand sidebar (depending on your screen size).
Stack buttons: This option is located in the settings of the Button group. When this option is enabled (switched on), the buttons in the group will be stacked vertically instead of being aligned horizontally.
To add a Button block, click the Add block button (plus icon ➕) under the Button Group block > In the Blocks tab, select Button.
You can edit a Button block using the following options:
Label: Text that will appear on the button. This is what users will see and click.
Link: The destination URL or page the button will navigate to when clicked. You can paste a specific URL or search for a page/product within your store
Open this link in a new window: When enabled, the button link to open in a new browser tab.
Button size: Choose the size of the button like small, medium or large.
Button style: Select the visual style of the button like outline, solid or link.
Uppercase: Enable to make all letters uppercase in the button text.
Minimum width: Set a minimum width in pixels (px) for the button. The value = 0 to auto. Not apply for link style. Minimum width is automatically optimized for mobile.
You can edit a Heading block using the following options:
Heading: This box is where you input the main headline. It’s the most prominent text in the slide/banner. You can format the text using bold, italic, link icon, text alignment etc..
Heading size: Sets the size of the heading, H0 > H1 > H2 > H3 > H4 > H5 > H6 (H0 is the largest)
Heading tag: Sets the HTML tag of the heading, which does affect SEO. Ex: use H1 for the main headline of a page (each page should only have one H1).
Uppercase: Toggle this on to automatically convert the heading to ALL UPPERCASE letters. When off, the heading appears as typed.
You can edit a Icon block using the following options:
Icon: Choose a default icon from the built-in icon library (e.g., Box).
Custom image icon: Upload your own custom icon image (e.g., PNG or JPG) by clicking Select, or browse free image libraries.
Custom SVG icon: Paste SVG code here to use your own vector icon. You can find SVG icons at websites like Remixicon or Tabler Icons.
Icon height: Adjust the icon size (in pixels) for desktop devices.
Tablet icon height: Adjust the icon size (in pixels) for tablet devices.
Mobile icon height: Adjust the icon size (in pixels) for mobile devices.
Color: Choose the icon color like Primary or secondary
If all three options - Icon, Custom image icon and Custom SVG icon - are added, the priority order will be: Custom SVG icon > Custom image icon > Icon
You can edit a Spacer block using the following options:
Space: Adjusts the amount of space (in pixels) on desktop screens.
Table space: Defines the amount of space for tablet devices, ensuring responsive spacing.
Mobile space: Sets the spacing specifically for mobile screens.
