"RuffRuff 予約販売" supports the reduction of opportunity losses that occur when products are out of stock, new products are not on sale, or are on backorder.
It's incredibly easy to create pre-orders on your Shopify store, allowing you to register an unlimited number of pre-order products and accept unlimited pre-orders. You can also restrict people from ordering pre-order items and regular items at the same time, or send notifications when the item will be back in stock if it is not yet determined.
There are many unique features that are not found in other pre-order sales apps, such as the "Pay Later" feature that allows you to collect payment before the product is shipped.
My name is Ogasawara and I am the CTO of Tsun Co., Ltd.!
Recently, I've been mainly working on Shopify app and theme development.
This blog shares information useful for Shopify development.
I would be happy if this would be helpful for Shopify engineers!
The article below explains in detail the advantages and disadvantages of Shopify, and how to get started, so please refer to it.
What is Shopify? Advantages and disadvantages of Shopify | Thorough explanation of Shopify
Why do this?
A commonly used app when building stores with Shopify is the official app called Order Printer.
Templates are provided in advance, but creating original templates from scratch is quite a lot of work, so I would like to introduce a method that lets you create them more efficiently.
What you created
A VS Code development environment that provides the following
- Live preview of the template (you can immediately see the results of your code changes)
- Liquid formatting and autocomplete
Prerequisites
Target audience
- Order Printer users
- Have basic knowledge of Liquid
- VS Code users
What to prepare
- Latest version of VS Code (Version: 1.67.2 at time of writing)
How to create
Live Preview of the template
First, we will enable Live Preview for templates, which is the main feature this time.
All you need to do is install two extensions.
First, install the VS Code extension Shopify Liquid Preview.
This extension allows you to instantly preview Liquid code converted to HTML.
When creating an Order Printer template, you probably use a liquid variable, but it is also possible to reflect the value of the liquid variable in the preview.
The way to do it is to create JSON that corresponds to the Liquid file and specify it when previewing, and the Liquid variable will be reflected.
As is, you cannot tell the actual size or position of characters when printing, so we recommend using the extension HTML Preview.
With HTML Preview, you can preview how the HTML appears, so you can instantly check how your Liquid changes will look, as shown below!
Liquid formatting and autocomplete
Live Preview alone is enough to increase development efficiency, but let's also enable formatting and autocomplete!
Liquid There is an extension called, so let's install it.
This is all you need to be able to highlight, format, and autocomplete your Liquid files.
There was a formatting problem when using multiple lines (liquid tag), but other than that it worked without any problems.
I think it would be a good idea to use this extension to adjust the format when creating a template for Order Printer.
Summary
This time, I introduced the environment for developing templates for the Order Printer app.
It's easier to work like this! If you have any, please let me know in the comments!
At Tsun Inc., we also support custom templates such as order forms using Order Printer.
If you would like to create your own order form or slip, please contact Tsun Inc.
