How to Add Separate Desktop and Mobile Banners to a Mix & Match Bundle

To ensure your Banner looks clear and properly sized on both computers and mobile devices, we recommend adding two separate Banner images:

• A horizontal Banner for desktop
• A mobile-optimized Banner for smaller screens

You can then use the Visibility settings to display each Banner only on its intended device.

Step 1: Prepare Two Banner Images

Before you begin, prepare:

• Desktop Banner: A wide, horizontal image designed for larger screens
• Mobile Banner: An image with a layout and ratio suitable for mobile screens

The two images can use the same theme and content. However, we recommend adjusting the image ratio, text size, and content placement separately for each device.

Step 2: Add a Banner to the Header

1. Open the Mix & Match Bundle editor.
2. Go to Products & Layout.
3. Find the Header area in the left panel.
4. Click Add element under Header.
5. Select Banner from the element panel.
6. Choose the Banner layout you want to use.

The new Banner will appear in the Header area.

Step 3: Replace the Default Banner Image

A newly added Banner may include a default sample image. You can replace it with your own Banner image.

1. Expand the newly added Banner in the left panel.
2. Select the Image element inside the Banner.
3. Open General in the right settings panel.
4. Find Image source.
5. Move your pointer over the current image.
6. Click Replace.

After clicking Replace, Shopify’s Select file window will open.
You can either:

• Select an image that has already been uploaded to Shopify; or
• Click Add media to upload a new image from your computer

Select the image you want to use, then click OK.

After returning to the editor, add a short description in the Alt text field. This helps search engines and customers who use assistive technologies understand the image.

Step 4: Adjust the Banner Image Style

After replacing the image, you can adjust its size and display ratio.

1. Expand the Banner in the left panel.
2. Select the Image element.
3. Open Styling in the right settings panel.
4. Expand Size.
5. Adjust the image width and ratio.

Recommended settings:

• Width: 100%
• Ratio: Original

Setting the width to 100% allows the image to fill the available Banner width. Setting the ratio to Original preserves the image’s original proportions and automatically adjusts its height.
You can also use the other Styling sections to customize:

• Spacing: Adjust the space around the image
• Background: Change the background style
• Border: Add a border or adjust the corner radius
• Effects: Apply visual effects
• Custom CSS: Make additional style adjustments with CSS

Step 5: Hide Unwanted Text Content

Some Banner layouts include default headings, descriptions, or buttons.
If you do not need these elements:

1. Expand the Banner in the left panel.
2. Select the text Group you do not want to display.
3. In the right settings panel, set the Group to Hide.
4. Repeat this process for any other unwanted text Groups.

Step 6: Configure the Desktop Banner

After uploading and styling the desktop image, select the entire desktop Banner.
In the right settings panel:

1. Open General.
2. Expand Visibility.
3. Leave Hide on desktop unchecked.
4. Select Hide on mobile.

The Banner will now appear only on desktop devices.

Step 7: Add and Configure the Mobile Banner

Add another Banner to the same Header area:

1. Click Add element.
2. Select Banner.
3. Choose the Banner layout you want to use.
4. Expand the newly added Banner.
5. Select its Image element.
6. Click Replace.
7. Upload or select your mobile Banner image.
8. Adjust the Image style and hide any unwanted text Groups if needed.

Next, select the entire mobile Banner and go to General → Visibility:

1. Select Hide on desktop.
2. Leave Hide on mobile unchecked.

The Banner will now appear only on mobile devices.

Step 8: Preview the Desktop Version

Use the device preview controls at the top of the editor to switch to the desktop preview.
Confirm that:

• Only the desktop Banner is displayed
• The mobile Banner does not appear
• The Banner width fits the content area
• Important text and images are not cropped
• The spacing between the Banner and the product area looks appropriate

Step 9: Preview the Mobile Version

Switch to the mobile preview and confirm that:

• Only the mobile Banner is displayed
• The desktop Banner does not appear
• The Banner fits the mobile screen width
• The image is not stretched or unexpectedly cropped
• The text is easy to read on a mobile screen
• The product cards below the Banner display correctly

If the image does not display correctly, select the Image element and check:
Styling → Size
Recommended settings:

• Width: 100%
• Ratio: Original

Recommended Header Structure

Header
├── Image banner Desktop
└── Image banner Mobile

Both Banners are placed in the same Header, while their Visibility settings determine which device displays each one.

Visibility Settings

Optional: Add Text or a Button over the Banner

You can add a separate Text or Button element over the Banner image.
This allows you to:

• Edit the text without changing the Banner image
• Configure a click action for the Button
• Adjust the position separately for desktop and mobile
• Reposition the content after replacing the Banner image

Step 1: Add Text or a Button to the Image Banner

Under Products & Layout, locate the Image banner you want to edit.
Add a Group inside the Image banner. Then add a Text or Button element inside the Group.
The element structure should be:
Image banner → Group → Text or Button

Step 2: Configure the Button Text and Action

Select the Button element.
Under General, enter the text you want to display on the Button.
For example:

Start Building

Under Action, configure what should happen when customers click the Button.
To take customers directly to the product selection area, use these settings:

• Click action: Scroll to element
• Scroll to element: ProductList

You can also adjust Top offset to control the space between the ProductList and the top of the page after scrolling.

Step 3: Position the Button Using Custom CSS

Select the Button element and open Styling → Custom CSS.
Add the following CSS:

position: absolute;
left: 65%;
top: 82%;
transform: translate(-50%, -50%);

In this example:

• left: 65% controls the horizontal position.
• top: 82% controls the vertical position.
• transform: translate(-50%, -50%) positions the Button based on its center point.

You usually only need to adjust the left and top values:

• Increase left to move the Button to the right.
• Decrease left to move the Button to the left.
• Increase top to move the Button down.
• Decrease top to move the Button up.

Position Text over the Banner

You can use the same method to position a Text element.
Select the Text element, open Styling → Custom CSS, and add:

position: absolute;
left: 65%;
top: 50%;
transform: translate(-50%, -50%);

Adjust the left and top values until the Text appears in the desired position.

Set Different Positions for Desktop and Mobile

Desktop and mobile Banner images usually have different dimensions and aspect ratios. Therefore, their Text and Button elements should be configured separately.

1. Add the Text or Button to the desktop Image banner.
2. Adjust its position using the desktop preview.
3. Add a separate Text or Button to the mobile Image banner.
4. Adjust its position using the mobile preview.
5. Use Visibility to display each Banner and its content only on the intended device.

Save Your Changes

Once both desktop and mobile previews look correct, click Save in the upper-right corner of the editor.
Customers visiting the Bundle page will now automatically see the Banner configured for their device.

Updated on: 23/07/2026