We are Underground support

UPDATE: How to Add a Header Text Message

Last Updated: Mar 19, 2015 08:30AM EDT

Looking to access your theme's code or language options with Shopify's new theme editor layout?

In your Shopify admin click on Online store > Themes
Next to the theme that you want to edit click on the Menu button which is a small square with 3 blue dots
This will open a submenu of options which includes: Edit HTMl / CSS and Edit Language

Icon Theme Updates:

As of Thursday 19th March 2015 some small updates were made to the Icon Shopify Theme.
Details on how to apply these updates along with code that can be pasted into your store can be found below

*** If you purchased your Icon Shopify Theme On March 18th after 12pm GMT ( London ) You do not need to make any changes to your store as this is pre-installed ***

Site Header Message

1. Click on themes > customise theme > Theme Options > Edit HTML / CSS
2. Choose: Layouts > theme.liquid and scroll down to line: 203 you should see:

    <header class="scrollheader"> 
      <div class="row">
    IF you do... Change that to this:
    <header class="scrollheader">
      {% if settings.enable_banner %}
      <div class="bannertop">
        <div class="row">
          <div class="desktop-12 tablet-6 mobile-3">
            {{ settings.banner_message }}
      {% endif %}      
      <div class="row">
      Click Save

3. Click On Assets > stylesheet.css.liquid
    Scroll to the bottom of the page and paste in the following:

      .bannertop {
        line-height: 30px;
        font-family: {{ settings.font }};
        font-size: {{ settings.banner_size }};
        background:  {{ settings.banner_background }};
        color: {{ settings.banner_color }};
        text-align: {{ settings.banner_align }};
        letter-spacing: 1px;
      Click Save
4. Click on Configs > Settings.html
    Scroll to the bottom of the page and add this in:


  <legend>Banner Message</legend>
      <td colspan="3">
        <h3 class="heading">Banner Message</h3>
      <th><label for="enable_banner">Show Text Banner at the top of your site</label></th>
      <td><input type="checkbox" id="enable_banner" name="enable_banner" value="1" /></td>
      <td><small>Enable or Disable Banner Text at the top of the Site</small></td>                              
      <th><label for="banner_background">Top Banner Background Color</label></th>
      <td><input id="banner_background" name="banner_background" class="color" value="#000000" /></td>
      <td><small>Set Background Color for Banner Message</small></td>
      <th><label for="banner_color">Top Banner Text Color</label></th>
      <td><input id="banner_color" name="banner_color" class="color" value="#000000" /></td>
      <td><small>Set Text Color for Banner Message</small></td>
      <td><label for="banner_align">Top Banner Text Alignment</label></td>
        <select name="banner_align" id="banner_align">    
          <option value="left">Left</option>
          <option value="center">Center</option>
          <option value="right">Right</option>
      <td><label for="banner_size">Top Banner Text Size</label></td>
        <select name="banner_size" id="banner_size">    
          <option value="20px">20px</option>
          <option value="19px">19px</option>
          <option value="18px">18px</option>
          <option value="17px">17px</option>
          <option value="16px">16px</option>
          <option value="15px">15px</option>
          <option value="14px">14px</option>
          <option value="13px">13px</option>
          <option value="12px">12px</option>
          <option value="11px">11px</option>
          <option value="10px">10px</option>             
      <td><label for="banner_font">Banner Font</label></td>
        <select name="banner_font" id="banner_font">          
          <optgroup label="Sans-serif">
            <option value="'Century Gothic', Helvetica, Arial, sans-serif">Century Gothic</option>
            <option value="'Helvetica Neue', Helvetica, Arial, sans-serif" selected="selected">Helvetica/Arial</option>
            <option value="Impact, Charcoal, Helvetica, Arial, sans-serif">Impact</option>
            <option value="'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Lucida, Helvetica, Arial, sans-serif">Lucida Grande</option>
            <option value="Trebuchet MS, sans-serif">Trebuchet MS</option>
            <option value="Verdana, Helvetica, Arial, sans-serif">Verdana</option>
          <optgroup label="Serif">
            <option value="Garamond, Baskerville, Caslon, serif">Garamond</option>
            <option value="Georgia, Utopia, 'Times New Roman', Times, serif">Georgia</option>
            <option value="Palatino, 'Palatino Linotype', 'Book Antiqua', serif">Palatino</option>
            <option value="'Times New Roman', Times, serif">Times New Roman</option>
          <optgroup label="Monospace">
            <option value="'Courier New', Courier, monospace">Courier New</option>
            <option value="Monaco, 'Lucida Console', 'DejaVu Sans Mono', monospace">Monaco/Lucida Console</option>
          <optgroup label="Google Web Fonts">
            <option value="'Arvo', serif">Arvo</option>
            <option value="'Glegoo', serif">Glegoo</option>
            <option value="'Lato', sans-serif">Lato</option>
            <option value="'Lobster', cursive">Lobster</option>
            <option value="'Lobster Two', cursive">Lobster Two</option>
            <option value="'Montserrat', sans-serif">Monserrat</option>
            <option value="'Noticia Text', serif">Noticia Text</option>
            <option value="'Open Sans', sans-serif">Open Sans</option>
            <option value="'Open Sans Condensed', sans-serif">Open Sans Condensed</option>
            <option value="'Oswald', sans-serif">Oswald</option>
            <option value="'PT Sans', sans-serif">PT Sans</option>
            <option value="'PT Sans Narrow', sans-serif">PT Sans Narrow</option>
            <option value="'Questrial', sans-serif">Questrial</option>
            <option value="'Raleway', sans-serif">Raleway</option>
      <th><label for="banner_message">Banner Message</label></th>
      <td><input type="text" id="banner_message" name="banner_message" value="Add a Sample Message" /></td>
      <td><small>Add Text to Show at the top of your site</small></td>                              

        Click Save when done.
5. Click on Themes > customise theme and look towards the bottom of your theme option fields.
   Open the Banner Message Section and check the box to enable this - Alter your colors and add the message.
   This will now display at the top of the site on all pages including Tablet and Mobile.

Get help

Note We can not offer individual theme modifications, however are happy to advise on the best Shopify resources and finding developers to work on your theme.
Want to customize your theme?
Have questions not covered in our docs?
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found