Hello! My name is Ogasawara, CTO at Tsun Inc.
Recently, I often develop Shopify apps and themes.
When I look at Shopify Dev references and Shopify's GitHub repositories, I always feel that there is too much information!
(There are more than 840 Shopify GitHub repositories alone.)
In this article, we carefully select from the developer tools released each week and introduce tools and features that look useful or did not exist before ♪
Please use them in your development work!
If you want to check the latest information, please follow our Instagram account and check out "Shopify Dev Weekly"!
→ https://www.instagram.com/tsun.ec/?hl=ja
July 2022 issue vol.1 - Catch up now! Introducing all the developer features announced in Shopify Editions!
Shopify Functions
- Customizable backend logic
- Features still in development, available on all plans
- Checkout customization will be opened first, and other areas are expected to become customizable later.
Checkout Extensibility
- Checkout extension app can be developed
- Scheduled to be available from the end of September
- Provides seamless integration with checkout UI and Shop Pay
Pre-order sales and deferred payment
- Pre-order sales and deferred payment added to Selling Plans API
- Now supports new sales plans such as pre-orders and “try before you buy”
ShopifyQL
- Introducing the ShopifyQL API for analyzing store data
- You can use ShopifyQL to analyze sales etc. in detail from the traditional GraphQL Admin API.
Embedded App improvements
- You can insert your app's menu as a submenu in Shopify
- App Bridge mobile features double loading speed on mobile devices
Data protection
- Hiding personal information by default when obtaining data from API
- Handling personal information within the app will be safer
Hydrogen + Oxygen
- React-based framework developed by Shopify for Shopify
- Fast and headless storefront development
- Oxygen is a fast hosting service
Pixels
- Pixel publishing to collect behavioral data
- Still in beta version. Available when Checkout Extensibility is enabled
Liquid reference update
- Liquid reference has been significantly updated
- Ability to prototype within the document
- https://shopify.dev/api/liquid
App-Owned Metafields
- You can create a data storage area that can only be accessed by the app.
June 30, 2022 - Introducing all the notable features announced in Shopify Editions that you should know about now!
This week's topic is
“Introducing all the notable features announced in Shopify Editions that you should know about right now!”
is.
Hydrogen + Oxygen
- React-based framework for Shopify, by Shopify
- Accelerate store display speed
Dovetale by Shopify
- All-in-one creator management tool
- For stores that want to do influencer marketing
- Japanese language support etc. is not yet available.
Shopify Markets
- Functions for overseas sales (cross-border EC)
- Currency conversion, language support, domain optimization, duties collection, and more are available
Shop Pay enhancements
"Buy now, pay later" (BNPL) and fraud prevention features added!
*What is Shop Pay?
A payment method introduced in 2017 as a payment method for Shopify stores and has since been used by over 40 million users.
customer engagement tools
- Shopify Email: Create emails that reflect your brand, automate emails
- Shopify Inbox: Chat feature
Metafields
- You can now add meta fields to customer, order data, etc.
- Metafield content can now be displayed in POS product descriptions.
Shopify Admin enhancements
- Redesigned app operation menu
- More than 50 records can be changed at once
- More flexible permission management for staff and partners
Shopify Audiences
- Find future customers by leveraging Shopify's analytical power and merchant network
- Not supported in Japan
- Shopify Plus exclusive
Linkpop
- You can introduce SNS and store links in one place.
- Check out https://linkpop.com/tsun!
Twitter Shopping
- You can sell products directly on your Twitter profile!
- Not supported in Japan
June 23, 2022 - Shopify Hydrogen is finally officially released! Oxygen details also revealed
This week's topic is
"Shopify Hydrogen is finally officially released! Details of Oxygen also revealed"
is.
What is Hydrogen?
A React-based framework developed by Shopify for Shopify that lets you build fast, headless storefronts.
It was in developer preview when it was announced at Shopify Unite 2021, but it was finally officially released on June 21, 2022!
Official release Q&A
Q. Since it is an official release, is it safe to use it for production purposes?
A. I think it's okay. It seems that American shoe store Allbirds already has some of its shoes compatible with Hydrogen.
Q. Can it be used in all stores?
A. Yes, you can! (However, implementation is required)
What is Oxygen?
The hosting service developed by Shopify for Hydrogen lets you deploy storefronts built with Hydrogen with one click.
The existence of Hydrogen was often hinted at in the explanation, but it was finally released on June 21, 2022!
Oxygen Q&A
Q. In what cases should it be used?
A. I think sites that use Hydrogen should basically use Oxygen.
Q. Can it be used in all stores?
A. Currently it is only available on Shopify Plus, but it looks like it will be available on all plans in the future.
This week's summary
This week we introduced information on the official release of Hydrogen and the finally revealed Oxygen!
I want to know more about Hydrogen and Oxygen! If so, I will explain it in more detail next time, so please follow me!
https://www.instagram.com/tsun.ec/?hl=ja
June 16, 2022 - Shopify goes super fast! What is the official framework Hydrogen?
This week's topic is
“Shopify is getting super fast! What is the official framework Hydrogen?”
is.
What is Hydrogen?
Shopify is developing a next-generation storefront framework
Key points
- Framework made by React (uses many features of v18)
- Just super fast 🚀 (store and development setup)
- Official release yet (July?)
Benefits of Hydrogen
- Build modern development configurations locally with a single command
- Easy to use mechanisms for displaying pages at high speed (Streaming SSR, cache control, etc.)
- Contains components necessary for building a store
Disadvantages of Hydrogen
- Building a store is difficult unless you are an engineer with experience in modern front-end development.
- Because it uses a lot of not-yet-mature technologies, you constantly need to update your knowledge.
What kind of store do you recommend?
If you already have a custom storefront and are unhappy with how fast your store is loading, Hydrogen is well worth the switch.
Also, when building a custom storefront from now on, Hydrogen should be considered as your first choice.
(Already worth it)
I want to try Hydrogen!
If you think so, please https://hydrogen.new/ Please visit!
You can experience development using Hydrogen in your browser without having to build a local development environment.
This week's summary
This week we provided a rough overview of Hydrogen.
From next time onwards, I would like to explain keywords related to Hydrogen that you should keep in mind and why you can display pages at lightning speed.
If you are interested, please follow us!
https://www.instagram.com/tsun.ec/?hl=ja
June 9, 2022 - Shopify’s Dawn theme v6.0.0 has been released!
This week's topic is
- Shopify’s Dawn theme v6.0.0 has been released!
- Other update information
There are two topics.
Dawn v5.0.0 was released in April, but v6.0.0 has already been released!
The main changes are as follows.
- Added cart drawer feature
- Added customization options for rich section text
- Added top and bottom padding configuration options to header section
What is the cart drawer feature?
When you add an item to your cart,
- ・Display the cart drawer (the cart list will appear from the right side of the page)
- - Notify with a popup (display a popup below the cart button in the header)
- ・Link directly to the cart page
A new cart behavior setting that allows you to select.
How to set up the cart drawer feature
From the theme editor, select Theme settings > Cart.
A cart type selection field has been added, so all you have to do is select the desired behavior!
Other updates
polaris
v9.12.0、v9.12.1、v9.12.2
Update not recommended as all CSS animations no longer work
shopify-cli
v2.18.1
Minor update
hydrogen
v0.23.0
It's a minor update, but there are breaking changes, so be careful when updating.
June 2, 2022 - Shopify's official Liquid formatter released this week!
This week's topic is
- Shopify's official Liquid formatter released this week!
- Other update information
There are two topics.
VS Code users rejoice! You can format Liquid with the Shopify Liquid plugin!
Key points
- Added the ability to format Liquid to the Shopify Liquid extension
- However, it is still in Developer Preview so there may be some bugs.
- Feels better than another Liquid plugin!
How to use the format function
- Updated Shopify Liquid plugin (currently latest version is v1.4.3)
- Add the following to settings.json
That's all! It's easy 😄
All you have to do is add formatOnSave etc. as you like and execute the format!
Impressions of using the format
Until now, I had been formatting using another Liquid plugin.
There was a problem with formatting multi-line tags using liquid tags, but with this Shopify Liquid plugin, you can format them beautifully!
It's not officially released yet, but it's definitely worth a try!
Other updates
polaris
v9.9.0、v9.10.0、v9.11.0
Mainly minor changes
shopify-cli
v2.18.0
Fixed a bug where Heroku deployment fails on M1 Mac, etc.
stylelint-polaris
v0.0.0 (pre-release)
