Brisbane Shopify Meetup - 1st December 2016

#ShopifyMeetup

Brisbane MeetupThursday 1st December 2016 - #ShopifyMeetup

#ShopifyMeetup

Welcome!

#ShopifyMeetup

Why a Brisbane Shopify Meetup?The demand is there – 103 registered attendees for the first meetup!

34%

59%

6%

Helps merchants build and grow their businessSells online and/or offline myselfNo Answer

#ShopifyMeetup

About the HostsReload 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.

#ShopifyMeetup

Tonight’s SpeakersOur speakers and panel for tonight are:

Cal WilsonThe Working Party

Simon ByrneAndzen

Jason BowmanShopify Plus

#ShopifyMeetup

Cal Wilson The Working Party

Squeezing Value From Your Shopify Theme

A grab bag of tips, tricks and gotchas

Quick intro

Let’s talk about what the customer sees

PopupsWhat 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

Popups (continued)

Carousels & SlidersAssume that only the first slide is seenIf 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

ImagesEasily the biggest contributor to page bloatand is also the easiest thing to fix!

• Collection pagination defaults• Home page product listing• Image sizes• High density displays

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)

Images (continued)

PhotographyGood photography is invaluablebad photography is toxic

• Conveys your brand, priorities and purpose• Theme exists to showcase your images• Choose fewer, better images

Trust IndicatorsAssume your customers are nervousShow them you are trustworthy

• Shopify Secure Badge• Credit card & Paypal logos• Testimonials & Reviews• Quality content

Mobile–firstWhen making changes, view them on a mobile device firstWill 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

Mobile-first (continued)

Colour ContrastErr on the side of cautionUse free contrast checkers online

• Quick and easy accessibility win• Site looks better in low and high

light environments

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

Colour contrast (cont)

Let’s talk about what the customer reads

Text!Easy to do, significant benefitdo this stuff first

• Do: alt text for your images• Don’t: text inside of images• Do: use collection descriptions

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

Text (continued)

CustomersCustomers are a great resourcedon’t just sell to them

• Send a personal email• Use grouping to identify opportunities• Be forthright about asking for reviews, incentivise

as required

ReviewsQuick path to validationStar ratings are invaluable

• Site review• Product reviews• JSON-LD & Schemas

Let’s talk about your daily practice

Buy from your own siteEasy way to identify issuestake 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?

Align PrioritiesMake sure your priorities are the same as your customersmisaligned priorities lead to high

bounce rate

• If customer visits you to buy X, don’t push Y

• Remove roadblocks

Use dataCollecting 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

Update your themeTheme vendors release periodic updates

• apps.shopify.com/theme-updater-by-out-of-the-sandbox

QuestionsAsk me now! Or later via:

• Email: [email protected]• Twitter: @sushi• LinkedIn: linkedin.com/calwilson

#ShopifyMeetup

Simon Byrne Andzen

#ShopifyMeetup

Jason Bowman Shopify Plus

MetafieldsA Most Excellent Feature

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

<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 ">

"What are they?"Magical custom fields

Different layouts without needing Alternate templates

Keep your theme simple

The four partsNamespaces, keys, values and descriptions

1: Namespaceused to group different metafields

2: Keywill be used to reference our information

3: Valuewill contain our unique content.

4: Description (optional)A description about the metafield

{ "metafield": { "namespace": "youtube", "key": "video_id", "value": "pwOhcVO6M3M" }}

{ "metafield": { "namespace": "youtube", "key": "video_id", "value": "pwOhcVO6M3M" }}

Show a video

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

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

<article> {{ benefits }} </article> {% endif %} ...</section>

Let's cover some other possible uses of metafields

There's lots. This is a teeny portion.

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

That's cool and all, but how do we edit them?

It's not fun unless you're making them

Tools to editShopify 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)

Maybe for SEOJust to throw a curve ball out there

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)

#ShopifyMeetup

Question Time!

#ShopifyMeetup

Stay in Touch!To stay in the loop for future Brisbane Shopify Meetup events, you can:

o Join the “Brisbane Shopify Meetup” group on Meetup.como Follow the Reload Media twitter account @reload_mediao If you registered tonight, we’ll email you when the next one

is on.

Any feedback at all please contact us!

#ShopifyMeetup

Thanks for Coming!