Slide
You can add a few ‘Image slide’ blocks and add an image, heading, subheading, and button to each of them individually.
| Setting | Description |
| Image | Choose an image for your slideshow. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it. |
| Image mobile | You can use a landscape image for desktop and a square or portrait image for mobile. This allows you to add an image with the appropriate ratio for each device, ensuring optimal display. |
| Heading | To add a heading to the image slide, simply enter the text in the provided field. In the top menu of the field, you can find options to customize the heading, such as making it bold or italic. Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section. |
| Heading size | The heading size setting offers three options to control the heading size of each slide:
|
| Subheading | Include a subheading for the image slide after the heading and customize its appearance using the rich text field. |
| Desktop content position | Set the vertical and horizontal position of the content on a desktop:
*Note: The setting works only if the 'Show container on desktop' option is enabled. |
| Show container on desktop | Enable this option to display the content in a container. |
| Desktop content alignment | You have three alignment options to align content horizontally on desktop (heading, description, and buttons) :
|
| Color scheme | Color scheme allows you to customize every aspect of your theme's colors in the settings. When you apply a color scheme to a specific block, like an image slide, it automatically updates all associated colors for a cohesive and professional look across your website. |
| Container color scheme | Apply a color scheme to the container by selecting the desired one from the list. |
Overlay settings
| Setting | Description |
| Overlay | Select a color to apply as an overlay for the image - simply choose the desired color from the palette. |
| Image overlay opacity | The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to an image on your website. Use the slider to make changes. |
Button settings
| Button label | Decide whether the section includes a button:
|
| Button link (paste a link or search) | Input the URL you want the button to direct to, or select a page from the dropdown list of options that appears when you click on the field. Also, you can click the source button to add a dynamic source as a URL. |
| Button style | In Shopify, button styles use the primary and secondary color sets defined in the theme settings. These ensure buttons are styled consistently across your store. By default, the secondary button uses a white color and appears as an outline button. |
|
Button type
|
Button type: Choose how the button will be displayed:
|
| Icon | Select an icon from the dropdown list; it will be displayed in the button before the text. |
Mobile layout
| Setting | Description |
| Mobile content alignment | Choose the horizontal alignment of the content on mobile:
|