Ask Me Anything

ask me anything

As an innately nosey curious person, I love reading Q&A and AMA (“Ask Me Anything”) posts. I was inspired by the one Bre did to give it a go myself.

So here you go, this is your invitation to ask me anything. Really, anything! It doesn’t necessarily have to be development-specific (although I reserve the right to politely decline to answer).

Leave your question(s) in the comments and I’ll answer them in comment replies so be sure to check back.

Three Quick Links: Email Newsletter Inspiration

Three quick links for email newsletter inspiration

I’m headed out of town today for LoopConf in Las Vegas, where I’ll be speaking about workflow and automation tools and also learning a whole lot about WordPress development. I am both insanely excited and insanely nervous.

I’ll likely post more about the experience when I get back, but in the meantime I’ll leave you with a few sites I’ve been enjoying for email inspiration (for customer onboarding, newsletters, etc.).

Two of these three links are via email expert Clinton Wilmott, so thanks Clinton!

1

Campaign Monitor has a really nice gallery that you can sort by format/ type (number of columns, announcement vs invitation).

Campaign Monitor's email gallery

2

There’s also a really great collection from Creative Mornings in partnership with MailChimp, fittingly called “Out of the Ordinary Emails”. Just like it says, these trend more out there/ creative and are super inspiring.

Out of the Ordinary Emails from Creative Mornings and MailChimp

3

Finally, Really Good Emails is a site completely dedicated to just that (I also love how it’s “good” in the name not something superlative). It’s filterable by a whole ton of different types of emails from Alerts to Thank You, and the “good” goes beyond just design to content as well.

Really Good Emails

Noted: 31st Birthday Edition

noted

It’s my 31st birthday this weekend, so I’m going to take a break from all the heartbreaking news from around the world (although if you’re looking for a way to support Nepal, check this out) and celebrate with this completely self-centered post rounding up a bunch of random things I really like, just because I like them. It’s in the same vein as the Noted roundups I do from time to time but even more random.

1

London shop Present and Correct has what is probably my favorite fun/ inspirational Twitter account of all time. I particularly love the imagery they share, such as:

They also kill it in text format:

2

Like many little kids these days, my boys love their iPhone/ iPad/ Kindle Fire apps. My favorite set of apps are the ones from Sago Mini because they’re beautifully designed and illustrated and are full of open-ended exploration and sweet interactions. My little guy loves cars and other vehicles, so we recently added their Road Trip app to our collection. This photo is from their website:

Sago Mini Roadtrip

3

While I do vote, I am not especially into politics, nor do I actually watch SNL or Jimmy Fallon, so there is no motivation in sharing this video other than that it is funny:

4

The Free Library of Philadelphia is so great. I’ve been continually impressed with how they are constantly improving with everything from a great digital collection to free memberships to Treehouse for people looking to learn to code.

Free Library of Philadelphia

5

While nothing really compares to seeing great artwork in person, when I find myself with no time to get out to museums but in need of inspiration I turn to the MOMA online collection. You can browse by department and time period, search, and see all kinds of interesting stuff that’s not on public display.

MOMA's online collection

6

My undying thanks to whoever introduced me to Mean Tweets. They completely crack me up, way more than they probably should. (NSFW)

7

Another hobby of mine that I don’t have much time for these days is sewing. I’ve been stockpiling patterns from Deer&Doe for when I can spend more time on my machine.

Deer&Doe sewing patterns

8

Last, back in design land, I really really love the Badass Lady Creatives site and blog, which introduces me to so many fantastic artists and other creative types. I have a thing for illustration, so I particularly love those features.

BA Lady Creatives screenshot


What’ve you been enjoying online lately? Any other funny videos I should check out?

Shopify Collections as Promotional Tools

Shopify Tip: How to Use Collections as Promotional Tools

Part of what I do over at Aeolidia (along with coding websites, of course) is site reviews, which involve digging deep into a client’s website from how it looks on the front end to the data underneath and writing up a thorough, researched report on how they’re doing and how they can move forward to their goals. It’s super nerdy strategy stuff, it’s time consuming, and I really love it.

For e-commerce sites, we tend to spend a lot of time looking at the “conversion funnel”, which is marketing/ e-commerce jargon for the steps that lead to sales. That flow starts with getting customers to your site and includes things like getting their eyes on many products.

One tip that I’ve given again and again via these site reviews and via general client education calls that I feel like a lot of store owners miss is that you can create as many collections (categories, in Shopify-speak) as you want, and they don’t all have to be exposed via your store navigation.

Collections in Shopify can be used for much more than your regular shop categories!

This seems super simple when I write it out. However, it’s an opportunity I see a lot of shop owners miss.

Many e-commerce shop owners work with collections (categories) only when they need to add something to their main navigation, for example if they’ve added a new product category to their inventory. That’s it – they stop there, and don’t use collections in any other ways. Perhaps they promote particular products via social media, but the collections stay relatively static.

As mentioned, one piece of that conversion funnel is getting customer eyes on more products. Linking to a single product, even if you’ve got related products on the page, isn’t exposing buyers to that many items. Same with seasonal promotions on social media that link to your shop home page or an existing (non-targeted) collection.

