Featuring Products with Different Images in Shopify

Somebody recently emailed me asking for suggestions on how to feature a collection or set of products in Shopify when the images to be displayed are NOT the same as the products’ main featured images. I thought I’d share how I’d think about this kind of feature in case it’s helpful for others as well.

Shopify: Feature Products with Special Images

The thing to know is that Shopify lets you upload as many images as you want per product. The first image (you can reorder them) is designated as the “featured image” and that’s the one you usually see in grid views or in featured product areas.

But, what if you want to show some products but you don’t want to use the featured image?

You could use theme settings for this for sure, using image and title and URL fields. That’s how I did it on Society Social, the example shown in the title image above. However, if you do it with a collection you get the title, price, sale status, etc., without having to enter all that info into settings fields.

So let’s assume we’re using a collection for this featured area. How do we pull from a non-featured-image?

The next thing I’d ask is whether the image you want to feature is completely different from the product images. What I mean is, should it not appear at all on the product detail page, or is it just not the first/ featured image?

The idea is to come up with a pattern that is repeated for every product that identifies the right image.

If the image should also appear on the product detail page (but not first), maybe you could have it always be last. Then, you could use {{ forloop.last }} to grab that in your feature area and also to omit it on the detail page. However, it only works if every product has a last image that shouldn’t be shown, which seems unlikely.

Another way to handle it if the image isn’t to show on the detail page would be to use the image alt and a keyword to identify the image to show in the feature block but not on the detail page. Then, in your loop through the product images you look for that keyword and use it to either only display that image (in the featured area) or exclude that image (on the detail page). This is untested but it would probably be something like:

{% for image in product.images %}
    {% if image.alt contains 'special feature' %}
        {{ image.src | product_img_url: 'medium' }}
    {% endif %}
{% endfor %}

That would show the image that contains the phrase “special feature” in the alt text. Or, to exclude it:

{% for image in product.images %}
    {% unless image.alt contains 'special feature' %}
        {{ image.src | product_img_url: 'medium' }}
    {% endunless %}
{% endfor %}

Personally, I think this alt method is probably what I’d go with, paired with a special collection just for the feature area (likely an automatic collection that feeds from a product tag).

7 Tips for Working with Online Product Photos

I’m over on the Aeolidia blog today with seven tips for product photos. The tips are not about how to take product photos, but about things like sizing, cropping and naming the files. Things you need to know after you take the photos and before you put them online.

product photography tips

The post is focused on Shopify store owners, but there’s probably something helpful in there for everyone, Shopify store or not.

READ IT

A Thank You & A Reading List

Thanks!

Thank you for being here! Thanks for reading my posts, and for finding some of what I write interesting enough to comment on and to share. After nearly a week of a nasty cold and mad preparations for the upcoming holidays, I cannot find the words to express how much all of that means to be me, so suffice it to say that it means a lot.

I’ll be spending some time away from the computer with my family over the holidays (and also sneaking in some quiet planning time and maybe prepping some blog posts for 2015), but I wanted to leave you with something useful in case you’re taking time over the holidays for reading and learning and building your skills.

Thus, here is my mega-reading list of all the sites and blogs I subscribe to via RSS (I use Feedly for this). I even snuck in a couple of podcasts at the end. I hope you find something interesting out of this batch and I’d love to hear which sites I should add for 2015 reading.

Mega RSS Reading List

Autism

Most of the blogs I subscribe to are design, development, business, or inspiration-related, but I do subscribe to one blog by the mother of a young girl with autism that I think everybody should read, called Rarer in Girls. Even if you don’t know anyone with autism, you should read it to get an idea of some of the challenges and the joys.

Business

