Tips

アプリ不要!注文履歴や注文履歴一覧ページに「再注文」ボタンを実装するチュートリアル

アプリ不要!注文履歴や注文履歴一覧ページに「再注文」ボタンを実装するチュートリアル

アプリ不要!注文履歴ページや注文履歴一覧ページに「再注文」ボタンを実装する方法をご紹介。 「再注文」ボタンを実装するにはShopifyアプリを使うのが手っ取り早いのですが、サブスク料金が発生する他、海外仕様で使い勝手が悪かったり、デザインがサイトに合わなかったり、「Line item property」が送れなかったりと難点も多いです。 このカスタマイズ方法ならjQueryを使わずに比較的簡単なカスタマイズ方法で、イメージ通りに「再注文ボタン」が実装できます。 アプリ不要 jQuery不要 デザインカスタマイズ可能 注文履歴一覧ページ対応 注文履歴詳細ページ対応

ブログを「カテゴリー」として扱い一覧出力する方法のチュートリアル

ブログを「カテゴリー」として扱い一覧出力する方法のチュートリアル

カテゴリー機能のないShopifyブログを「カテゴリー」として扱い、記事一覧に全ブログから日付順に出力させる方法をご紹介 Shopifyブログにはカテゴリー機能がありません。タグで代用されている方、ブログをカテゴリーとして複数作る方など様々です。 タグで代用する場合は、特に設定は必要ありませんが、カテゴリーとタグは別々で作りたいところ。ブログをカテゴリーとして複数作っても、全てのブログを参照する一覧が出力できません。 その2つのお悩みを解決するカスタマイズ方法をご紹介します。

アカウント登録画面に入力項目を追加してメタフィールドに登録する方法のチュートリアル

アカウント登録画面に入力項目を追加してメタフィールドに登録する方法のチュートリアル

アカウント登録画面に「ふりがな」や「生年月日」等の入力項目を追加して、カスタマーメタフィールドに登録するカスタマイズ方法! Shopifyは海外発のECプラットフォームなので、日本のECサイトには当たり前のように存在する機能がなかったりします。 中でも「ふりがな」は日本だけの文化なので、通話オペレーティングなどが必要なショップにとっては必要不可欠。 ふりがなを登録する方法は主に「カスタマーノートを使う方法」と「アプリを使う方法」の2種類あっていずれも簡単に実装できますが、それぞれデメリットもあります。 1. カスタマーノート 入力フォームのname属性に「customer[note][◯◯◯]」と入れれば、アカウント登録時にカスタマーノートに情報が登録されます。基本的にはそれで良いですが、アカウントページに出力できなかったり、出荷系APIとの連携がうまくいかなかったりと難点もあります。 2. アプリ 登録画面をカスタマイズできるアプリを使えば、項目でも追加できメタフィールドにも登録できるのでとても便利です。ただ海外製のものがほとんどで、サブスク料金がかかったり、日本の住所自動入力に対応できなかったりと難点もあります。 ここでご紹介するのは、カスタマーノートとShopify公式アプリ「Shopify flow」を使って、追加項目をメタフィールドに登録する方法です。

商品カードのセールバッジを割引率表記に切り替えるカスタマイズ方法

商品カードのセールバッジを割引率表記に切り替えるカスタマイズ方法

はじめに このカスタマイズ方法はShopifyデフォルトテーマ「Dawn(11.0.0)」をベースに紹介しております。 別バージョンのDawnや他テーマの場合は構造が異なりますので、ご利用のテーマに併せてカスタマイズしてください。 スニペットファイルを編集 商品カードのバッジを出力するファイルを探して開きます。Dawn(11.0.0)の場合は「card-product.liquid」が該当します。 「セール」のテキスト出力される部分を探し、以下の用に編集します。 {% comment %} {{- 'products.product.on_sale' | t -}} {% endcomment %} {{ card_product.compare_at_price | minus: card_product.price | times: 100.0 | divided_by: card_product.compare_at_price | round...

構造化マークアップに対応したパンくずリストを設置するチュートリアル

構造化マークアップに対応したパンくずリストを設置するチュートリアル

パンくずリストを構造化マークアップに対応させて、SEO強化を図るカスタマイズ。 「パンくずリスト(Breadcrumb navigation)」はサイト内で迷子にならないよう現在の位置を示すもので、グリム童話の「ヘンゼルとグレーテル」が由来になっているそうです。 Shopifyテーマにパンくずリストを実装するカスタマイズ方法は公式でも紹介されていますが、構造化マークアップには対応しておりません。 構造化マークアップをすることで、検索結果にもパンくずリストが表示される上、検索エンジンに階層構造を伝えることができるので、SEO効果も期待できます。 また、本カスタマイズ方法は最も最適と考える構造を採用しておりますので、その理由も併せてご紹介いたします。 構造化マークアップ対応 WAI-ARIA対応 SEOに効果的 デザインカスタマイズ可能

WordPressのRSSフィードから記事一覧を出力するチュートリアル

WordPressのRSSフィードから記事一覧を出力するチュートリアル

WordPressから記事情報を取得して、記事一覧セクションを作成します。 SEOの観点から本来はShopifyブログの利用を推奨していますが、どうしてもWordPressブログと連動させたいショップも多いようです。 RSSフィードを登録して出力させるアプリもいくつかありますが、サブスク料金が発生したり、デザイン性がイマイチだったりします。 このカスタマイズ方法なら、お好みのデザインやHTML構造で出力できる上、お好きなページへセクションを実装できます。 アプリ不要 jQuery不要 サムネイル対応 抜粋対応 Shopify2.0対応