[Shopify]注文に日時指定、ギフトラッピングなどの追加情報データをのせる方法

This time, we will introduce a method to put additional data on order information.

Generally, it is also called cart.attributes, and it is possible to put additional data on the order information of the order management by setting it on the cart screen. Generally, cart attributes include information such as desired delivery date, gift wrapping, and message card information. (However, there are no restrictions on the information itself, so you can include a wide variety of data depending on your Shopify store.)

Where exactly is the information added?

Let's first look at where the cart.attributes you set up on the cart screen will appear on the actual order.

The first place it will appear is at the bottom of the

The following is an example. (the part in the pink frame)

The contents in the pink frame above are

• Title → (Date and time specified)
• Value → (2021-09-01)

The title and value are set in the form of

The above example shows the addition of the date and time information to the order screen. As already mentioned, cart.attributes is a very useful feature because it allows a wide variety of information to be added to an order, such as gift wrapping information, message card information, noshi information, and receipt information.

By the way, if you are interested in how to implement gift wrapping, please refer to the following article.

How to add and implement gift wrapping to the [Shopify] cart screen

How to add cart attributes

cart attributes are so useful! Now that we know this, let's move on to the implementation.

As the name suggests, cart.attributes is to be embedded in the cart screen. The specific code for the cart attribute for "date and time" introduced earlier is as follows.

<p class="cart-attribute__field">
<label for="">Date and time specification</label>
<input id="" type="text" name="attributes[date/time specification]" value date/time="{{cart.attributes["date/time specified"] }}">
</p>

Place this code inside the cart.liquid or cart-template.liquid where the cart submit form is located.

If it is an HTML tag

<form action="/cart" method="post"
novalidate> (include cart attributes in this)
</form>

.

Inside the form tag, like this

Depending on the theme, you may need to use

{% form %}

The tag may be a liquid tag, as in the following example.

By the way, the following site is well known as a way to create cart attributes, so please take advantage of it.

https://ui-elements-generator.myshopify.com/pages/cart-attribute

Select the title and input tag format in Set your form fields in the pink frame. The code will then be output in the Grab your code section at the bottom.

Just embed the code in the form on the cart page and you are done.

[Shopify] How to add additional data to order information Summary

The above is how to put additional data on the order information using cart attributes.

Cart attributes are very useful and are always used when building a store or editing a theme. If you would like to add additional data to an order, but are not sure how to do so, we would be happy to help.

Well, thank you for reading to the end! Have a great day!