Shopify Partner Archives

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

Deprecated: pathinfo(): Passing null to parameter #1 ($path) of type string is deprecated in /var/www/html/wp-content/plugins/urvanov-syntax-highlighter/class-urvanov-syntax-highlighter-langs.php on line 86

Building Nested Navigations with Shopify Link List

by Cozmot | Oct 8, 2020 | Shopify, Shopify Partner

Nested navigations are a popular solution for effectively organizing collections, products, and pages. A Shopify link list is a simple collection of links, and these items can be created to point to a collection, page, or product within Shopify, or to a URL outside of the store’s domain. Link lists are used for a variety of different use cases. In this tutorial, we will cover how to use link lists in a Shopify theme to create a nested navigation using an unordered list. By using link lists and Liquid, we’ll have full control over the menu from within the admin, giving flexibility to the merchant running the store.

Create a development store

Before we start let’s set up a development store that we can work with. That way we can test, break, and fix things as we build, and once we’re happy with our code we can move it into production.

Creating a nested navigation

In 2017, Shopify added the ability to create a nested navigation menu, up to three levels deep from a single page, by using a new menu editing interface. Previously, menus were created using multiple menus, and the handle for each menu to tie it to its parent menu link. At the time of writing this article, all newly created stores have the new nested menus user interface, where you can easily drag, drop, and nest menu items, meaning you no longer have to link handles to menu names. While it’s common to include the navigation in a layout file, the default one being theme.liquid, you can test out the nested navigation concept in any template.

Creating navigation menus

We’ll begin by creating a new menu, our parent menu, by heading to the Navigation tab in the Shopify Admin, which resides under the Online Store linkin the sidebar. All new stores have a predefined default menu called “Main Menu”. To add items to the list, simply click the add another link button, and give your new item a “link name” and a destination. The select drop down will allow you to easily link to internal sections, such as a particular product or collection. Alternatively, you can enter your own URL (either internal or external) by choosing “web address” from the options. Once we have this in place, we can start to consider the Liquid code we’ll need to output this in our theme. You can drag and drop nested menu items to create a multi-level navigation, and with some JavaScript and CSS easily style it into a “super-menu” or “drop-down menu”.

Outputting the menu

In order to output the menu in a theme file, we’ll need to know the handle of the menu. Handles are unique identifiers within Shopify for products, collections, link lists, and pages. Let’s begin by outputting all the items from the Main Menu link list. We can use a simple for loop we’ve used many times before to output the link list items in turn:

<ul>

{% for link in linklists.main-menu.links %}

<li><a href= “{{ link.url }}“>{{ link.title }}</a></li>

{% endfor %}

</ul>

view raw nested-navigation-link-list-for-loop.liquid hosted with ❤ by GitHub

The key thing to pay attention to here, is the for-loop that’s been included around each <li>.


{% for link in linklists.main-menu.links %}

{% for link in linklists.main-menu.links %}

We are using the variable link to hold the data relating to each item in the link list, as we loop over all the items. This keyword link could be anything, it’s just a variable for the for-loop to output data for the menu. In order to access link data, we need to access all the links in the link list with a handle of main-menu, hence linklists.main-menu.links. Remember, the default Main Menu that exists in a Shopify store has the handle of main-menu, which is why it’s being used above. If our menu had a handle of social-media, the syntax would be refactored as:


{% for link in linklists.social-media.links %}

{% for link in linklists.social-media.links %}

Each link item has properties which include:

url
title

In the example above, {{ link.url }} will output the url we entered or generated in the Shopify Admin, and {{ link.title }} will output the link text specific to that url.

You might also like: How to Manipulate Images with the img_url Filter.

Multi-level navigation

Now that we have the basic Liquid structure in place for a single level menu, we need to consider how to create a sub-menu for our top level items. Firstly, we need to head back to the Shopify Admin and create our first sub-menu. It might not be 100 percent clear initially, but every link in a link list, in addition to the menu itself, has a unique handle that we have access to in Liquid. Let’s have a look at an example. If our main-menu has three levels of links as follows:

Home
About Us
Women
- Accessories
  - Earrings
  - Scarves

What’s great about using nested menus in Shopify is that nested menu items can be obtained directly from their parent link using Liquid. This greatly simplifies the markup required to render a nested menu — meaning you don’t need to know the handle of the parent to render its children. Here’s an example of how we can use these related handles to output a three level deep nested menu:

<ul class=“parent“>

{% for link in linklists.main-menu.links %}

