Ungrid views

Every type of view – products, orders, and customers – has its own dedicated set of properties to select from, including both metrics from Shopify’s built-in analytics and your shop’s metafields for the view type.

A property can be used in a column directly or be used indirectly via a filter or as basis for a dynamic column in Liquid code (more on that later).

For every column, you can choose a display format such as dates, badges in different colors, percentages etc., and determine if the column should be sortable in the view. You can also single out which columns take part of your in-view filtering.

Create as many columns as you need or create multiple views with a narrower column selection for more focused reporting.

Creating a view

Simply click New view or the + icon next to any existing views, select the type of view, and there you have it – a fresh view with one mandatory column already in place.

Now, this is not very useful in itself, so let’s add some more columns. Click Customize and then click the small + button in the header of the first column. This will insert a new blank column to the right.

This second column has a more advanced header than the first. There is a drag handle for dragging the column to another position (this will make sense once you have more than one column), a field selector, a details button, another + button for adding yet a new column, and a delete button to remove the column.

Using the field selector, select a field for your first column (note how there are both normal properties, analytics and metafields). Then click details – this will show a dialog where you can configure the cell format and layout of the column. You can go back and forth between different fields and try out the formats to get a feel for it.

Changes to the view are shown in real time as you set it up, so it’s easy to see what’s going on and how the final result will look like.

Add the columns you need, drag and drop for your desired sequence and save the layout when you’re done. Drag and drop your columns for your desired sequence, then dress it up a bit with a title, alternate row colors, and cell borders.

Take notice of the two buttons above the view to the right. In View settings, you can set up some more details related to the view as whole, like alternate rows colors or page size. Code edit will be explained in the next section.

Click Save when you’re all done and close the Customizer using the button at the top to the right of the search field.

Now that you have created your first view, let’s try it out.

First, note how the view now has its own tab at the top. When you later have multiple views, it’s easy and quick to switch between them. View tabs can also be rearranged by dragging them to their desired location.

Sort the view using the column headers, export the rows (all or just the ones you’ve selected) to an Excel file. Try the search field to filter the rows further. Not exactly what you needed? Just click Customize again and tweak it some more. Save. Rinse and repeat. Create more views by starting from scratch or duplicate an existing view using the Duplicate button.

Customize views with Liquid

Using Liquid, you can manipulate the objects, that make up the view, both the incoming rows (products, orders or customers, depending on the view type) and the columns as set up by you via the customizer. You can filter the rows in the view, make detailed changes to individual columns and even add entirely new columns.

Note that you will never need to "output" anything in your Liquid code as is the case with your theme, but rather you will be manipulating the view object that make up the view for Ungrid. Having a single {% liquid %} block in your code is enough but you can also have multiple blocks if you want to.

For reference, see Liquid basics in the Shopify docs.

What follows is a quick overview of the most common use cases and Ungrid filters you'll need to use in your views. To see a full list of filters, see the Ungrid filters reference.

Filtering rows

Let's start out with a simple example to filter product rows in a view by the type column.

Click Customize and then Code edit to open the code editor. The editor is a full-featured code editor that allows you to write Liquid code with built-in syntax checks and code completion (press F1 in the editor to see its options).

A product view will always have a products object (similarly, order views will have an orders object, and customer views will have a customers object), which is an array of all the items in the view complete with the same properties you can select as columns in the customizer.

{% liquid

assign my_rows = products | where: "type", "Jeans"
assign view = view | rows: my_rows

%}

The where filter is a standard Liquid filter that allows you to filter an array based on a property value. In this case, we're filtering the products array to only include products that have the type property set to Jeans. The filter will return a new array with only the products that match the condition (there is also a reject filter that does the opposite).

It doesn't really matter to Ungrid how you find the set of rows that you want to make up your view – it just always has to be a subset of the original products array with the properties kept intact.

What is important, though, is that you assign the filtered array back to the view. view is a variable that contains the view object, i.e. your rows and columns. We use a custom rows filter (specific to Ungrid) to replace the rows in the view with the now filtered array.

If you want something more complex, you can use the where filter to filter the rows based on a combination of properties. For example, to filter products by both the type and vendor properties, you can use the following code:

{% liquid

assign my_rows = products | where: "type", "Shoes" | where: "vendor", "Nike"
assign view = view | rows: my_rows

%}

or, if you prefer:

{% liquid

assign my_rows = products | where_exp: "p", "p.type == 'Shoes' and p.vendor == 'Nike'"
assign view = view | rows: my_rows

%}

The code editor supports IntelliSense, so typing either product. or p. (and similarly order. or o., customer. or c.) (note the dot) will bring up a list of corresponding properties and you can use the autocomplete feature to select the property you need. Also, when you type a bar symbol | to start a filter, the editor will show you a list of available filters (both standard and custom).

