Narrative Theme

Lisa Fockens Updated by Lisa Fockens

Narrative Theme

These instructions will guide you through a custom setup of the Feed on the Shopify theme called Narrative. The result will look like the images below. As you'll see, the bell is embedded into the header, giving it 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 Narrative theme copy you want to edit, then follow these instructions.

Step 1: Open the file header.liquid. You can find it in the folder called 'sections'.

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

 <div class="site-header__section site-header__section--button">

Inside of the quotation marks, add box-right so that it looks like the following:

 <div class="site-header__section site-header__section--button box-right">

Step 3: Create a new line immediately below it and paste the following snippet:

<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp btn btn--clear btn--square btn--hover-scale">
    <svg class="wisp-svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" width="24" height="24" viewBox="0 0 24 24" 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 4: Save your changes to the file.

Step 5: Open the file theme.scss.liquid. You can find it in the folder called 'assets'.

Step 6: Scroll to the very bottom of the file and paste the following snippet:

.wisp-svg {
    vertical-align: middle;
    fill: none !important;
    stroke: $color-primary;
    height: 28px;
    width: 28px;
}

.box-right {
    flex: 1 0 auto;
    margin-left: -50px;
}

Step 7: Save your changes to the file.

Step 8: 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.

Dawn theme

Debut Theme

Contact