> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.ushopaid.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 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.
| We recommend adding both Banners to the **Header** area so they appear at the top of the Bundle and can be managed together.

## 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.
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_xu7etx.png)


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**.
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_18muzr.png)


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**.


| You can use the search field at the top of the window to find an uploaded image by its filename.
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
| If you only want the complete image to display at its original proportions, setting **Width** to `100%` and **Ratio** to `Original` is usually sufficient. You do not need to set a separate height.

## 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.
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1w5fxd1.png)


| Hiding the entire Group lets you hide all headings, descriptions, and buttons contained in that Group at once.

## 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.
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_i644q4.png)


| Setting | Selection |
| ---- |
| Hide on desktop | Unchecked |
| Hide on mobile | Checked |

## 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.


| Setting | Selection |
| ---- |
| Hide on desktop | Checked |
| Hide on mobile | Unchecked |

## 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
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_p038mq.png)



## 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
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1j5f5lf.png)


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
| Banner | Hide on desktop | Hide on mobile | Displayed on |
| ---- |
| Desktop Banner | Unchecked | Checked | Desktop only |
| Mobile Banner | Checked | Unchecked | Mobile only |
|| Do not allow both Banners to display on the same device. Otherwise, customers may see two consecutive Banners at the top of the Bundle.

## 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**
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_4x7idc.png)


### 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%);
```
![](https://storage.crisp.chat/users/helpdesk/website/-/4/d/f/1/4df10d1472327800/image_1we2sp6.png)


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.
|| Percentage values usually adapt better than fixed pixel values when the Banner width changes.
### 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.
||| Always check both desktop and mobile previews after replacing a Banner image. A new image may require different `left` and `top` values.
## 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.