Supply Theme

Lisa Fockens Updated by Lisa Fockens

Supply Theme

These instructions will guide you through a custom setup of the Feed on the Shopify theme called Supply. 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 Supply 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 46, look for:

<div class="grid-item large--one-half text-center large--text-right">

Replace  the class one-half with the class two-thirds. This will ensure that the search bar, Wisp bell and cart always remain on the same line when visible.

Step 3: Now around line 78, find {% include 'search-bar' %}. Insert the following snippet on a new line immediately after it:

<a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp icon header-cart-btn">
	<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="25" height="25" 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 4: Look for the following lines of code around lines 96-98. Make sure it contains class="icon icon-hamburger" so you know that you've found the right spot.

<div class="display-table-cell">
    <button class="menu-toggle mobileNavBar-link" aria-controls="navBar" aria-expanded="false"><span class="icon icon-hamburger" aria-hidden="true"></span>{{ 'layout.navigation.mobile_menu' | t }}</button>
  </div>

On a new line immediately after the final </div> of the example above, insert the following snippet:

<div class="display-table-cell">
    <a tabindex="0" role="button" aria-label="Notifications" href="#" class="wisp mobileNavBar-link">
    	<svg fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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 5: Go to the end of the file and find {% schema %}. On a new line immediately before it, add the following:

<style>
  .wisp svg {
    vertical-align: middle;
    display: block;
    margin: auto;
  }
</style>

Step 6: Save your changes to the file.

Step 7: Next, open the file theme.scss.liquid. You can find it in the folder called 'assets'.

Step 8: Around line 3085, locate the class .search-bar. Adjust it's property max-width: 60%; down to .max-width: 47%;.

Step 9: Save your changes to the file.

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

Boundless Theme

Contact