The document summarizes a Shopify meetup event in Brisbane on December 1st, 2016. It introduces the hosts and three speakers: Cal Wilson from The Working Party, Simon Byrne from Andzen, and Jason Bowman from Shopify Plus. Cal Wilson's talk focused on tips for squeezing value from Shopify themes. Simon Byrne's talk discussed metafields, a feature for customizing Shopify stores. Jason Bowman's talk also covered metafields and their uses. The document concludes by providing information on staying updated about future Shopify meetup events.

1. #ShopifyMeetup
Brisbane Meetup
Thursday 1st December 2016 - #ShopifyMeetup

2. #ShopifyMeetup
Welcome!

3. #ShopifyMeetup
WhyaBrisbaneShopifyMeetup?
The demand is there – 103 registered attendees for the first meetup!
35%
59%
6%
Helps merchants build
and grow their business
Sells online and/or
offline myself
No Answer

4. #ShopifyMeetup
AbouttheHosts
Reload Media is a Shopify Experts agency and has worked with dozens of Shopify and
Shopify Plus sites on all facets of their digital marketing, including Google AdWords,
SEO, Pay Per Click, Social Media and more.

5. #ShopifyMeetup
Tonight’sSpeakers
Our speakers and panel for tonight are:
Cal Wilson
The Working Party
Simon Byrne
Andzen
Jason Bowman
Shopify Plus

6. #ShopifyMeetup
Cal Wilson The Working Party

7. Squeezing Value From Your Shopify
Theme
A grab bag of tips, tricks
and gotchas

8. Quick intro

10. Let’s talk about what the customer sees

11. Popups
What is the site goal?
Push that goal in the popup
• The first experience the customer has with your brand
• Show them the thing you are most
proud of
• Shopify gives you many opportunities to collect email
addresses

12. Popups (continued)

13. Carousels & Sliders
Assume that only the first slide is seen
If that’s the case, just use one slide
• Single image, single CTA
• Most themes have this as an option
• Don’t be afraid to ask your theme developer

14. Images
Easily the biggest contributor to page bloat
and is also the easiest thing to fix!
• Collection pagination defaults
• Home page product listing
• Image sizes
• High density displays

15. Images (continued)
• Optimise images before you upload
– ImageOptim (imageoptim.com/mac)
– Kraken (kraken.io)
• Leverage Shopify’s inbuilt image optimisation
– May need an Expert
• Investigate third-party image hosting
– Imgix (imgix.com)

16. Images (continued)

17. Photography
Good photography is invaluable
bad photography is toxic
• Conveys your brand, priorities and purpose
• Theme exists to showcase your images
• Choose fewer, better images

18. Trust Indicators
Assume your customers are nervous
Show them you are trustworthy
• Shopify Secure Badge
• Credit card & Paypal logos
• Testimonials & Reviews
• Quality content

19. Mobile–first
When making changes, view them on a mobile device first
Will force you to rationalise
• Smaller screens = tough decisions
• If it’s not needed on mobile, why is it needed on desktop?
• Simulate 3G or 2G connections

20. Mobile-first (continued)

21. Colour Contrast
Err on the side of caution
Use free contrast checkers online
• Quick and easy accessibility win
• Site looks better in low and high
light environments

22. Colour contrast (cont)
• webaim.org/resources/contrastchecker/
• paciellogroup.com/resources/contrastanalyser/

23. Colour contrast (cont)

24. Let’s talk about what the customer reads

25. Text!
Easy to do, significant benefit
do this stuff first
• Do: alt text for your images
• Don’t: text inside of images
• Do: use collection descriptions

26. Text! (continued)
• Do: use descriptive product descriptions
• Do: spell-cehck
• Do: check the Shopify-generated meta descriptions
• Do: write a compelling meta description for your site
• Do: write a content style guide

27. Text (continued)

28. Customers
Customers are a great resource
don’t just sell to them
• Send a personal email
• Use grouping to identify opportunities
• Be forthright about asking for reviews, incentivise as
required

29. Reviews
Quick path to validation
Star ratings are invaluable
• Site review
• Product reviews
• JSON-LD & Schemas

