Brooklyn Theme

Lisa Fockens Updated by Lisa Fockens

Brooklyn Theme

These instructions will guide you through a custom setup of the notification Feed on the Shopify theme called Brooklyn. 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 Brooklyn theme copy you want to edit, then follow these instructions.

Step 1: Open the file header.liquid.

Step 2: Around line 123, look for the following line of code:

<div class="grid--full grid--table">

Inside of the quotation marks, add grid-wisp so that it looks like the following:

<div class="grid--full grid--table grid-wisp">

Step 3: Around lines 290-291, find {% end if %} and <li class="site-nav__item site-nav__item--compressed">. Create a new line between them.

Step 4: One the new line, paste the following snippet:

<li class="site-nav__item site-nav__item--compressed">
    <a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp site-nav__link site-nav__link--icon">
        <svg height="18" viewBox="-43 0 512 512" width="18" xmlns="http://www.w3.org/2000/svg">
            <path d="m413.417969 360.8125c-32.253907-27.265625-50.75-67.117188-50.75-109.335938v-59.476562c0-75.070312-55.765625-137.214844-128-147.625v-23.042969c0-11.796875-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.535156-21.332031 21.332031v23.042969c-72.257812 10.410156-128 72.554688-128 147.625v59.476562c0 42.21875-18.496094 82.070313-50.945312 109.503907-8.296876 7.105469-13.054688 17.429687-13.054688 28.351562 0 20.589844 16.746094 37.335938 37.332031 37.335938h352c20.589844 0 37.335938-16.746094 37.335938-37.335938 0-10.921875-4.757813-21.246093-13.25-28.519531zm0 0"/><path d="m213.332031 512c38.636719 0 70.957031-27.542969 78.378907-64h-156.757813c7.425781 36.457031 39.746094 64 78.378906 64zm0 0"/>
        </svg>
    </a>
</li>

Step 5: Around line 322, look for the following line of code:

<div class="site-nav--mobile text-right">

Inside of the quotation marks, add wisp-mobile so that it looks like the following:

<div class="site-nav--mobile text-right wisp-mobile">

Step 6: Create a new line below the line in Step 5 and paste the following snippet:

<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp site-nav__link">
    <span class="icon-fallback-text">
        <svg height="18" viewBox="-43 0 512 512" width="18" xmlns="http://www.w3.org/2000/svg">
            <path d="m413.417969 360.8125c-32.253907-27.265625-50.75-67.117188-50.75-109.335938v-59.476562c0-75.070312-55.765625-137.214844-128-147.625v-23.042969c0-11.796875-9.558594-21.332031-21.335938-21.332031-11.773437 0-21.332031 9.535156-21.332031 21.332031v23.042969c-72.257812 10.410156-128 72.554688-128 147.625v59.476562c0 42.21875-18.496094 82.070313-50.945312 109.503907-8.296876 7.105469-13.054688 17.429687-13.054688 28.351562 0 20.589844 16.746094 37.335938 37.332031 37.335938h352c20.589844 0 37.335938-16.746094 37.335938-37.335938 0-10.921875-4.757813-21.246093-13.25-28.519531zm0 0"/><path d="m213.332031 512c38.636719 0 70.957031-27.542969 78.378907-64h-156.757813c7.425781 36.457031 39.746094 64 78.378906 64zm0 0"/>
        </svg>
        <span class="fallback-text">Inbox</span>
    </span>
</a>

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

<style>
  .grid-wisp {
    display: flex;
  }
  
  .wisp svg {
    vertical-align: top;
  	fill: currentColor;
    stroke: none !important;
}
 .wisp-mobile {
   display: flex;
   align-items: center;
   float: right;
}
  
</style>

Step 8: Save your work.

Step 9: 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 can 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.

Venture Theme

Boundless Theme

Contact