Slide block
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 font family: |
In Theme Settings, the heading can have a different font family from the body text. You can apply one of these styles to the headings in your slides. |
| Heading size | The heading size setting offers three options to control the heading size of each slide:
|
| Heading color | Heading color can be customized by using: Text, Text secondary, and Heading colors, which are defined in the theme settings according to each color scheme. Pick the right color from the dropdown list. |
| Font weight | Font weight defines the thickness or boldness of text on your store. Available options for heading:
|
| Subheading | Include a subheading for image slide after heading and customize its appearance using the rich text field. |
| Subheading color | Subheading color can be customized by using: Text, Text secondary, and Heading colors, which are defined in the theme settings according to each color scheme. Pick the right color from the dropdown list. |
| Show container on desktop | Enable the button to add the content into a container with a background color. Disable the button if you want all content displayed on the image banner. |
| Desktop content alignment | You have three alignment options to align content horizontally on desktop (heading, description, and buttons) :
|
| 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. |
| 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 image slide, it automatically updates all associated colors for a cohesive and professional look across your website. |
Button settings
Button 1
| 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 style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store. |
| Button outline | None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look. Outline: The button has a visible border around it, but the background is transparent. Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent. |
Button 2
| Button label | Enter the text that you want to display on the 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 style can be customized by using the primary and secondary button color sets, which are defined in the theme settings. These color sets allow you to style buttons consistently across your store. |
| Button outline | None: The button has no outline. It appears flat, with just the background color and text, giving it a clean, minimal look. Outline: The button has a visible border around it, but the background is transparent. Outline on Hover: The button appears flat without a border or background initially. However, when the user hovers over it, a visible border appears, and the button's background remains transparent. |
Mobile layout
| Setting | Description |
| Mobile content alignment | Choose the horizontal alignment of the content on mobile:
|