Hey Shopify devs,
It is great to see you again in a new episode of the Shopify Weekly newsletter, which is released every Sunday to Shopify developers. How was your week? The weather in my country is getting hotter, but it is nothing compared to the excitement surrounding the introduction of the Hydrogen July 2024 version, which includes numerous significant upgrades. We also have some new tips and tricks from other bloggers, so come explore with me now!
1. Latest API and Shopify-related updates
This week, Shopify has a few API changes. You can check out the list of updates below:
- 3d models and videos are now hosted behind store URLs
- Metafield support for the cartTransformCreate mutation
- Achievements section removal from App > Distribution page in partner dashboard
- Fulfillment Order Release Hold mutation error codes deprecated
2. Website optimization: How to speed up a mobile site?
This Shopify's article talks about mobile site speed optimization, a critical aspect of e-commerce success. It discusses the importance of a fast mobile site for user experience and SEO, emphasizing how it can impact conversion rates and search engine ranking. The article outlines various methods to improve mobile site speed, including optimizing images, minifying code, and using a content delivery network (CDN). It also highlights the importance of testing mobile site speed regularly and using tools like Google PageSpeed Insights to identify areas for improvement.
3. Hydrogen July 2024 release
Shopify Hydrogen's July 2024 release brings a suite of enhancements focused on performance and developer experience. The introduction of React Server Components (RSCs) allows components to render on the server, significantly improving initial load times and SEO. The addition of streaming and suspense capabilities ensures a smoother user experience by progressively rendering content as data loads. Developer tooling has been improved to streamline debugging and troubleshooting. A key highlight is the useOptimisticVariant hook, which enables instant variant switching, enhancing product interaction. Additional updates include improved SEO configurations, support for the 2024-07 Storefront API, and an upgrade to Remix 2.10.0.
4. Remix js: What is Fog of War?
Remix introduces a new feature named Fog of War. This article examines how Remix might improve performance in huge applications. Fog of War operates by loading just the routes that are currently visible to the user. This decreases the app's initial load time. As the user moves around the program, further routes are identified and added to the route tree. This way, the user experience is not affected.
5. Shopify Flex Sections (dev preview store)
Chris's video talks about Shopify Flex Sections, a new feature that will be released soon. It will introduce two major changes: theme blocks and style settings. Theme blocks will allow developers to create more modular and reusable sections for themes. Style settings will allow users to customize the appearance of these sections without needing to edit code.
I believe that this will be a major shift in how themes are built, similar to the introduction of Online Store 2.0. I am excited about this new feature and believe that it has the potential to make Shopify themes more flexible and easier to use.
6. CSS-only custom range slider with motion
This article describes how to create visually stunning and engaging custom range sliders with only CSS. Traditionally, developers would rely on JavaScript for such elements. However, Bramus demonstrates how CSS alone can achieve these effects, making for more lightweight and performant sliders.
I think this blog post is a valuable resource for front-end developers seeking to improve their CSS skills and create engaging interactive elements without relying on JavaScript.
7. How to switch from a Three-Page to a One-Page checkout? (no coding)
This short tutorial video shows you how to adjust the checkout page's display step by step. It's easy to follow. Thank you, Nick
8. Learn about asynchronous in JavaScript.
This is a free course on asynchronous JavaScript. The course covers the basics of asynchronous programming to the advanced use of promises and the Fetch API. By the end of the course, you'll be equipped with the knowledge and skills to handle asynchronous operations in JavaScript confidently. Important points include: understanding synchronous vs asynchronous programming, using callbacks, promises, async/await, and the Fetch API.
9. How to add Variant Swatches to the product card on collection page?
This tutorial video from The Prompted channel is compatible with Dawn version 15 and other free Shopify themes like Refresh, Sense, Origin, and others. The video also mentions that there was a previous version compatible with Dawn version 14.
In the video, he mentions that adding collection page swatches can increase conversion rates. By showing swatches on the collection page, customers can see the different variations of a product without having to click on each product. Let us go explore!
Thank for reading,
Thanks for tuning into another exciting episode of Shopify Weekly!
Have questions or thoughts about Hydrogen's latest release? Want to share your own experiences or tips? Drop a comment below – I love hearing from you!
Until next time, happy coding!