Banner: Custom mobile only and desktop only banner sections

If you'd like to use a custom banner (Image with text overlay) section for mobile only while maintaining a different one for desktop, use this customization. 

Example mobile only banner:

Section height is set to Image height which shows the whole image and no text was used, only a button to keep the area clean. 

Example tablet/desktop only banner:

Different image used, section height is set to full screen, extra text was added as there's more space to display.

Since these are separate banner sections, any or all the settings can be different. You can even use custom images which work better for desktop or mobile. 

1

Create new section files

Important: This step requires you to know which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you've verified your Pipeline version number, open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

In the Sections folder, choose Create new section:

Call the file:

index-banner-mobile

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code with the code from one of these files:

Pipeline 4.2:
Click to view mobile code

Or

Pipeline 4.0 and Pipeline 4.1:
Click to view mobile code

Or

Earlier versions of Pipeline 2-3:
Click to view mobile code

Save the file.

Next, create a second section file:

In the Sections folder, choose Create new section:

Call the file:

index-banner-desktop

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code with the code from one of these files:

Pipeline 4.2:
Click to view desktop code

Or

Pipeline 4.0 and Pipeline 4.1:
Click to view desktop code

Or

Earlier versions of Pipeline 2-3:
Click to view desktop code

Save the file.

2

Add hide/show CSS

Next, in the Code Editor find your theme's CSS file, this again will vary depending on which version of Pipeline you're running.

Find the right file depending your your version of Pipeline - In the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Code to add:

Add the following code to the very bottom of the file on a new line:

/* -- code to hide and show mobile and desktop banners -- */
@media screen and (max-width: $small) {
   .banner-desktop {display:none;}
}
@media screen and (min-width: $small + 1) {
   .banner-mobile {display:none;}
}
/* - end - */

Save the file.

3

Use the Theme Editor to add and configure the new sections

Open your theme editor.

Live published themes, use the Customize button:

For draft unpublished themes, use the Customize link for the right theme:

Add the new sections:

Add the new desktop and mobile banners:

The original Image with text overlay is still available, you can use that one if you need the same content and settings for both mobile and desktop. After adding the two new banner sections, you can customize each one individually. 

I would recommend the Section height to be Image height for the mobile version if you need to show the entire image.

Use the Theme Editor's mobile/desktop icons to preview the two different banner sections.

Mobile:

Desktop:

Note:
The main Image with text overlay section will still show on both desktop and mobile. If you use the above individual sections, be sure to remove or hide the standard Image with text overlay section so it's not showing as well. Only use these two new sections if you don't want duplicate banners displaying. 

Still need help? Contact Us Contact Us