The Working Party and Disco hosted the first Shopify Partner Social

1. Shopify Partner Social
Melbourne 2017

2. Rhys Furner
Shopify

8. Jason Bowman
Shopify

9. Metafield Madness

10. What is a metafield and
why should I care about
them?
Because saying they are awesome
isn't often a good enough reason

11. How can metafields
help you?
Maybe we'll talk a little about apps too

12. Some healthy warnings on
Metafields usage.
Just because you can use them
doesn't mean that you should

13. What is a metafield and why
should I care about them?

14. https://help.shopify.com/themes/liquid/objects/metafield
Let's start with the basics: The metafields object allows
you to store additional information for products,
collections, orders, articles, pages, customers and your
shop. You can output metafields on your storefront
using Liquid.

15. Namespace + Key
product.metafields.tabs.specs
metafields: {
tabs: {
specs: 'value',
photos: 'image1.jpg,image2.jpg'
}
}
https://help.shopify.com/themes/liquid/objects/metafield

16. {%- assign tabs = product.metafields.tabs -%}
<ul class="tabs">
<li>{{ product.description }}</li>
{%- for field in tabs -%}
<li>{{ field | first }}: {{ field | last }}</li>
{%- endfor -%}
</ul>
Basic code example.
Product code would be prettier and
check for valid metafield namespaces

17. 1. Extends data fields, to complement or override
2. Avoids alternate templates to simplify theme files
3. Avoids abusing tags (remember the 1000 limit)
4. Avoids adding hacks in the description*
5. Maintains a pretty content structure
6. Keeps content hidden away**
7. They're awesome.
* sometimes these hacks are a good thing
** not always a good thing

18. How can metafields help you?

19. Migrations. Other platforms
may have custom fields that
show on the storefront.
Knowing you can map this data in the migration
makes for an easier project win.

20. Design touches like colour
theming. Blue product has
blue buttons, blue text.
A metafield can store a hex code that's
then used to output an inline style
https://www.covetnation.com/products/occ-cosmetic-pencil-pool-boy

21. {%- if product.metafields.style.colour != blank -%}
{%- assign mColour = product.metafields.style.colour -%}
<style>
.add-to-cart {
background: {{ mColour }}
}
</style>
{%- endif -%}
Grab the hex code, add some css

24. Tabs and extra content.
Basic extra content, in different places

25. {%- assign tabs = product.metafields.tabs -%}
<ul class="tabs">
{% include 'product-description' %}
{%- for field in tabs -%}
<li><h2>{{ field | first }}</h2>{{ field | last }}</li>
{%- endfor -%}
{% include 'related-products' %}
</ul>
Basic code example.
Product code would be prettier and
check for valid metafield namespaces

28. Delivery timeframes,
backorder dates,
Units sold (with bar)...
Knowing you can map this data in the migration
makes for an easier project win.

29. {% if backorder != blank %}<div>This item is backordered, and will
ship in {{ backorder }}</div>{% endif %}
<div class="stock-sold-bar">
<span data-start="{{ startCount }}" data-stock="{{ currentCount }}"
data-percent="{{ soldPercent }}"></span>
</div>
http://freakdesign.com.au/blogs/news/17335317

32. Dynamic layouts. Not as
sexy as sections, but still
super handy.
Add lots of custom sections, and create a unique
per product layout

34. Customer personalisation.
Use tags when you can, but
metafields take things next
level.
Customer preferences FTW

36. Inventory location.
Multi-location inventory is
coming. Until then
Metafields can help...
https://www.deadstock.ca/products/puma-tsugi-netfit-puma-black

37. {%- assign locations = product.metafields.locations -%}
{%- assign items = locations | split: ';' -%}
<ul class="store-location">
{%- for item in items -%}
{% assign stock = item | split:',' %}
<li>{{ stock | first }}: {{ stock | last }}</li>
{%- endfor -%}
</ul>
Simplified version, but you get the
general idea.

39. Related anything.
Nested anything.
Grouped anything
Related products. Related collections.
Nested collections. Products in articles.

40. {%- assign r = product.metafields.related.items | split:"," -%}
<div class="related-products">
{%- for p in r -%}
{% assign relatedProduct = all_products[p] %}
{%- include 'some-snippet' product: relatedProduct -%}
{%- endfor -%}
</div>
This could be easier to read.

42. {%- assign cParent = product.metafields.col.parent -%}
{%- assign cChild = product.metafields.col.child -%}
<div>
{%- if collections[cChild].products.size > 0 -%}
{%- include 'collection-loop' with collections[cChild] -%}
{%- endif -%}
</div>
This could be easier to read.

43. SEO control. Set custom
canonical urls and meta
tags with metafields.
Related products. Related collections.
Nested collections. Products in articles.

44. Hide items from the
sitemap.
Related products. Related collections.
Nested collections. Products in articles.

45. To add noindex and nofollow
meta tags to an object's
pages, create a new
metafield for the object with
the following attributes:
https://help.shopify.com/api/tutorials/updating-seo-data
"namespace" : "seo"
"key" : "hidden"
"value" : 1
"value_type" : "integer"

46. Cost of Goods.
I see a few people asking for a way to store COGs.
This can help.

48. Best practice and healthy
warnings on Metafields usage.