If you hover over a custom filter (like rows), you'll see some additional usage information for that filter.

Conditional formatting of cells

In addition to filtering rows, you can also use Liquid to conditionally format the cells in your view. For example, you can highlight a low inventory count in red, where "low" is something you define in the code.

First, let find the column that contains the inventory count.

{% liquid

assign available_inventory_column = view.columns | find: "analytics_inventory_available"

%}

This warrants a little explanation. The columns object in the view contains an array of all the columns in the view (as defined by you). Each column has a handle property that stays the same regardless of the column's title. In this case, the Available inventory column has the handle analytics_inventory_available. You can check a column's handle via the details dialog for the column in the customizer.

find is a custom Ungrid Liquid filter that specifically finds a column from the columns array by its handle. If you hover over the find filter, you'll see the usage information for the filter.

Now, with our new variable available_inventory_column, we can make specific changes to the cell format, just as we would otherwise have done via the customizer. In this case, we'll change the display format to "badge" and color the badge red (or, in Shopify terms, 'critical') if the inventory count is less than 10.

{% liquid

assign available_inventory_column = view.columns | find: "analytics_inventory_available"

if product.analytics.inventory_available < 10
    assign available_inventory_column = available_inventory_column | format: "badge", "critical"
endif

assign view = view | columns: available_inventory_column

%}

Just as we needed to assign filtered rows back to the view, we need to do the same for any changes to columns. Here, we use a custom columns filter (specific to Ungrid) to merge the new column with the existing columns in the view.

Note that just as products is a variable that contains all the products in the view, the product variable contains the current product being processed per row in the view. In this case, we're checking the inventory count for the product (across all variants) and assigning a new format to the column if the value is less than 10. You can of course make your condition as simple or complex as you like.

For rows, where the inventory count is not less than 10, the format will be whatever you set up in the customizer, but you can also override it here in code. Foe example, if you want to set a default format for all products that don't match the condition, you can use the standard default filter.

{% liquid

assign available_inventory_column = view.columns | find: "analytics_inventory_available"

if product.analytics.inventory_available < 10
    assign available_inventory_column = available_inventory_column | format: "badge", "critical" | default: "badge", "default"
endif

%}

Adding columns dynamically

You can also add columns dynamically to a view for a fully customized experience. For example, you can add a column for own metrics calculation.

To add a column dynamically, you need to build it from scratch. Use the column helper variable together with our custom Ungrid filters to build a proper column, that can be assigned back to the view

To keep it simple, we'll add a column that shows the number of medias assigned to each product.

{% liquid

assign media_size = column | title: "# of medias" | value: product.medias.size | sortable
assign view = view | columns: media_size

%}

Here we add a column with the title # of medias and use a value Ungrid filter. In this case, we're setting the value to the number of medias assigned to the product. The sortable filter makes the column sortable in the final view. Anything that can be set in the customizer can also be set in code on a per-row basis.

A dynamically added column will by default be added after the already assigned columns. If you want to pin it in a specific position, you can use the position_before or position_after filter to set the position of the column relatively to another column, even another dynamic column.

{% liquid

assign media_size = column | title: "# of medias" | value: product.medias.size | sortable | position_after: "vendor"
assign view = view | columns: media_size

%}

You can build as many dynamic columns as you need, combine them with your changes to already assigned columns, and assign them back to the view in one go. Here is the full example, including the filtered rows:

{% liquid

assign my_rows = products | where_exp: "p", "p.type == 'Shoes' and p.vendor == 'Nike'"

assign available_inventory_column = view.columns | find: "analytics_inventory_available"
if product.analytics.inventory_available < 10
    assign available_inventory_column = available_inventory_column | format: "badge", "critical" | default: "badge", "default"
endif

assign media_size = column | title: "# of medias" | value: product.medias.size | sortable | position_after: "vendor"

assign view = view | rows: my_rows | columns: available_inventory_column, media_size

%}

Setting a view attention flag

You can also set up an attention flag for a view. This will show up in the view tab at the top of the page. The attention flag is – besides a flag icon – a simple text that will be shown in the tab in a chosen attention color. You can use it to show yourself or your team members if something in the views needs to be taken care of or not.

Attentions are calculated for all views as soon as you open Ungrid. You don't have to click into each view to see their attention messages.

{% liquid

assign rows_with_down_trends = products | where_exp: 'p', 'p.analytics.average_order_value_7d_30d_trend < 0'
assign attention_flag = rows_with_down_trends.size > 0 | if: 'critical' | default: 'success'

assign view = view | attention: attention_flag, "Trends"

%}

For the full list of available filters, see the Ungrid filters reference.