My “business” category is made up of blogs and sites that write about running a business (marketing, productivity, etc.):

  • Buffer is a great product, but they also have a really popular blog on social media and marketing.
  • The Clientflow blog only has a handful of posts but they’re in-depth and interesting to read, on topics like making more money as a freelancer.
  • The Google Ventures Library is full of writing on all kinds of topics – I especially enjoy the leadership and design sections.
  • You might have to dig through some more corporate-facing stuff but there’s still a lot of great, relevant content for small business owners in the Harvard Business Review blogs.
  • MailChimp is always pretty inspiring, and their blog is great both for the content and as inspiration for a well-done business blog itself.
  • Hubspot’s Agency Post is a newer addition to my list – it’s focused on an agency perspective, but many of the articles are still interesting for us non-agency types, like this one on retainer pricing. I also have one eye on their marketing blog – marketing is not my favorite topic but their posts seem solid.
  • The Zapier blog has all kinds of great efficiency, productivity and worfklow tips – this recent post about how teams at Github, Treehouse, Automattic and Zapier communicate is on my saved list for future reference.
  • I might be a little biased because I work with Aeolidia, but the Aeolidia blog is a favorite for the small business stories and tips, and because the work the designers put out is just gorgeous.

Design

My design/ development categories are pretty rough, since there’s so much crossover. These are the blogs I threw into “design” when I first added them:

  • .Net Magazine is great, and so is their Creative Bloq blog all about creativity and web design/ development.
  • I’m pretty sure A List Apart doesn’t need any introduction amongst this crowd.
  • Badass Lady Creatives is all about creative ladies and their work.
  • Breanna of Rowan Made (one of the designers I work with) has a great design blog that touches on freelancing and other topics.
  • Lisa of Elembee writes about business, blogging, design, and websites (for a site owner/ designer audience, mostly, not too technical).
  • Graphic Design Blender has an annoying pop up but once you get past that there are some good articles about running your business and working with clients, along with design workflow tips.
  • Everyone went nuts over their recent post about scrolling/ the fold but the Huge blog has tons of other great stuff as well.
  • Invision is another company with a really great blog, mostly focused on design topics.
  • Love Grows Design Blog by Bethany Grow is another one with great tips and advice from someone building their own business.
  • Unfortunately, Method & Craft isn’t updated very often, but it has great Illustrator and Photoshop tips and tutorials.
  • Studio 404 has a design blog that also strays a bit into the business side of things (I’m noticing a trend in this category over overlap with business topics), with a fairly large focus on blogging tips.
  • One of the bigger blogs in the industry, Web Designer Depot has everything from monthly roundups to detailed tutorials, all at pretty consistent quality levels.
  • Usability Post is a good resource for articles (on design/ usability) that I might otherwise miss from other places on the internet, like this one on hollow icons vs filled icons.

Development

Again, there’s probably some crossover here (or just plain mis-categorization) with the design category. My dev picks:

  • While it’s only a seasonal resource, 24 Ways is worth the subscription for the quality content it provides leading up to Christmas.
  • Andy Budd’s blog is fairly new to me, but so far I’m finding it good reading on industry topics.
  • I’ve been enjoying the posts from ARWHD, like this one on the other parts of Sass.
  • CSS Tricks is another one that doesn’t need any introducing – if you’ve ever Googled anything web-related, you’ve probably found your way there.
  • You’ve probably heard of Dan Mall – his Businessology Show podcast is mentioned below and his blog is also great, with detailed posts about everything from performance budgets to getting the work you want.
  • Another new-to-me blog is Jens Oliver Meiert’s, but I’m making time soon to go through his archives since there’s a ton of good stuff in there on web development.
  • Codrops has lots of cutting edge, inspirational tutorials and demos.
  • Just so I don’t somehow miss something amongst all these other sources, there’s the CSS Weekly roundup of articles and posts.
  • Joshua Hibbert’s blog is one you should definitely click through to even if you subscribe – it’s really well designed and full of great HTML/ CSS tips.
  • Kronda writes some great stuff on the Karvel Digital blog, including a recent post I really enjoyed about her rules for people asking for coffee dates to talk shop.
  • Themeshaper is all about WordPress themes (designing them, reviewing them, building them, using them) from the Automattic theme team.
  • Konstantin Kovshenin is a WordPress developer who writes technical but accessible articles on topics mostly related to theme development.
  • Martin Wolf writes about HTML, CSS, jQuery, responsive web design, and a lot of other stuff.
  • You’ve probably heard of Smashing Magazine, it’s one of the bigger industry blogs with some of the best quality posts.
  • Sitepoint is another big one, helpfully divided into sections by topic.
  • I really like how Trent Walton writes, plus he has a lot of smart things to say about things like designing/ building across devices and typography for the web.