49. Should the metafield even
live in Shopify?
Think smart about the data usage and how you're going to store it. Many things
would be better in their own offsite database. Others in built in options.

50. Not well supported in the
Admin. You must rely on
apps and third party tools.
Only the bulk product editor has the
ability to edit metafields
https://www.shopify.com/partners/blog/53573123-secrets-of-the-shopify-bulk-editor

51. Metafields are not
returned in Admin or
Storefront search.
Storefront can be helped with apps,
or AJAX search methods (if the SKU count is small)

52. API call limits are a real
thing. Are you considering
that in your dev flow?
How many metafields are you saving?
How many per object? How often will you update?
100 values in 1 metafield faster than 100 individual metafields

53. Metafields don't work in
Shopify Scripts.
How many metafields are you saving?
How many per object? How often will you update?

54. Apps and info

55. Document your usage for
the merchant and fellow
dev in the theme.
Nothing worse than digging through some complex theme to find there's a pile of
custom content being pulled in from a metafield.

56. More
1. Shopify Bulk Editor (built in metafield editing)
2. Shopify Apps (search for metafields)
3. Extensions like ShopifyFD or Custom Fields
4. xporter app
5. https://help.shopify.com/themes/liquid/objects/metafield
6. https://help.shopify.com/api/reference/metafield
7. https://www.shopify.com/partners/blog/110057030-using-metafiel
ds-in-your-shopify-theme

57. Gavin Ballard
Disco

58. HACKING
THE
CHECKOUT

59. RESPONSIBLY ENHANCING
THE
CHECKOUT

61. augment user
experience
capture necessary
information
consistent brand
experience

62. augment user
experience
capture necessary
information
consistent brand
experience
interfering/replacing
user experience
capturing
unnecessary
information
changing the flow

63. 1-PAGE
CHECKOUT
MYTH

64. 1-PAGE
CHECKOUT
MYTH
http://bit.ly/2quoVOj

65. CUSTOM
CHECKOUT
EXAMPLE

67. CUSTOM
CHECKOUT
HOW-TO

68. checkout.liquid

69. driven by javascript
{%- capture HTML_AUTOCOMPLETE_RESULTS_MESSAGE -%}
<li class="ui-menu-item ui-menu-item--message">
<span>
<span class="ui-menu-item--message__action" data-act=“show-address">{{ 'shopify.checkout.custom.error' | t }}</span>
{{ 'shopify.checkout.custom.autocomplete_results_message' | t }}
</span>
</li>
{%- endcapture -%}

70. <!-- Initialise custom checkout. -->
<script type="text/javascript">
(function(YoufoodzCheckout, $, Shopify) {
// Define options that will be passed to each module on initialization.
var options = {
TEMPLATES: {
HTML_DISABLED_DISCOUNTS_MESSAGE: {{ HTML_DISABLED_DISCOUNTS_MESSAGE | json }},
HTML_DELIVERY_ADDRESS_SUBTITLE: {{ HTML_DELIVERY_ADDRESS_SUBTITLE | json }},
HTML_KNOWN_SUBURB_PROMPT: {{ HTML_KNOWN_SUBURB_PROMPT | json }},
driven by javascript

71. page event pattern +
modules

72. page event pattern +
modules
$(document).on('page:load page:change', function() {
$.each(YoufoodzCheckout.modules || [], function(index, module) {
if(module.steps.indexOf(Shopify.Checkout.step) !== -1) {
// If on the shipping method page and rates haven't yet returned, do
// nothing.
if(Shopify.Checkout.step === 'shipping_method' && $('[data-poll-refresh]').length) {
return;
}
// Otherwise, initialise the module.
initializeModule(module, options);
}
});
});

73. cart attributes

74. THANKS! @gavinballard

75. Bodog Olah
Createur

76. Why Use Advanced Search?
✓ Faster
✓ More Relevant
✓ Better Merchandising
✓ Analytics
✓ Faster, Higher Conversions
✓ Better UX

77. Autocomplete
• Provide value in results
• Remove clutter
• Obsess about relevance
• Refine synonyms
• Analyse data
• Modify results

78. Filters
• Use existing data, if possible
• Survey customers about how
they refine searches
• Set realistic min max
boundaries
• Test for speed
• Customise sort order on a per-
result set basis
• Boost the results you want
• Push down the results you
don’t
• Decide between OR / AND
• Allow easy toggling of
selections
• Make good use of UI elements

79. Information / Guides
• Separate results in different
categories within the same
collection
• Index informational results
alongside shopping results

80. Results Picker
• Guide by selection for people
who need prompting
• Think like your customers
• Provide quick, contextual
updates
• Show counts with selects

81. Autocomplete Suggestions
• Suggest common terms
• Customise layout elements for
your audience

82. Advanced Filtering
• Consider your audience
• Show relevant data in results
• Contextual searches with
dropdowns
• Advanced filtering based on
category

83. Cheap & Easy Autocomplete
• Algolia app

84. Email me at
bodog@createur.com

85. 5 minute break
🍕
🍻
🕒 🚽

86. Cal Wilson
The Working Party

99. Q&A

103. Who’s Hiring?

104. Thanks for coming!
🍕
🍻
📋 🚽