<li><a href=“{{ link.url }}“>{{ link.title }}</a>

{% if link.links != blank %}

<ul class=“child“>

{% for child_link in link.links %}

<li><a href= “{{ child_link.url }}“>{{ child_link.title }}</a>

{% if child_link.links != blank %}

<ul class=“grandchild“>

{% for grandchild_link in child_link.links %}

<li><a href= “{{ grandchild_link.url }}“>{{ grandchild_link.title }}</a></li>

{% endfor %}

</ul>

{% endif %}

</li>

{% endfor %}

</ul>

{% endif %}

</li>

{% endfor %}

</ul>

view raw nested-navigation-link-list-three-levels.liquid hosted with ❤ by GitHub

You’ll notice that we’re now introducing an if statement in our refactored example, directly after we output the first level of our main menu:


{% if link.links != blank %}

{% if link.links != blank %}

This if statement checks to see if a child-link for the current link item in our loop exists. If it does exist, the template moves forward and loops over all the items in the sub menu. Additionally, in this example we handle child_link sub-menu and a grandchild_link sub-menu the same way, by checking with an if statement to see if there’s a child-link for the current link item, and if it does exist, the template loops through and outputs the sub-menu. In the example above, child_link is just a for loop variable we use to represent the current item in the loop; it could easily be replaced with sub_link, and grandchild_link with sub_sub_link. We’ve used child and grandchild in this case to illustrate the hierarchy of the nested navigation a bit more clearly.

Final touches

I think it’s important to mention one extra link property that will be very useful when creating menus — link.active and link.child_active. These are both boolean properties (true/false) that allow you to easily tell if the current page is active, as well as if it’s nested items are active. The syntax is as follows:


{% if link.active %} class="active {% if link.child_active %}child-active{% endif %}"{% endif %}

{% if link.active %} class="active {% if link.child_active %}child-active{% endif %}"{% endif %}

In this example, we’ll add a CSS class of active if the current page URL is the same as the list item, and a class of active-child if the current page is also part of the active nested item. Here’s the full code example for completeness:

<ul class=“parent“>

{% for link in linklists.main-menu.links %}

<li {% if link.active %}class=“active {% if link.child_active %}child-active{% endif %}“{% endif %}><a href=“{{ link.url }}“>{{ link.title }}</a>

{% if link.links != blank %}

<ul class=“child“>

{% for child_link in link.links %}

<li {% if child_link.active %}class=“active {% if child_link.child_active %}child-active{% endif %}“{% endif %}><a href= “{{ child_link.url }}“>{{ child_link.title }}</a>

{% if child_link.links != blank %}

<ul class=“grandchild“>

{% for grandchild_link in child_link.links %}

<li {% if grandchild_link.active %}class=“active {% if grandchild_link.child_active %}child-active{% endif %}“{% endif %}><a href= “{{ grandchild_link.url }}“>{{ grandchild_link.title }}</a></li>

{% endfor %}

</ul>

{% endif %}

</li>

{% endfor %}

</ul>

{% endif %}

</li>

{% endfor %}

</ul>

view raw nested-navigation-link-list-full-snippet.liquid hosted with ❤ by GitHub

Start nesting those menus!

Link lists are a very powerful element of the Shopify platform. Having the ability to create an array of list items that can be changed in the admin gives you lots of flexibility. We’ve seen theme developers use them far beyond menu structures. However, knowing how to create nested navigation that can then be styled with CSS is a great tool to have at your disposal.

]]>

The Shopify Collaborator Account: What You Need to Know

by Cozmot | Oct 8, 2020 | Shopify, Shopify Partner

As a Shopify Partner, you’ve almost certainly come across development stores, the free Shopify account that allows you to build stores for clients and test out new themes and apps. Development stores are a key component of building for Shopify, and offer tons of opportunity to explore what the platform has to offer. But what if you have a client who already has a Shopify store? What if you’ve been hired to spruce up the design of an existing store, or launch a new marketing initiative? In that case, it’s time to use a Shopify collaborator account. In this article, we walk you through what a Shopify collaborator account is, how to request access to your client’s store, and how to use collaborator accounts to make your client’s experience even better. Before the introduction of collaborator accounts in 2017, you had to be added to a merchant’s store as a staff account if you wanted to do any work on it. This wasn’t ideal—staff accounts are limited depending on which plan the merchant is on. It also meant that you had to keep track of all the different logins for the multiple stores you were working on. Collaborator accounts were the solution. Today, you can simply request access to your client’s store directly through your Partner Dashboard. The store owner receives an email with your request, approves you for the specific permissions you need to do your job, and you’re good to start working.

