Vol.6 - Essential Browser Extensions for web developer

Hello Shopify Developers,

Welcome to this week's episode of Shopify Weekly! In this issue, we explore must-have browser extensions to boost your web development efficiency, delve into storing Shopify form submissions using metaobjects, and share tips for crafting effective technical documentation for your Shopify app. Plus, don't miss the crucial update on transitioning from Google reCAPTCHA to hCaptcha. Dive in and enhance your Shopify development journey with these valuable insights!

1. Latest API and Shopify-related updates

This week, Shopify announced several updates impacting Shopify Forms, Cart Ajax API, and app categories, along with other changes that may affect your app development. Here’s a quick recap:

Stay tuned for more updates and insights!

2. How to display a unique description for each variant?

In this Prompted's video, the speaker said that some merchants was facing a issue with the product description., you wouldn't be able to change your product descriptions no matter how many variants you have. This could be a problem because customers might not see the information they need to make a purchase. By adding dynamic descriptions, you can change the description to be specific to each variant. For example, you could include information about the size or material of the product.

The speaker also mentions that there are a few different ways to set up dynamic descriptions. You can use a rich text field or a page. A rich text field allows you to format the text however you want, while a page allows you to include more complex content, such as images and videos. Let explore how to do it!

3. You should know these 7 CSS responsive sizing features

This video covers 7 different CSS properties that will help you achieve responsive design. The properties covered in the video are fit content, min-content, max-content, auto, minmax, and clamp. I think this is a great resource for anyone who wants to learn more about CSS responsive sizing features. By understanding these properties, you can create websites that look good on all devices.

4. A presentation on Vanilla React at React Conf 2024

This talk is about vanilla React, React Router, and Remix. The speaker, Ryan Florence, who is one of the creators of React Router, discusses the history of React Router and its future. He also talks about the challenges of maintaining a large codebase written in vanilla React and how Remix can help.

Overall, the talk is about the challenges of maintaining legacy React applications and how new tools like Remix can help. The speaker also discusses the future of React Router and how it will continue to evolve alongside React.

If you're interested, you can watch the full React Conf 2024 event here.

5. Essential browser extensions for web developers

The next article about browser extensions for web developers. It discusses what browser extensions are and why they are useful for web developers.

The article also lists 20 specific browser extensions and describes what each one does. Some of the extensions help developers get information from other websites, such as color codes and fonts. Other extensions help developers test and debug their own websites. Still others help developers with productivity.

Personally, I find the JSON Formatter and Fake Filler extensions incredibly beneficial for my tasks.

👉 Check out the full article here

6. Migration from Google reCAPTCHA to hCaptcha

This is a Shopify's plan about migrating to hCaptcha on Storefronts. This changelog discussed how to implementation on Storefronts from Google reCAPTCHA to hCaptcha. This is being done to reduce form abuse. As Shopify talk, the rollout is ongoing and will be implemented in cohorts. No action is required by the user unless they are notified otherwise.

👉 Check out the changelog here

7. How to set up Google Analytics 4 on Shopify & track sales

The last video is about how to set up Google Analytics 4 (GA4) on Shopify store and track sales step by step. Once you have completed, you will need to connect your Google Analytics account and test the data that is being collected by GA4. You can do this by adding a test order to your Shopify store.

By following steps in this video, you will be able to set up GA4 on Shopify store and track sales. This data can be used to improve merchant's marketing campaigns and increase their sales.

8. Tips for creating effective documentation for tour Shopify app?

This article focuses on creating effective technical documentation for Shopify app development. It highlights the importance of clear documentation for both developers and users, offering steps to structure your documentation effectively. Key points include targeting your audience, using clear and concise language, and incorporating visuals. The article also emphasizes the need to keep documentation up-to-date to ensure accuracy and usefulness.

👉 Check out the full article here

9. Shopify theme development with Alpinejs + Tailwind CSS

This series is designed for viewers of all experience levels who want to create a custom Shopify theme from scratch. Raaj guides viewers through powerful tools such as Tailwind CSS, Alpine.js, and JavaScript. The series breaks down each step, including setting up a Shopify store, customizing the theme, styling with Tailwind CSS, adding interactivity with Alpine.js, making the site dynamic with JavaScript, and deploying the finished theme.

👉 Check out the full playlist here

Thanks for reading,

I hope you found these resources valuable for your Shopify development journey. Remember, staying informed is key to thriving in the ever-evolving world of ecommerce. If you have any question, feel free to let me know in the comments below! I'd love to hear about your experiences and insights.

If you enjoyed this post, please consider sharing it with your fellow Shopify developers. Together, we can build a stronger community and create amazing shopping experiences for customers worldwide.

Chien's corner

Contact me