shopify開発の三種の神器ってご存じですか？公式ブログにも記載があるし、公式ブログにしては初心者にもわかりやすい解説だと思います。 今回はその三種の神器の１つ「Cart arributes」について開発初心者向けの解説をします。 こんな点を解説していきます。 Cart attributeって何？ まぁ、まずはここですよね。そもそもなんだよこれ？って話ですよね。 Cart attributeは早い話が「カートページに追加するinputフィールド」の事です。まぁ、まずは下の画像を見比べてくださいな。 まずはbefore。Debutテンプレートの標準カートページです。 続きましてafter。Cart attributesでinputフィールドを足した同じDebutテンプレートのカートページです。 見比べてみましたか？勘のいいあなたなら、違いにお気づきになるでしょう。そう「くまちゃんの数」がb

カスタムShopifyテーマで商品メディアを使用する方法商品ページは、Shopifyマーチャントのストアにおいてもっとも重要なタッチポイントといえます。商品価値を伝達するうえではとくに大切です。 商品ページは、Shopifyマーチャントのストアにおいてもっとも重要なタッチポイントといえます。商品価値を伝達するうえではとくに大切です。その中でもビジュアルは、お客さまを引き付けてストーリーを伝える点で主要な役割を担っています。商品メディアを使用することで、そのレベルを一段引き上げることが可能です。 最近Liquidにメディアフィルターと属性が追加され、Shopifyの商品ページは商品動画や3Dモデルもサポートしています。この拡張機能はすべてのShopifyストアで利用でき、クライアントのストアフロントやカスタムテーマに今すぐ商品メディアを実装することが可能となっています。 この新機能によって、

どうも！Shopifyおじさんです！ 今回は、Shopifyの購入完了ページ、いわゆるサンクスページと呼ばれる場所にcart.attributesの値や、その他の情報が出せないか？を色々調べてみました！ まずは、基本編ということで解説していきたいと思います。 記入する場所 そもそもどこにコードを書いたらいいのか？ こちらは、テーマファイル内にコードを書くのではなく、ショップの管理画面の設定からコードを読み込ませていきます。 画面左下にある、設定 ＞ チェックアウト ＞ 注文状況ページ ＞ 追加スクリプト （下の画像のところ）にコード書き込んでいきます。 基本文法 いくつか公式でも、説明してあります。（以下リンク） ・注文状況ページをカスタマイズする ・注文状況JavaScriptアセット 公式の内容では、checkoutとshopオブジェクトが使用可能だと書いてありましたが、私がやった中で

メタフィールドとは何か 2021年6月29日（日本時間：6月30日）、Shopify は自社の年次発表会である「Shopify Unite 2021」を開催し、多くの画期的な発表を行いました。 その様子をこちらの記事にまとめています： 数々の新機能の中でも、個人的に面白く感じたのが、「メタフィールド」が管理画面で編集可能になったことでした。（これを知ったとき「お前、み…見えるようになったのか！」と思いました 笑） メタフィールドは Shopify に以前から実装されているもので、商品やバリエーションに固有の情報を追加できる機能です。多少の誤解を恐れずにいえば、Wordpressでいうところのカスタムフィールドみたいなものです。 カスタムフィールドに近いということは、商品やコンテンツにさまざまな付帯情報をつけるのがメタフィールドの主な役割ということになります。ですが、実はこれまでメタフィール

過去最大のアップデートの1つ、オンラインストア2.0がShopify Uniteで発表されました。 Online Store 2.0は、Shopifyマーチャントのためにアプリやテーマを開発している開発者に広大なチャンスを提供します。わたしたちはオンラインストア体験をゼロから再構築し、一連の開発者ツールを提供することで、みなさんがマーチャントやショッピングを楽しむ人々のために素晴らしい体験を生み出すことを支援します。 今回の記事では、新しいツールや機能を紹介し、それらがあなたの仕事に与える影響や可能性について見ていきます。また、現在のテーマやアプリをOnline Store 2.0の基準にアップデートするための要件についてもご説明します。 それでは、さっそく始めましょう。 1. アップグレードされたテーマアーキテクチャ オンラインストア向けのテーマアーキテクチャをアップグレードし、より柔軟

