Split slide product

Choose the right color scheme from the list for image split slide product block.

Applying a color scheme to the split slide product block automatically updates all associated colors set in the theme settings according to the created color schemes.

Choose the right color scheme from the list for the left slide.

Applying a color scheme to the split slide product block automatically updates all associated colors set in the theme settings according to the created color schemes.

Choose a background video for your left slide. Click on “Select Image” to access your media library and upload a video. Also, you can connect a dynamic source by clicking the source button. Once a video is added, you can use the “Change” button to remove, replace, or delete it.

Note that the video replaces the image.

This option allows you to style the label by adding an icon.

Upload an icon to be displayed alongside the label.

To add a heading to the image left 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, italic, or adding a hyperlink. 

Furthermore, you can click the dynamic source button to insert a dynamic source as the title of the left slide.

It is also possible to animate part of the heading or the entire heading.

Simply place the word you want to animate in square brackets []. Example: “Split [slide]”.

After that, adjust the necessary settings in the two options below.

*See the screenshots at the end of the section to view how the heading animation works ↓

A filled-in field with the text that will replace the part of the heading placed in square brackets.

You can add multiple text options separated by commas.

Each comma-separated value will sequentially replace the previous one.

This option allows you to choose a color for the part of the text that changes.

Simply select the desired color from the palette.

The heading size setting offers three options to control the heading size of each slide:

• Small
• Medium
• Large

Decide whether the left slide includes a button:

• To display the button, enter text into the field as the label.
• To hide the button, leave the text field empty.

Customize the position of content on desktop screens:

• Top: Align content at the top of the section. Options: Left, Center, or Right.
• Middle: Align content at the center of the section. Options: Left, Center, or Right.
• Bottom: Align content at the bottom of the section. Options: Left, Center, or Right.

Note: Position is automatically optimized for mobile.

You have three alignment options to align content horizontally on desktop (heading, label, and button) :

• Left
• Right
• Center

Choose the horizontal alignment of the content on mobile:

• Left
• Center
• Right

Choose the right color scheme from the list for image right slide.

Applying a color scheme to the slide block automatically updates all associated colors set in the theme settings according to the created color schemes.

Choose which products to display on the right side of the section. These products will appear in a scrolling slider.

A minimum of 8 and a maximum of 12 products can be added.

The “Image ratio” setting allows you to control how images are displayed on your website based on their width-to-height ratio. You have several options to choose from:

• Adapt to image: This option uses the aspect ratio of the images, ensuring that they are not cropped and displayed in their original dimensions.
• Portrait: This option crops the images to use a 2:3 ratio, creating a taller appearance with a width that is 2/3 of its height.
• Square: This option crops the images to use a 1:1 ratio, creating a square-shaped display with equal width and height.
• Landscape: The image is wider than it is tall. It is typically represented as a ratio of width to height.

Create a metafield of type "File -> List of files" to customize info. Paste name here (e.g.,"Product icons")

* Learn more (from Shopify help center);

*Check our article above.

Create a metafield of type "Single line text" to customize info. Paste name here (e.g.,"Product info") Learn more.

Product Info:

You can add product information in two ways:

1. Fixed Text: Type a general text that will appear the same on all products. This can be useful for standard information that applies to every product, such as shipping details or return policies.
2. Metafields: Add different product info through metafields, allowing you to customize the content for each individual product. This is ideal for displaying unique details such as specifications, features, or any other product-specific information.

Swipe the button to the right to display stock information at the bottom of the product card. The stock status will vary based on the product type:

• In Stock: If the product has multiple variants and the first variant is out of stock, but another variant has stock available, the status will show “In Stock”.
• Out of Stock: If no units of the product or its variants are available.
• [Amount] in Stock: Displays the available quantity if the first variant has stock, or if the product doesn't have variants and has available stock.

If you activate the Quick add option, then your customers can add an item to their cart from the product card. Choose from the following options:

• None: No quick add feature is displayed.
• Standard: Displays one of the following quick add buttons on product cards:
• Add to cart: For single-variant products. When a customer clicks the button, the product is automatically added to their cart.
• Choose options: For products with variants. When a customer clicks the button, a pop-up dialog displays for them to make their variant selection and then proceed with the purchase.
• Bulk: Displays the Quick order list functionality.