Hi everyone, hope you’re all super busy right now processing BFCM and pre-Christmas orders!
If you have any questions related to sales, discounts, or displaying promotions, let me know!
Here are the highlights from November:
- 4 new videos from me
- Shopify updates to checkout and filters
- The fastest Shopify themes, tested & ranked
- Poll: which sections should I build?
📹 Hiding empty elements with CSS
This is the sequel to a similar video from October about hiding sections/blocks that use a metafield, but the metafield is empty.
In that video, we check the metafield value with Shopify Liquid, but in many cases, you still need to target the empty element somehow to hide it with CSS.
So this time I show you how to use CSS to check if the container <div> or other elements are empty or don’t exist. You can use this method without Liquid and even on other non-Shopify sites.
I have to admit, I was tired when recording so the intro is boring 😅 and the video isn’t getting lots of views. But it is definitely a topic worth learning and a useful skill. There is also a supporting blog post if you prefer reading.
📹 Displaying savings amounts
It’s pretty easy to add these labels saying “You saved $20” or “20% off” on your product page.
It’s a quick tutorial, you only need the custom liquid block, and you can copy & paste the code from the supporting blog post.
📹 Adding subtitles to product cards in the collection page (Dawn)
A common requirement for many stores is showing extra info about each product on the collection page, besides just the title and price.
It could be a subtitle or it could be some measurements or specs. Either way, it’s usually stored in a simple text metafield. Displaying this isn’t hard, it’s mostly a matter of finding exactly where in your code to put it, and adjusting styling.
📹 Bulk assign product templates
A few different ways to assign a template to hundreds of products across your store.
📢 Shopify updates
Choose between one-page and three-page checkout
When one-page checkout was launched, it was forced on (almost) everyone. However, some stores are having trouble with it, and reporting decreased conversion rates.
So if you don’t like the new one-page checkout you can switch back to the old one. Just visit Settings → Checkout.
Support for visual filters
Using the Search & Discovery app, you can now add colours and images to the filter options. This is great for showing colors, textures, or custom icons.
Previously this was handled by the theme, so it was difficult to set up and it would be lost when you change themes. This is a more native admin-side setup that should be much easier to use.
I think I will make a full tutorial for this soon, for now you can find instructions in the Shopify docs.
As usual, you can check the Shopify Changelog to see more updates.
⚡ The fastest Shopify themes
Did you know Shopify has a performance team that publishes articles and research on how to speed up your theme? They recently published the data they got from testing the top 100 most popular Shopify themes.
The various scores (LCP, FID, CLS, CWVs) are things Google tests for when ranking your site. You can also see these in Google’s testing tools like PageSpeed Insights (which Shopify’s built-in speed rating is also based on).
You can find the Theme Performance Table here, but here it is in a more usable format, ordered by average score in a spreadsheet (thanks to Coralie @nomad_maker).
Any surprises? Some of the most popular themes are actually pretty slow. But maybe that’s because they are packed with features.
Keep in mind that how you design your theme (e.g. how much media and apps you have on the page) affects the speed a lot. So don’t go switching themes just because of this data.
If you want to understand the tests more here is their blog post.
🌐 New Top Tools page on my website
Sometimes people ask about my favourite themes, or to recommend an SEO app, etc… so I built a page to list all these in a scannable way.
Now If you’re curious about which apps I recommend for X category, you can visit ed.codes/tools and check. I will be updating the page regularly.
💬 Which Sections/Blocks do you need most?
I want to add to my Code Shop on Gumroad. Just to recap, so far I only have a few items for sale:
- Tabbed Content Section
- Related Products Block
- Full-width Product Description
- Plus some smaller snippets
New sections will be compatible with all themes (not just Dawn), and as usual in the $20 - $30 range.
Please vote below or make a suggestion, thanks!
Reading online? You can find the Poll here.
If you found this newsletter useful, share it with others by forwarding this email.
If you were forwarded this: Subscribe to the newsletter and also check out my Youtube channel.
Cheers,
Ed