“Managed stores are all accessible from your Partner Dashboard, so no more remembering a dozen different logins.”

Your managed stores are all accessible from your Partner Dashboard, so no more remembering a dozen different logins. And since collaborator accounts don’t count towards a merchant’s total staff number, merchants have the flexibility to add you whenever they need you.

You might also like: How to Customize Shopify Email Notifications for Clients.

Requesting access to a client’s store

The process for requesting access to your client’s store is simple.

1. In your Partner Dashboard, click Stores.
2. Click Add store.
3. For type of store, choose Managed store.
4. Enter the URL of the store.
5. In the Permissions section, select the sections of the store you want to access, or check Full access. Remember that the store owner can change these permissions after your account is created. See below for more information on permissions.
6. If you’d like, include a message to the store owner in the Add a message section.
7. Click Save.

Once you send your request, an email will be sent to the store owner and a notification will appear on their Shopify Home, asking them to approve you. Requests expire after seven days, but don’t worry—you can always re-request access after the expiration date.

shopify collaborator account: client notification request — Your client gets notified when you request access to their store via a collaborator account.

shopify collaborator account: access message — Collaborator accounts give you access to your client’s Shopify admin but don’t count toward their staff account limit.

Once your client has approved you, you’ll be able to access their store—and all the other stores you work on—via the Stores tab in your Partner Dashboard.

You might also like: 4 Quick Ways to Build Trust With a New Client.

Removing managed stores

Once you’ve finished working with your client, the merchant can remove your account from their store. You can also remove your collaborator account by visiting the Stores page, clicking on the store in question, and clicking Remove managed store. Removing managed stores also helps you maintain security for the merchants you’ve worked with.

How to respond to your client asking why you need access to their store

The permissions you should request from a client depend greatly on the work you’ll be doing for them. For example, if you’re going to be designing a store, you don’t need access to the store’s finances. You could, however, need access to the following:

- Navigation
- Themes
- Blog Posts and Pages
- Orders
- Products

A full list of possible permissions with their descriptions can be found in our Help Center. It can be helpful to take the time to explain to your clients why you need access to certain parts of their store—it builds trust, and helps your client understand the different aspects of the work you’ll be doing for them. If you send them a request for access without letting them know it’s coming, this can cause confusion and delay the project. Here’s a short script template you can adapt to let your clients know you’ll be requesting access to their store via a Shopify collaborator account:

Hi [client name], Hope you’re well. We’ve reached [current stage of your client project]. To move forward, I will be requesting access to your store, [name of your client’s store], via a Shopify Partner collaborator account. A collaborator account allows me to only access parts of your store you want me to see, and it doesn’t count toward your store’s staff account limit. Based on the nature of our work together, will need [areas of your client’s store you need access to] access permissions. I will request access and you will receive an email from Shopify shortly notifying you. Please accept my request so that I can make the following updates: [list of changes you have discussed with your client]. If you have any questions, please let me know. You can also check out this Shopify Help Doc for more information about collaborator accounts. Thanks, and have a great day. Kind regards, [Your name]

A Shopify collaborator account establishes a smooth working experience

A Shopify collaborator account establishes a collaborative environment that gives you an opportunity to do great work for merchants everywhere. They allow you to easily access the parts of a merchant store you need to do your job, while ensuring that the merchant experience is safe and controlled. Collaborator accounts make the process of working for existing Shopify merchants much smoother, and builds your reputation as a trusted Shopify Partner.

Build apps for Shopify merchants

Whether you want to build apps for the Shopify App Store, offer custom app development services, or are looking for ways to grow your user base, the Shopify Partner Program will set you up for success. Join for free and access educational resources, developer preview environments, and recurring revenue share opportunities.

]]>

How to Customize Shopify Email Notifications for Clients

by Cozmot | Oct 8, 2020 | Shopify, Shopify Partner

Why customize Shopify email notifications for clients? As online businesses become increasingly engaged across various channels, customers have come to expect a seamless experience at every touchpoint (take a look at subscription-based email marketing for example). Email can often be overlooked in favor of more immediate UX considerations—but given that every customer will receive email notifications, it’s critical that email communicates with your client’s customers effectively and appropriately.

“It’s critical that email communicates with your client’s customers effectively and appropriately.”