日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。 Shopifyにはデフォルトで配送日時指定の機能がない Shopifyの機能には、配送日時指定（お届け日時指定）の機能がデフォルトでついていません。 よって、配送日時指定のアプリを入れる必要がありますが、有料のものがほとんどです。年間にするとそれなりのコストになるため、今回は自分でコードを編集して実装した時の方法をまとめていきます。 日付の指定を実装することも可能ですが、今回は「配送時間」のみの指定方法についてまとめます。 配送日については以下。 [Shopify] 配送日指定を実装する方法（Debutテーマ）日本のマーチャントがShopifyを利用する際に、デフォルトで日本向けに足りない機能のカスタマイズ方法について紹介していきます。 ... カート画面に追加

Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。 Shopifyのデフォルト納品書テンプレート Shopifyにはデフォルトで納品書（明細書）があります。仮のサイトですが以下です。 以下はデフォルトで記載のない項目です。 商品ごとの価格・小計 割引（クーポンなど） 小計金額 配送料 消費税 合計 他に日付や住所が英語仕様であったり、文言が英語となっています。 これらを最低限対応するために、今回は無料のアプリ「Order Printer」というアプリを使用します。 Shopifyの納品書アプリ「Order Printer」をインストールする まず、管理画面のアプリ管理から、「Shopifyアプリストアに行く」ボタンを押し、アプリストアで「Order

明細表はデフォルトで搭載されている Shopifyでは、明細表（明細書）の出力が標準機能として搭載されています。 特に追加のアプリがなくても、 [注文管理] > [その他の操作] > [明細表を印刷する] からテンプレートの明細表が出力できるので、梱包時に印刷して同封することが可能です。 1. 管理画面から、注文に移動します。 2. 明細表を印刷する注文数をクリックします。 3. (アメリカまたはカナダに拠点があるストアで) Shopify Shippingを使用する場合、未発送セクションで [配送ラベルを作成する] 選択します。 4. [配送ラベルを購入する] をクリックします。 5. [印刷] > [明細表を印刷する] をクリックします。 6. [印刷する] をクリックします。 https://help.shopify.com/ja/manual/orders/packing-slip

Liquid objects represent variables that you can use to build your theme. Objects Liquid objects represent variables that you can use to build your theme. Object types include store resources, standard Shopify content, and functional elements that help you to build interactivity. Objects might represent a single data point, or contain multiple properties. Some properties might represent a related o

翻訳キーを使用してグローバル対応のテーマを作成する方法eコマースはグローバル規模でポピュラーになってきました。開発者にとって、国際対応や翻訳が可能なテーマを世界中のクライアントに提供する大きな機会が到来しています。 eコマースはグローバル規模でポピュラーになってきました。開発者にとって、国際対応や翻訳が可能なテーマを世界中のクライアントに提供する大きな機会が到来しています。デフォルト言語を変更でき、簡単にコンテンツが編集できる柔軟なテーマを提供できれば、マーケットは加速度的に広がっていきます。 世界の大半のWebサイトは英語ですが、Webユーザーのうち英語を話す人は25%程度にとどまっています。そのため、ローカライズされたサイトを構築する重要な役割が開発者に課せられているわけです。Shopifyのマーチャントは175カ国に及ぶため、Liquidを使用する開発者は、国際的なクライアントがビジ

Liquid filters are used to modify Liquid output. Filters Liquid filters are used to modify Liquid output. Filters with parameters Many filters accept parameters that let you specify how the filter should be applied. Some filters might require parameters to be valid. Using multiple filters Multiple filters can be used on one output. They're applied from left to right. Usage To apply filters to an o