Minimal Theme

Lisa Fockens Updated by Lisa Fockens

Minimal Theme

These instructions will guide you through a custom implementation of the Feed on the Shopify theme called Minimal. The result will look like the images below. As you'll see, the bell is embedded into the header, giving the feed a more native feel.

To achieve this, you need to edit your theme's code. We recommend making a copy of your live theme, and modifying it. Then when you're happy, you can set it live.

When ready, open the code editor for the Minimal theme copy you want to edit, then follow these instructions.

Step 1: Open the file header.liquid.

Step 2: Around line 120, look for the following line of code and create a new line directly above it:

{% if section.settings.header_search_enable %}

Step 3: On the new line, paste the following snippet:

<div class="header-bar__module">
    <span class="header-bar__sep" aria-hidden="true"></span>
    <a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp icon">
        <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" width="22" height="22" viewBox="0 0 24 24" stroke="currentColor" xmlns="<http://www.w3.org/2000/svg>">
    		<path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
        </svg>
    </a>
</div>

Step 4: Around line 162/163, look for the following lines of code:

</div>
{% include 'mobile-nav' with linklists[section.settings.nav_menu] %}

On a new line above </div>, paste the following snippet:

<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp cart-page-link mobile-cart-page-link wisp-mobile">
    <svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="17" height="17" viewBox="0 0 24 24" stroke="currentColor" xmlns="<http://www.w3.org/2000/svg>">
        <path d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
    </svg>
</a>

Step 5: Go to the end of the file and find {% schema %}. Immediately before it, add the following:

<style>
    .wisp svg {
    vertical-align: middle;
  }
  
  .wisp-mobile {
       padding: 0 10px;
  }
  
  .wisp-mobile svg {
        position: relative;
    	top: 2px;
</style>

Step 6: Save your work.

Step 7: Switch the feed from 'floating' to 'custom' in the Admin and send a trial notification. It may take some time for the change to take effect, but when you see the notification in the theme preview, it's ready to be published.

If the notification badge (red dot) isn't appearing in the proper spot relative to the bell, reach out to our team. This is something that has we will have to adjust for you.

Dawn theme

Contact