Personalized emails allow your client to maintain a look and feel that’s consistent with the rest of their brand. By embedding on-brand images, and rewording text to conform with a brand’s tone, your client can stay close to their audience. It’s also possible to amplify the value of your client’s products by adding extra content to these notifications. Some products may have instructions that can be included as text within these emails, while others could link to a video. Being strategic about how abandoned checkout emails are sent can also open up a range of marketing opportunities. By applying a discount code to the abandoned checkout email, your clients can leverage this chance to boost conversions, since the discount would be an incentive to complete the sale.

Grow your business with the Shopify Partner Program

Whether you offer web design and development services or want to build apps for the Shopify App Store, the Shopify Partner Program will set you up for success. Join for free and access revenue share opportunities, developer preview environments, and educational resources.

How to customize email notifications

Shopify sends notifications to customers when different actions take place. There are 16 notifications that customers can receive, including order confirmation and abandoned checkout. Each one of these notification templates can be customized to include custom HTML and CSS, which means there’s a lot of room to showcase your client’s brand. It’s important to carefully consider what kinds of customizations would suit each particular client. There’s a range of email-specific Liquid variables that can be used for many different purposes. Whether you’re looking to output customer info or product features, we’re sure that you’ll find something that can improve email notifications for your clients. With this in mind, here are two customizations that can add advanced functionality to Shopify email notifications.

1. Add conditional content using Liquid operators

It’s possible to display specific content for individual products on an email, using conditional Liquid operators. With if statements you can add text, or images, that will appear when a product fulfills criteria that you set up. As well as Liquid operators, you will also use the line item object, which allows you to reference particular properties of a product that’s in a customer’s shopping cart. Each line item represents a single line in the customer’s shopping cart and they can also be used in email notifications to isolate individual properties of a product. You can see all the different variables in our Liquid documentation.

You might also like: How Smart Design Patterns can Improve Store Conversions.

For example, your client could have a set of products that have a unique set of instructions—maybe they are downloadable products and there are specific steps to follow for a customer to get one of them. In this case, you could add conditional Liquid if statements that would output these instructions, if a product contained a specific word in its title. The code for this would consist of an if statement using contains to check for the presence of a specific word, in this example “Book”, within the product title:


{% if line.title contains 'Book' %}
<p>These are the instructions for the Book</p>
{% endif %}

{% if line.title contains 'Book' %}

<p>These are the instructions for the Book</p>

{% endif %}

The location of where this message appears would be up to you, but a common placement could be below the title of the product. In that case, you could add the code within the cell that contains the line.variant.title line item, and above the closing </td> tag. This could look like the below image:

Now when a customer orders a product with “Book” in the title, they would see the specific message on their order notification email below the product title. To the customer, the email would appear like this:

shopify email notifications: customer notifications

This is a simple yet powerful way to display product-specific content within emails, and could potentially save clients from customer frustration if products require installation or other post-purchase actions. Even if clients simply want to send a friendly message for certain products, it’s a perfect way to introduce creativity into email notifications.

You might also like: The 10 Best Markdown Editors.

2. Apply discount codes on abandoned checkout emails

According to the Baymard Institute, 69 percent of online shopping carts are abandoned before the customer completes a sale, which represents a huge loss of potential sales for your clients. Recovering abandoned carts can be a huge challenge, so if you can improve results in this area, you’ll add a lot of value to your client projects (and potentially be able to justify charging more).

“According to the Baymard Institute, 69 percent of online shopping carts are abandoned before the customer completes a sale.”

Generally, abandoned checkout emails are sent a few hours after the potential customer “bounced” away (you can read our guide to decreasing bounce rate), so if they receive an encouraging email with a discount code, they could be motivated to complete the sale. Thankfully, it’s possible to apply an automatic discount to an abandoned checkout recovery email to incentivize these would-be customers. To achieve this effect, you would first need to create a percentage discount code or a monetary discount code, depending on the type of promotion your client would like to offer. Once this discount has been created, make a note of the name assigned to the discount code, for example “WelcomeBack”. This name will be needed when you are customizing the notification template. Next, on the abandoned checkout notification template, you’ll need to change the destination of the “Complete your purchase” call-to-action button. Usually when a customer clicks to complete their purchase, they’re directed to the checkout, and their previously chosen products are pre-loaded. We can follow this same process, but apply the discount we created, by changing the default URL to a URL containing the discount. You’ll need to find the line that includes: <td class="button__cell"><a href="{{ url }}" class="button__text">Complete your purchase</a></td> And the line that includes {{ shop.url }}:

