![Paul Boag Shares a Favorite Ecommerce Project]()
![feature]()
In Part 1 of my interview with Paul Boag, we discussed the importance of making a name for yourself in the web industry. Content marketing has played a key part in his own success and that of the agency he co-founded, Headscape.
Of course, getting the “gig” is only the first hurdle – you have to deliver good work too. In this excerpt, I ask Paul about his experiences working on ecommerce projects. What follows is an illuminating and unusual insight into an ecommerce site catering for a demographic where the typical user is over 60.
Continue reading
![Paul Boag on Content Marketing & How to Start Your Blog]()
![feature]()
Paul Boag has been working on the web since 1994. He was one of the original founders of Headscape, a UK digital agency, and is a well-known and respected author, blogger and conference speaker. He’s also co-host of the long running, and perhaps the original, web design and business-focused podcast BoagWorld.
In this interview with Keir Whitaker, Paul shares why content marketing is here to stay, tips on improving your writing process, and why you should get comfortable with public speaking.
Continue reading
![10 Bookmark-Worthy Websites for Free Stock Photography]()
![feature]()
We’ll be the first to say that having visually stunning images is one of the most important factors for any web design project, especially ecommerce stores. We are also the first to appreciate how hard it is for web designers to get high-quality photography from their clients without having to take the photos themselves.
Therefore, having a number of “go-to” royalty-free photo sites on hand is always helpful. Whether you need a great product image to showcase your design, inspiration to brighten up your day, or a background for your latest project, here are 10 free stock photography websites worth a visit.
Continue reading
![15 Chrome Extensions That Will Make You a More Productive Web Designer]()
![15 Chrome Extensions: Email]()
Google Chrome is much more than a browser – its web store now contains thousands of extensions and apps that can help you and your browser achieve new levels of productivity.
We've curated our 15 favorite Chrome extensions for web designers, developers, and content editors. Take a look!
Continue reading
![4 Conferences You Should Attend]()
![feature]()
As we stride headlong into the summer months it’s time to take a breath and gear ourselves up for the upcoming spring(fall)/winter conference season. There’s a lot to look forward to.
As part of my role as Shopify Design Advocate, I have been lucky enough to attend a number of great events in 2014 including An Event Apart in Seattle (where we debuted our new Mike Kus designed t-shirts), Smashing Conf in the beautiful UK city of Oxford and of course Beyond Tellerrand in Dusseldorf Germany. All three were packed full of great sessions and many opportunities to meet new people and chat with Shopify users new and old.
We’ll be setting up shop at a number of events from late August onwards. Here’s my roundup of some events that you may wish to consider for the second half of 2014.
Continue reading
![[Free Course] 10x Your Shopify Theme Development Skills with These Free Courses]()
![free-course-10x-your-shopify-theme-development-skills-with-these-free-courses]()
There's a lot to consider when it comes to building and launching a successful Shopify store. In this article, we look at four resources you can use to develop and grow your Shopify theme development knowledge.
Continue reading
![An Overview of Liquid: Shopify's Templating Language]()
![An Overview of Liquid: Email]()
If you're new to the Shopify platform, you might be wondering about Liquid.
In this article, we'll explain all you need to know about Liquid, how it fits into Shopify theme building, and the core concepts that will enable you to start building powerful and immersive ecommerce templates.
Continue reading
![Build Your Ecommerce Business: Livestream]()
Ross Beyeler built a successful ecommerce-focused web design business from the ground up — and he's willing to share the secrets of how he did it.
In an upcoming General Assembly livestream,
Ross Beyeler — founder of the Boston-based ecommerce web agency Growth Spark — will share his experiences building a successful web agency focused on ecommerce and the Shopify platform. Learn how to get started or grow your business from a technical and business perspective in our first ever Shopify Partners livestream event.
Continue reading
![Check Out This Free Ecommerce Training Business Course on Skillshare]()
![The Business of Web Design: How to Grow your Ecommerce Web Design Business]()
We’ve teamed up with renowned digital strategist Paul Boag to bring you a new, free Skillshare course about how to run a successful ecommerce-focused web design business.
Continue reading
![Creating Useful CSS Hooks in Liquid]()
![Creating useful CSS hooks in Liquid]()
Many of us use the <body> class for CSS and JavaScript hooks and just like in WordPress it’s pretty easy to add a number of useful classes to our <body> element in Shopify.
Here are a few ideas that you might find useful placing in your main (or alternate) layout file:
Add the currently rendered template name to the body class
<body class="{{ template | handleize }}">
In this example, we are using template to return the name of the currently used template. Some examples of this are:
<body class="index">
<body class="product">
<body class="collection">
This can be really useful when you need to target a specific alternate template for example.
Add the currently rendered product handle to the body class
Building on this we may wish to add the current product handle to our body class. To keep things neat and tidy we can use an if statement to conditionally add the product handle only when we are viewing a product:
<body class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">
Note how I include the space before the {{ product.handle }} output tag.
If you are using alternate product templates you may wish to use the contains operator instead:
<body class="{{ template }}{% if template contains "product" %} {{ product.handle }}{% endif %}">
Add the current page title to the body class
Some themes also add the current page title to the body element in the form of an id, building on the above our code would now look as follows:
<body id="{{ page_title | handleize }}" class={{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">
Note in this example we are using the Liquid filter handleize to ensure that the id or class that we add is URL safe and therefore easy to reference in our CSS and JS files. For example, it will turn a page title of “Blue Jeans” into “blue-jeans”.
Add the currently viewed collection’s name to the body class
For good measure, we could even add in a check for collections and add that too:
<body id="{{ page_title | handleize }}" class={{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">
It’s pretty easy to adjust this logic for your own purposes. Again you may wish to use the contains operator if you are utilising alternate templates.
Summary
Hopefully you’ve seen how flexible Liquid is in the above examples. Being able to add a variety of classes to the <body> element gives us useful hooks that we can use in CSS and JavaScript.
Continue reading
![[Free Course] 10x Your Shopify Theme Development Skills with These Free Courses](http://cdn.shopify.com/s/files/1/0533/2089/files/annie-spratt-608002-unsplash_1_17675c3e-48ae-46c5-bfc2-dac7213ee7cd_large.jpg?v=1549290091)
