Mobile only: Add a rich text section for promotional information

Use this custom section to display promotional information on mobile only. This can be helpful as the announcement bar is only displayed with the desktop navigation. Since there isn't enough room on the mobile navigation, adding this section will help you promote your announcement bar missing on mobile. 

Example mobile only message:

You can position the message above or below your main asset:

This section will only appear on mobile and hidden from desktop view. 

 How to:

1

Create a new section file

From Theme actions, choose Edit code:

In the Sections folder, choose Create new section:

Call the file:

index-rich-text-mobile

Use the Create section button to complete. 

Erase all the default code that's generated:

Replace with all the code with the code this file:

Click to view code

Save the file:

2

Add hide/show CSS (don't skip this step)

Use this link to learn where exactly to add this next code snippet:

Where to add your CSS style code

Add the following code to the very bottom of the file on a new line only if your theme is v/1.7.2 or below:

/* -- code to show mobile only rich text section -- */
@include media-query($medium-up) {
   .mobile-only {display:none;}
}
/* - end - */

Use the following CSS code only if your theme version is 1.8.0 or above:

/* -- code to show mobile only rich text section -- */
@media only screen and (min-width:900px) {
   .mobile-only {display:none;}
}
/* - end - */

Save the file:

3

Final step: Use the Theme Editor to add and configure the new section

Open your theme editor (Customize theme).

Next in the sections tab - Add the new section:

Add the new Rich text mobile section:

After adding the section - We recommend that you move the section from the bottom to the top area where you'd like to place it. Moving it now will help with setting up and appearance.

Use the handle icon on the right, drag and drop at the top below your Header or first main asset:

Example moved to below the header:

Next, now you can start adding the message content. Use the section settings to adjust the background color and top/bottom padding:

To preview your section, be sure you are viewing in mobile mode:

Save your Theme Editor settings after updating your content and adjusting the settings.