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. |
Product slider
| Setting | Description |
| Product list | Choose which products to display on the right side of the section. These products will appear in a scrolling slider. A maximum of 10 products can be added. |
| Image ratio | Image Ratio controls how your images look based on their shape. Here are the options:
|
| Custom image height | Set a custom image ratio and adjust its height using a convenient slider. |
| Image shape | You can check and choose from the following shapes for product cards in the dropdown:
To view the changes:
|
| Heading size | The heading size setting offers four options to control card heading size:
|
| Font weight | Font weight defines the thickness or boldness of card heading. Available options:
|
| Show second image on hover | Check this option to display a second image on hover. This will only apply if the product page includes more than one image. |
| Show vendor | Show the vendor of the product after product title. |
| Show product rating | Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app such as Shopify Product Reviews, and Metafield definitions for reviews.rating_count and reviews.rating. |
| Enable quick view button | Activate this option to display a “Quick View” button next to the “Add to Cart” button on product cards with variants. The Quick View button opens a pop-up where customers can:
If disabled, only the “Add to Cart” button will appear, allowing customers to add products to their cart without the quick checkout or variant selection pop-up. |
| Show type | You can show or hide the product type (e.g., headphones) added on the product detail page using this button. |
| Show color variants | Enable this option in each block to show color swatches. This option works with Color Variant Name option. In the Color Variant Name field (Theme settings — Product cards tab), ensure you enter the name of the variant option, such as “Color.” It should match exactly as it appears in the Product Detail Page in the Shopify Admin Variants section. Directly on the product card, you can preview different product variant colors and even add a selected variant to your cart. Simply click on the desired color swatch, then hover over the product card and click “Add to Cart”. |
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:
|