Ecommerce

I just started this e-commerce category in Feedly, mostly to keep tabs on topics that might be of interest to my Shopify clients:

Inspiration/ Misc

  • I try to keep up with the local tech scene at least a little bit, and the Technical.ly Philly blog helps me do that.
  • Miss Moss continues to be one of my favorite design/ inspiration blogs (it’s not really web/ graphic design focused, more general, which is why it falls into this general category). Diana has a wonderful aesthetic, finds amazing stuff to feature, and is also a nice person.
  • For Print Only is eye candy all around, especially if you’re into typography.
  • Little Big Details shares smart/ fun tiny but high-impact details from various websites and apps.
  • Another typography-lovers dream is Ministry of Type, which also has other more general inspiration.
  • I no longer have a handmade business, but Oh My Handmade is still a fun read for the community and to pick up tips that might benefit my clients.
  • The Pastry Box Project has all kinds of thoughts from interesting people in the web industry. Really, all kinds.

Podcasts

I really struggle to make time for podcasts (I can’t listen to them while coding or handling email), but I try to keep up on these ones:

  • Apply Filters is a great WordPress-focused podcast for developers. Recent topics include unit testing and shifting from developer to developer-plus-business-owner (or maybe even just business-owner-managing-developers, if that’s your thing).
  • The Businessology Show is all about running a design (or dev) business, with episode trajectories on things like client onboarding and pricing.
  • ShopTalk is all about web design and development. My favorite episodes are the rapidfires (all Q&A), but they also have some great guests on other episodes.

Good for you, making it to the end of that list! Your turn – what should I start reading in 2015?

Industry Tips for Responsible Code

I recently was introduced to a new (I think) site called Code Responsibly via a comment on my post about the importance of soft skills for developers and I think it merits its own post.

Code Responsibly is a simple but powerful project with 10 tips from some really smart people in the industry (but, refreshingly, not all the “rock star” names you see all over the place) with the goal of helping developers avoid “reckless code.”

tips from Code Responsibly

I especially love how the tips focus not on which language is best but on general things we can all always stand to improve on, no matter where we are career-trajectory-wise. The two tips shown above are major areas I want to focus on in 2015 (along with learning and quality which also appear on the list and are baselines for my practice).

CHECK IT OUT

On Naming Media Queries & Abstraction

Yesterday there was some conversation on Twitter about naming media queries using variables, sparked by this tweet from Brad Frost:

At first I read that tweet and thought to myself, “I think I might disagree…” I know that those words are a little tricky because the person using the site at “mobile” width could very well not be on a mobile device, but I’ve used them myself in some cases because they’re still fairly general and easy to remember. Better than “iphone 5, “iphone 6s, “13 inch macbook pro” as another person jokingly suggested.

I skimmed through the replies to that tweet and saw various tweets from people who use name their media query variables after TV show characters or colors and thought to myself, “I ABSOLUTELY DISAGREE!”

Then, I noticed that Brad’s response when Alex Carpenter asked him what he suggests instead:

I calmed back down at that point because, upon pondering a bit further, I think I actually do agree with Brad.

I can absolutely see why it’s probably not a good idea to bring context into media query variables – since the context is really pretty distinct from the width these days it’s a false association. However, I think it’s worse to abstract too far and come up with variables that are memorable to you but will be confusing as heck to other people who may encounter your code down the line (or who don’t appreciate the same pop culture references).

Moving forward, I think I’m going to try to stick to neutral terms like those Brad suggested in his second tweet, maybe using something like t-shirt sizes as suggested by one or two other people: xs, s, m, l, xl. That feels like a good level of abstraction without taking it too far.

I’m curious, though – for those of you who use media query variables, what do you use? What do you think about super abstracted/ personalized variables?