Slide

Overview #

The Slide block is designed to be used within a theme's slideshow section, allowing users to display slides with various text, imagery, and video options. This block is ideal for highlighting product features or details in a visually engaging manner.

Key components and functionality #

Slide block

The Slide block is a versatile element that integrates text, imagery, and video within a slideshow. It is perfect for showcasing product features or details.

Icon

This setting allows you to specify an icon for the slide. The default icon is mood. Icons can visually represent the mood or theme of the slide.

Heading

The heading setting lets you define the title of the slide. By default, it is set to Slide. This title will be prominently displayed on the slide.

Content

This setting allows you to add rich text content to the slide. The default content is a paragraph that reads: "Slide content will be added to the slideshow’s text-based interface. This is a great place to highlight product features or details."

Imagery settings

Imagery settings enable you to add images to your slide, enhancing its visual appeal. You can select an image using the image picker tool, which can be used to showcase products or other relevant visuals.

Video

You can add a video to your slide using a Shopify-hosted video URL. This setting allows you to incorporate dynamic content into your slideshow, making it more engaging.

Overlay settings

Overlay settings allow you to customize the appearance of the slide when it is inactive.

Inactive overlay color

This setting lets you choose a color for the overlay when the slide is inactive. The default color is #000000. This overlay can help maintain a consistent look and feel across slides.

Overlay opacity

The overlay opacity setting allows you to adjust the transparency of the overlay. It ranges from 0% to 100%, with a default value of 48%. This setting helps in balancing the visibility of the overlay with the underlying content.

Visibility settings

Visibility settings control how the slide is displayed on different devices.

Visibility

This setting controls the visibility of the slide on different devices. Options include "Do not hide," "Hide on desktop," and "Hide on mobile," with the default being "Do not hide." This ensures that the slide is displayed appropriately across various devices.

Available in sections #

• Slideshow with text controls

Usage notes #

• Responsive design: Ensure that images and text are optimized for both desktop and mobile views to maintain a seamless user experience.
• Performance: Use appropriately sized images and videos to avoid slow loading times, which can detract from the user experience.
• Accessibility: Ensure that text and overlay colors meet accessibility standards for contrast, making the content readable for all users.

Usage examples #

1. Product Highlight: Use the Slide block to showcase a new product by adding an image, a descriptive heading, and a brief paragraph highlighting its features. Enhance the slide with an icon that represents the product's category or mood.

2. Promotional Video: Incorporate a Shopify-hosted video to promote a special offer or event. Use the overlay settings to ensure the video stands out while maintaining brand consistency.

3. Thematic Presentation: Create a series of slides with different icons and headings to narrate a story or theme. Adjust the visibility settings to tailor the presentation for desktop or mobile viewers.