shopify email notifications: abandoned cart email notification code

The URL variables here will need to be replaced with a code snippet that appends text to the URL so that it includes the discount. This snippet of code would look like this:


{% if url contains '?' %}
{{ url | append: '&discount=WelcomeBack' }}
{% else %}
{{ url | append: '?&discount=WelcomeBack' }}
{% endif %}

{% if url contains '?' %}

{% else %}

{% endif %}

Once you’ve replaced {{ shop.url }} and {{ url }} with the snippet noted above, your email notification should appear like this:

<td class=“button__cell“>

<a href=“{% if url contains ‘?’ %}

 {{ url | append: ‘&discount=WelcomeBack’ }}

 {% else %}

 {{ url | append: ‘?&discount=WelcomeBack’ }}

 {% endif %}“ class=“button__text“>Complete your purchase</a></td>

</tr>

</table>

{% if shop.url %}

<table class=“link secondary-action-cell“>

<tr>

<td class=“link__cell“><a href=“{% if url contains ‘?’ %}

 {{ url | append: ‘&discount=WelcomeBack’ }}

 {% else %}

 {{ url | append: ‘?&discount=WelcomeBack’ }}

 { % endif %}“ class=“link__text“><span class=‘or‘>or</span> Visit our store</a>

</td>

view raw email-notification-discount-code.liquid hosted with ❤ by GitHub

view raw email-notification-discount-code.liquid hosted with ❤ by GitHub Finally, you can add some text to the abandoned checkout email template informing your client’s customer that a discount was applied. This could look something like this:

{% capture email_title %} Your shopping cart is waiting for you {% endcapture %}

{% capture email_body %}

{% if billing_address.first_name %}Hi {{ billing_address.first_name }}, w{% else %}

W{% endif %}e noticed there {% if item_count == 1 %}was an item{% else %}were some items{% endif %} left in your shopping cart.

If you’re ready to complete your order, your cart is waiting for your return, and you can even have a 15% discount on us.

{% endcapture %}

view raw email-notification-discount-text.liquid hosted with ❤ by GitHub

view raw email-notification-discount-text.liquid hosted with ❤ by GitHub Now when a customer clicks on the call-to-action button on the email, they’ll be directed to the checkout of your client’s store, with their pre-loaded products and a discount applied. This is exactly the kind of sweetener that will drive conversions for your clients!

You might also like: Canonical URLs: What Are They and Why Are They Important?

Make sure that you test!

Regardless of your design, you’ll have to test each email to ensure the output looks right from a customer’s perspective. As developers, we should always be thinking about how the end product will look and feel for our client’s customers. On the notification settings page there are two options for testing, by previewing the notification or by sending a test email. The preview function is very helpful if you are making quick edits, but it’s advised that a test email should be sent once you’re finished working on a template. Better still is to go through the actual process with a test order, to look out for any possible pain points you could have missed, so that you are 100 percent sure that everything will run smoothly.

Have you experimented with customized Shopify email notifications and added new functionality to emails? We’d love to hear from you in the comments below!

]]>

Building Nested Navigations with Shopify Link List

Create a development store

Creating a nested navigation

Creating navigation menus

Outputting the menu

Multi-level navigation

Final touches

Start nesting those menus!

The Shopify Collaborator Account: What You Need to Know

Requesting access to a client’s store

Removing managed stores

How to respond to your client asking why you need access to their store

A Shopify collaborator account establishes a smooth working experience

How to Customize Shopify Email Notifications for Clients

How to customize email notifications

1. Add conditional content using Liquid operators

2. Apply discount codes on abandoned checkout emails

Make sure that you test!

Recent Posts

Recent Comments

Join 150+ Clients

About Us

Company

Reach us

Building Nested Navigations with Shopify Link List

Create a development store

Creating a nested navigation

Creating navigation menus

Outputting the menu

Multi-level navigation

Final touches

Start nesting those menus!

The Shopify Collaborator Account: What You Need to Know

Requesting access to a client’s store

Removing managed stores

Sign up for our Developer Digest newsletter

How to respond to your client asking why you need access to their store

A Shopify collaborator account establishes a smooth working experience

Build apps for Shopify merchants

How to Customize Shopify Email Notifications for Clients

Grow your business with the Shopify Partner Program

How to customize email notifications

1. Add conditional content using Liquid operators

2. Apply discount codes on abandoned checkout emails

Make sure that you test!

Recent Posts

Recent Comments