30. Let’s talk about your
daily practice

31. Buy from your own site
Easy way to identify issues
take the time to read everything
• Do it yourself or with others
• How did it make you feel?
• How clear were your CTAs?
• Was it obvious what you were
expected to do?

32. Align Priorities
Make sure your priorities are the same
as your customers
misaligned priorities lead to high
bounce rate
• If customer visits you to buy X,
don’t push Y
• Remove roadblocks

33. Use data
Collecting data is easy, using it to make decisions is harder
• Analyse search queries for quick
collection & description wins
• Identify where customers drop off
• Identify distractions to CTA with
heat maps

34. Update your theme
Theme vendors release periodic updates
• apps.shopify.com/theme-updater-by-out-of-the-sandbox

35. Questions
Ask me now! Or later via:
• Email: cal@theworkingparty.com.au
• Twitter: @sushi
• LinkedIn: linkedin.com/calwilson

36. #ShopifyMeetup
Simon Byrne Andzen

46. #ShopifyMeetup
Jason Bowman Shopify Plus

47. MetafieldsA Most Excellent Feature

48. "Oh, so they are for SEO right?"
(spoiler: no)

49. <meta name="description"
content="This is a
demonstration store. You
can purchase products
like this from Baby &amp;
Company The Kimono Dress
by Antoni and Alison
embarks a cascade of
color and ">

50. "What are they?"
Magical custom fields

51. Different layouts without
needing Alternate templates
Keep your theme simple

53. The four parts
Namespaces, keys, values and descriptions

54. 1: Namespace
used to group different metafields
2: Key
will be used to reference our information
3: Value
will contain our unique content.
4: Description (optional)
A description about the metafield
{
"metafield": {
"namespace": "youtube",
"key": "video_id",
"value": "pwOhcVO6M3M"
}
}

55. {
"metafield": {
"namespace": "youtube",
"key": "video_id",
"value": "pwOhcVO6M3M"
}
}
Show a video

56. {% assign videoId = product.metafields.youtube.video_id %}
{% if videoId != blank %}
<iframe src="https://www.youtube.com/embed/{{ videoId }}">
</iframe>
{% endif %}

58. Show content in tabs
<section class="tabs">
<nav>...</nav>
{% assign benefits = product.metafields.tabs.benefits %}
{% if benefits != blank %}
<article>
{{ benefits }}
</article>
{% endif %}
...
</section>

60. Let's cover some other
possible uses of metafields
There's lots. This is a teeny portion.

61. Metafield uses
● Customer personalisation
● Download links
● Care instructions
● Shipping notes
● Delivery time estimates
● Testimonials
● Image galleries
● Custom Line Item Properties
● Custom Breadcrumbs
● Smarter Related products*
● Parent / sibling relationships
● Hide prices
● Variant descriptions
● Save customer details

62. That's cool and all, but
how do we edit them?
It's not fun unless you're making them

63. Tools to edit
Shopify Bulk Editor (Built in editor)
Shopify FD (Free Chrome Extension and Bookmarklet)
Shopify Custom Fields (Free Chrome Extension and Bookmarklet)
Metafields Editor (Free App)
Metafields2 (Paid App)
Custom Fields by Bonify (Paid App)
Directly via the Shopify API
(link at the end will have links to these)

68. Maybe for SEO
Just to throw a curve ball out there

69. For more info:
help.shopify.com/themes/liquid/objects/metafield
https://www.shopify.com.au/partners/blog/53573123-
secrets-of-the-shopify-bulk-editor
Or just grab me later this evening (or find me on Twitter)

71. #ShopifyMeetup
Question Time!

72. #ShopifyMeetup
StayinTouch!
To stay in the loop for future Brisbane Shopify Meetup events, you can:
o Join the “Brisbane Shopify Meetup” group on Meetup.com
o Follow the Reload Media twitter account @reload_media
o If you registered tonight, we’ll email you when the next one is on.
Any feedback at all please contact us!

73. #ShopifyMeetup
Thanks for Coming!