All themes - Header - Customize the 'View all' button text in the navigation drawer

Safe As Milk themes give you the ability to automatically add a 'View all' type button in the navigation drawer sub menus. The reason we have added this functionality is because unlike desktop navigation, the sub menus in the drawer are hidden from view until you tap on a parent link to view them.



This causes a problem in that you may also want your 'Informal' (see image below) parent link to navigate to that particular collection/page on your store. The 'Informal' link can't function as both a link to a collection/page in your store AND a trigger to open a sub menu. To get round this problem we have automatically created a button for your convenience and to improve the shopping experience for your visitors.



The button label will automatically populate using the text of the link and append the word 'View' in front of it. So if 'Informal' is the parent link, the button label will read 'View Informal'

Customize the 'View all' button text

In some cases the auto created button text may not be appropriate. A parent link in a coffee store may be 'Roast Strength' but 'View roast strength' on a button may not make sense to your visitors.

Alternatively you my prefer to use 'See all' or 'Discover [name of collection]' as your button label.

Information: You may use translations or metafields to change the button label - or a combination of both. For example you may wish all your product related buttons to have a specific link with a collection name 'View our tees' (metafields technique below) but all the rest of your buttons to simply read 'Learn more' (translation technique below)

Change the button text using theme translations

  1. Head to the Online store> Themes section of your store admin
  2. Click the button with the ellipsis, then click Edit default theme content


  3. Once the 'Theme content' with multiple fields is open click on the Layout tab

  4. Edit the field to your preference - for example 'Discover {{ link }}' or 'Learn more' or 'Shop now'

Change the button text using metafields (advanced)

  1. Click the Settings cog icon in the bottom left of the admin screen
  2. Click Custom data in the sidebar menu
  3. Click Collections from the selection of metafield types (or blog posts, or pages - this technique works for any content type/links in the navigation drawer)
  4. Click the Add definition button, top right of screen
  5. In the 'Name' field type ‘View all link text’ - or similar wording
  6. In the 'Namespace and key' field - change the first part to the word 'navigation' so it reads navigation.view_all_link_text - use these words exactly in this format

  7. 'Description' field can be whatever you want
  8. Click on the + Select type button
  9. Choose Single line text from the selection
  10. Make sure you give your newly-created metafield access to storefronts by checking the Storefronts check box (see below)

  11. Click the Save button

Now you can head to your collection (or page, or blog) in the admin and you will see your newly created metafield is available for you to edit:

Remove the 'View all' button from specific menus

In some instances you may not wish to have a 'View all' button in your sub menus - for example if you have set up a purely image based mega menu with no collection or page to land on.

In this case simple use '#' as your parent link URL when setting up your menus in the navigation admin. A 'View all' button will not be created in that particular sub menu.

Still need help? Contact Us Contact Us