I was talking about this with a client earlier this spring, so I used the example of Easter. Amazon.com does this well at a much larger scale that would be completely insane for a small business, but that still serves as a proof of concept. See their Easter Shop as an example:

Amazon.com Easter Shop

Instead of linking a seasonal promotion to a specific example product or the whole shop home page, create a collection targeted to that promotion. You don’t need to get to literal about it, and you don’t have to add it your site navigation, but you can then link to that collection from your social media posts and/or your blog and expose your customers to all those products rather than just one or two.

For example, maybe you don’t sell anything specifically Easter-ish, but you have a lot of pastel and spring-y colors or designs. Create a collection of those, preferably consisting of items at a variety of price points.

The particular client I was talking to back in March had brought us on for the site review in part because she was feeling frustrated and tired and uninspired, feelings to which I think any small business owner can relate.

I told her to think of these “hidden” collections as another way to engage with her work and her product, a chance to “curate” (since that’s so popular these days) her own stuff and come up with new and interesting and fun combinations.

Use your shop collections to inspire customers and to show them things they might love but otherwise miss

It’s also an interesting way to see what customers are interested in by looking at which shared promotional collections (or “themes” or however you’re grouping them) get the most shares, the most visits, and the most conversions.

10 Examples of Promotional Themes

In case this is still feeling a little obscure, here are a 10 examples of other themes around which you could build temporary/ promotional collections:

  1. Holidays, both major and obscure
  2. Color or pattern themes
  3. Style themes (e.g. nautical)
  4. Seasonal trends (e.g. spring cleaning, back to school, birthstones)
  5. Shape themes (circular designs or fabrics)
  6. Price ranges
  7. Gift guides by personality or interest (e.g. gifts for the outdoors lover)
  8. Size (e.g. desktop items)
  9. Guides pulled together by professionals (e.g. designer guides, blogger guides, toys for kids picked by a teacher)
  10. Inspired by a particular thing (e.g. inspired by a photo, a place, or even a single object)

Of course the particular themes and collections would very much depend on the individual store and products, but hopefully this is a helpful starting point.

Using URL Hash to Load a jQuery Drop Down Already Open

I’ve written about how I create jQuery drop down content blocks, and it’s a technique I continue to use all the time (including on my own FAQ page). I’ve found it useful in my FAQ implementation to be able to link to a particular question and have it load the page with that answer open and visible, so in this post I’ll share the modified code that makes that happen.

Deep link to an open drop down content block

The implementation is made up of some HTML markup for the content, some CSS to style it all, and then a bit of jQuery to create the dropdown effect.

Markup

The markup for this FAQ block is like this (repeated for each Q&A pair):

<div class="faq-block" id="topic-slug">
    <h2 class="question">Question</h2>
    <div class="answer">Answer text here</div>
</div>

Each ID is unique, as is required in HTML, and the ID is also what gets added to the link to determine which answer is open on load. For example, if you head to my FAQ page with #hosting on the end, you’ll jump right to the FAQ block div with that ID, and it will display with the answer visible.

Try it if you’d like: http://zoerooney.com/about/faqs/#hosting

Styling

Per usual with these tutorials I’m not going to include all my styling code, but the main things you’ll want to keep in mind are to do with the hover effects. You’ll want to make sure your questions have a nice hover interaction, and you’ll probably want to give them cursor: pointer; so they look clickable.

Additionally, I’ve found that padding and margins inside the answer content can make the open/ close interaction look a little jumpy, so if you’re seeing that issue check your padding and dimensions.

Interactions

The script to make the dropdown interactions work uses jQuery, so you’ll need to make sure your theme or site is already loading jQuery or you’ll need to add it.

Then, here’s the script you’d add to the page:

<script>
jQuery(document).ready(function($){
    // Hide the answers using jQuery
    $('.answer').hide();

    // Open the answer if we've linked directly to a question
    if(window.location.hash) {
        var hash = window.location.hash;
        $('.faq-column').find(hash+' .answer').show();
    }
    // Toggle when clicking questions
    $('.question').click( function() {

        $(this).next().animate({

            // The combo of height and opacity gives a nice open-and-fade effect
            height: 'toggle',
            opacity: 'toggle',

        });
    });       
});
</script>

The only part of this that is different from the original tutorial is this bit:

// Open the answer if we've linked directly to a question
if( window.location.hash ) {
    var hash = window.location.hash;
    $('.faq-column').find(hash+' .answer').show();
}

This checks the window for a hash in the URL – if it finds one, then it assigns it to the variable hash.

Then, it finds the .answer block within the element with that ID (that’s a helpful thing about URL hashes – they are the same format as IDs so you can use them to select an element), and shows it.

The $('.faq-column') bit makes sure we’re just looking within that column on the page, the .find(hash+' .answer') bit finds the correct element with the hash as its ID and then finds the child answer within it. The .show(); bit shows the answer, negating the $('.answer').hide(); line from earlier in the script block.


I use this feature on my FAQ all the time since it lets me direct people who’ve asked me a question to the exact answer they need on the page (hosting is the most common one I use, I’d say).