How To: Add Promotions Bar To Shop

  • In this tutorial we're going to add a global promotions bar like "Free Shipping for sales over $50!"

    To start, we need to set up our configuration. Go to Metafield Configuration and click "Add Metafield" under shop. Add the metafield listed below.

    • promotion : HTML

    When finished, your configuration should look like the image below.

  • Now that you've set up you configuration you need to add add the actual value for your promotion. Do this by navigating to the homepage, click on Add Metafields select shop then click Search.

    Now, simply add the promotion in the HTML field labeled "promotion" and click Save Metafields. Once finished, the page should look like the image below:

  • Now that you have the data set up. You can create the .liquid snippet that will display the promotion bar. You can download the .liquid code snippet here. Be sure to include the snippet on a global .liquid template by adding this line:

    {% include "mm-promotion-bar" %}

    You can also view the snippet below: