Add a Promotional Header to Your Shopify Theme

Tuesday, December 1, 2015 3 minute read

Today, I want to write a quick how-to on adding a little promotional div to the top of your Shopify store. This could come in handy with the holidays coming up! In my shops, we're using it to promote flash coupon codes and shipping discounts. There be code ahead!

It is essentially just going to be a full-width div with one-line of text and a background color, all of which you'll set in your theme settings.json file. After the initial set-up in this article, you won't have to touch Liquid code again.

Add the Liquid template code

Open your theme.liquid file (found in the /layouts folder), and right after your opening <body> tag add the following bit of code:

{% if  settings.promotionalBar-visible %}
  {% include 'promotionalBar' %}
{% endif  %}

You can likely see where this is going just by looking at that code. We're going to create a snippet called 'promotionalBar', which will have a true/false toggle in our theme's settings file.

First, let's create the snippet. In your snippets folder, create a new snippet and call it 'promotionalBar'. Add this text to it:

<div class="promotionalBar">
  {{ settings.promotionalBar-text }}
</div>

Add the SCSS styles

Now, let's go ahead and set up the styling in our styles.scss.liquid file. If you have variables at the top you can add these two lines:

// promotionalBar.liquid
$promotional-bar-background-color: {{ settings.promotionalBar-background-color }};
$promotional-bar-text-color: {{ settings.promotionalBar-text-color }};

And then add this selector alongside your other classes:

.promotionalBar {
    color: $promotional-bar-text-color;
    background: $promotional-bar-background-color;
    text-align: center;
    font-size: .8em;
    font-weight: bold;
}

If you don't have variables in your stylesheet, just move the settings.promotionalBar-* from the first codeblock variables directly into the CSS.

Create the settings to control it

Now, open your settings_schema.json file, which you'll find in the /config directory, and add the following object to this file:

{
    "name": "Promotional Add-Ons",
    "settings": [
        {
            "type": "paragraph",
            "content": "Enable or disable the promotional bar" 
        }, {
            "type": "checkbox",
            "id": "promotionalBar-visible",
            "label": "Show Promotional Bar at the top of every page?"
        }, {
            "type": "text",
            "id": "promotionalBar-text",
            "label": "Message for promotional bar"
        }, {
            "type": "color",
            "id": "promotionalBar-background-color",
            "label": "Background color",
            "default": "#000000"
        }, {
            "type": "color",
            "id": "promotionalBar-text-color",
            "label": "Text color",
            "default": "#FFFFFF"
        }
    ]
}

Save that file, and now you are done editing your template!

Go to your theme settings

Go to your Shopify theme section and click the "Customize" button for the theme. This will take you to a WYSIWYG editor, and on the right side you'll see the newly added "Promotional Add-Ons" section! EThis is where you'll be setting the message itself, as well as the background color and text color.

Please let me know on Twitter if you found this helpful or have any questions! I'd like to write more guides like this in the future if there is any interest!

Tags

Comments