【Shopify】日本製のレビューアプリについて徹底解説

Shopifyにセット販売を取り入れるメリットとアプリの使い方を解説

Shopifyでスライドショーを簡単に設置できるアプリを解説

<h2 id="h11ccdcd9a5">本記事について</h2><p>どうも、齊藤です。<br>本記事では、「<strong>ShopifyストアにLINE誘導バーをつけたい、、</strong>」「<strong>送料無料などのキャンペーンをShopifyストアに表示いたい、、</strong>」という悩みを持っている方向けに、<br>LINE誘導バーや送料無料バーを導入する方法を解説していきます。<br>Shopify にまだ慣れていないかた、これからストア構築される方の参考になればと思います。<br>それでは、やっていきましょう！<br></p><h2 id="haae75e347e">使用するアプリについて</h2><p>今回使用するアプリは「送料無料キャンペーン｜リテリア 告知」です。<br>公式記事がありましたので、<a href="https://www.re-terior.com/shopify-apps/reterior-announcement/guide" target="_blank" rel="noopener noreferrer">こちら</a>を参考に本記事を書いております。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b7385a5433e741d0bad2133bb62f825a/image.png" alt=""><br></p><h3 id="h57d5f36d69">送料無料キャンペーン｜リテリア 告知 とは？</h3><p>送料無料キャンペーン｜リテリア 告知 とは、送料無料バー・LINE誘導バー・お知らせバーなど、さまざまなバーを Shopify ストアに導入できるアプリです。<br>Online Store 2.0のテーマで動作し、カスタマイズ性が非常に高いことが特徴です。<br></p><h3 id="h61f41b6682">送料無料キャンペーン｜リテリア 告知 の料金は？</h3><p>送料無料キャンペーン｜リテリア 告知 は、有料で月額 4.90ドルになります。<br>料金は少し高めですが、汎用性、カスタマイズ性を考えると妥当な値段かと思います。<br>公開しているテーマでは、7日間の無料体験ができます。また、開発中のストアでは完全無料で使用できます。<br>アプリを導入する前に、送料無料バーを実際に作成して機能を確認できるのは非常にありがいたいですね。<br><br>使用するアプリについてある程度理解したと思いますので、<br>アプリをストアに導入して、送料無料バーを作成していきます。<br></p><h2 id="hd3307bf288">アプリの導入</h2><p>アプリの導入について説明していきます。<br>下記の流れでアプリを導入していきます。</p><ol><li>アプリのインストール</li><li>送料無料バーのカスタマイズ</li><li>LINE誘導バーのカスタマイズ</li></ol><p>それでは、導入していきます。</p><h3 id="h8baa83704e">アプリのインストール</h3><p>まずは、自分のストアの「アプリ管理」画面を開きます。<br>アプリ管理画面右上にある「ストアをカスタマイズ」という緑のボタンを押して、アプリストアに移動します。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/6026e670aa5941ed94a1a90d337786da/image.png" alt=""><br><br>アプリストア内で「送料無料キャンペーン｜リテリア 告知」と検索をして、<br>「アプリを追加する」という緑のボタンを押して、アプリをインストールします。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/9d94ff159f394d158cb4239f23ad94ea/image.png" alt=""><br><br>インストールが完了するとアプリ管理画面が表示されます。<br>アプリ管理画面が表示されたら、自動インストール項目にある、「有効化」という緑のボタンを押します。<br>このボタンを押すことで、自動でストアにアプリセクションをインストールできます。<br>（もし、これでインストールできない方は、手動インストールの方法がアプリ管理画面に記載されておりますので、とそちらからインストールをしてください。）<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b8e13705f54b461b8efa7f143a8b84cc/image.png" alt=""><br><br>有効化ができたら、「プレビュー」ボタンを押してテーマカスタマイズ画面に移動します。<br></p><h3 id="h923959958a">送料無料バーのカスタマイズ</h3><p><br>「送料無料キャンペーン｜リテリア 告知」のセクションが追加されているのでデザインを修正していきます。<br>設定項目がありますので、お好きなデザインにカスタマイズしてください。<br><br>設定の詳細は<a style="background-color:#ffffff" href="https://www.re-terior.com/shopify-apps/reterior-announcement/guide" target="_blank" rel="noopener noreferrer">公式記事</a>を参考にしてください。<br><br>作成した送料無料バー ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/7cebf0f93aca4de0833811545dbce723/image.png" alt=""><br><br>設定内容 ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/115a35c5b353486caf55f65a3daac4a8/image.png" alt=""><br></p><h3 id="he2d33e2cf9">LINE誘導バーのカスタマイズ</h3><p><br>「送料無料キャンペーン｜リテリア 告知」のセクションが追加されているのでデザインを修正していきます。<br>設定項目がありますので、お好きなデザインにカスタマイズしてください。<br>ボタンにLINE友達を追加するページのリンクを設定することで、LINE友達登録を促すことができます。<br><br>作成したLINE誘導バー ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3239e0b3d8114d7e9cd7fd8ad870097a/image.png" alt=""><br><br>設定内容 ↓<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/ecf45a96e913489f93c2efcce270fcfb/image.png" alt=""><br></p><h2 id="ha214098e44">まとめ</h2><p>今回は、LINE誘導バーや送料無料バーを導入できるShopify アプリ「<a href="https://apps.shopify.com/reterior-announcement?locale=ja" target="_blank" rel="noopener noreferrer">送料無料キャンペーン｜リテリア 告知</a>」について解説しました。<br>興味がある方はぜひ導入してみてください。</p>

【Shopifyアプリ】LINE誘導バー・送料無料バーを作成してみた

<h2 id="h8d027c8ed3">はじめに</h2><p>こんちゃっす、信条です。<br>本日は、『神アプリ紹介シリーズ』です。<br>この企画では、筆者が実際に使用していて涙が出るほど感動したアプリを紹介する企画になります。<br>早速行ってみましょう。</p><h2 id="h4cb2da2985">本日の神アプリ</h2><p>本日のアプリはこちらです！！<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0e6daaa824e747e5ae8d8719becb2b7e/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.55.51.png" alt=""><br>『らくらく日本語フォント設定｜リテリア Font Picker』とは、Googleフォントだけでなく、日本語フォントをカンタンにShopifyストアに導入できるアプリです！<br>Shopifyのほとんどのテーマはデフォルトでは、英語のフォントしか対応していないんですよね。<br>そのため、日本語のフォントを使用したい場合にはコーディングする、もしくはフォントピッカーアプリを導入する必要があるんです。<br>今まで、他にもフォントピッカーアプリを使用してきましたが、日本語対応していてリーズナブルな点からこのアプリを使用しています。</p><h2 id="h3b0221e612">らくらく日本語フォント設定｜リテリア Font Picker</h2><h3 id="h70589a8995">機能</h3><p>こちらのアプリの機能ですが、以下の画像がわかりやすいと思います。<br>ノーコードで日本語フォントやGoogleフォントを使用することができます。ノーコード最強！<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2487b1edc6684b159736f1609dd9077a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2016.04.13.png" alt=""></p><h3 id="h4d849f4362">使い方</h3><p>使い方もとてもカンタンです。<br>以下のように、ストアカスタマイズ画面から好きなフォントを選択するだけです<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4da791472a904fb4963dbf376ba95819/image.png" alt=""><br>また、プロ向けの仕様としてGoogleフォントのようなカスタムウェブフォントも追加できます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/dbeaadcff93147d7a295598145ff8c57/image.png" alt=""><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3c8146c54547422fb437d0675579144c/image.png" alt=""><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/c3ace71f78114d7eb2d9047dea57262d/image.png" alt=""><br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介した神アプリに興味のある方は<a href="https://apps.shopify.com/font-picker-1?locale=ja&amp;from=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><p>▼ Shopifyのフォントを簡単に変更する方法を調査 - zennスクラップ<br><a href="https://zenn.dev/kageyama/scraps/71f7df02a45428" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/71f7df02a45428</a><br>▼ 【Shopify マスターへの道】#9 サイトのフォントを編集しよう<br><a href="https://unreact.jp/blog/roadmap-customize-fonts" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/roadmap-customize-fonts</a><br>▼Shopifyで日本語フォントを使えるアプリ『リテリア Font Picker』について徹底解説<br><a href="https://www.re-terior.com/shopify-apps/reterior-font-picker/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-font-picker/guide</a></p>

【Shopify 神アプリ紹介シリーズ】日本製フォントピッカーアプリを紹介していく

<h2 id="h8d027c8ed3">はじめに</h2><p>お久しぶりです、五条です。<br>本日は、日本製のYouTube埋め込みアプリをご紹介していきたいと思います。<br>Shopify のストア上にYouTubeの動画の埋め込みを検討されているマーチャントの皆様にはドストライクな記事だと思いますので、最後まで読んでいただけますと幸いです！</p><h2 id="hca69607712">YouTube動画埋め込みアプリとは</h2><h3 id="h1b30d7f76e">機能の説明</h3><p>Shopify のストアに動画を埋め込むことにより、ストアの見た目・雰囲気をおしゃれにしたり、ある程度の情報量を視覚的に伝えることができます。<br>ストアに動画を埋め込みたいというニーズはかなりあるわけです。<br>このニーズを満たしてくれるのが動画埋め込みアプリになります（特にYouTube動画を埋め込めるアプリのことをYouTube動画埋め込みアプリといいます）。</p><h3 id="h101d5733ba">デフォルトの機能でも実装できる？</h3><p>動画の埋め込み自体は、テーマのデフォルトの機能で実装することができます。<br>実装方法をご説明します。<br>① 『セクション追加』にて『動画』を選択します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/31205fb0094b49f183599de03051c171/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.30.51.png" alt=""><br>② 好みのスタイルに変更します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/9016e238ce484699a3184b162db511cf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.31.12.png" alt=""><br>かなり簡単に実装できました。<br>ですが、デフォルトの機能を使用した実装ですと以下の実装ができません。</p><ul><li>YouTubeの自動再生</li><li>YouTube動画の表示数の調整（何カラムで表示するかという設定）</li></ul><p>自動再生は実装したいですよね。<br><br>上記の実装を可能にしてくれるのが『<a href="https://apps.shopify.com/youtube-video?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">どこでもYouTube動画埋め込みアプリ｜リテリア Video</a>』になります。</p><h2 id="h02d23fe3b5"><span style="color:#333333">どこでもYouTube動画埋め込み｜リテリア Video</span></h2><h3 id="h70589a8995">機能</h3><p>このアプリでできることは以下の通りです。</p><ul><li>ストアにYouTube動画を埋め込む（YouTube動画のURLを指定する）</li><li>動画の表示件数</li><li>動画間の余白</li><li>動画の縦横比を指定</li><li>YouTube動画の自動再生機能</li><li>YouTube動画の表示件数の設定（何カラム構成で表示するか設定できる）</li><li>上下左右の余白調整（細かい余白調整ができるのもデザインを気にされるマーチャントの方にはありがたいと思います。）</li></ul><p><br></p><h3 id="h4d849f4362">使い方</h3><p>実際に使用してみたので、使用方法についてご説明したいと思います。<br>アプリをインストールできたら、ストアのカスタマイズ画面に移動します。<br>① 『セクションを追加』より『YouTube動画ブロック』というセクションを選択します。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/a7d2421d575c424fa7653122366900f2/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.40.37.png" alt=""><br>② ストアにセクションを追加できたら、動画のURLやカラム数などといった各種設定を行います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2d074676567245ba94ad19fc49b47b16/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2015.42.28.png" alt=""><br>以上で設定完了です。<br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介したアプリに興味のある方は<a href="https://apps.shopify.com/youtube-video?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><p>参考にした記事一覧です。<br>ご参考にしてください。</p><ul><li><a href="https://zenn.dev/kageyama/scraps/6ca88ab3221bcc" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/6ca88ab3221bcc</a> （zennのスクラップ）</li><li><a href="https://qiita.com/shitron/items/824502d990b0947baab9" target="_blank" rel="noopener noreferrer">https://qiita.com/shitron/items/824502d990b0947baab9</a> (Youtube動画埋め込みアプリの解説記事 - qiita)</li><li><a href="https://www.re-terior.com/shopify-apps/reterior-youtube/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-youtube/guide</a> （株式会社リテリア公式解説記事）</li></ul>

【いい感じのShopifyアプリ見つけた日誌】YouTube動画をストアに埋め込めるアプリを見つけた

<h2 id="h8d027c8ed3">はじめに</h2><p>こんちゃっす、信条です。<br>本日から、新しいアプリ紹介シリーズを始めようかなと思います。<br>その名も『神アプリ紹介シリーズ』です。<br>この企画では、筆者が実際に使用していて涙が出るほど感動したアプリを紹介する企画になります。<br>どうぞ、お楽しみください。</p><h2 id="hd94813819c">本日の神アプリの紹介</h2><p>本日ご紹介する神アプリは、こちらです！！<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/21be566ff2754603bfbef2a7ecc4492b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.36.58.png" alt=""><br>『<a href="https://apps.shopify.com/margin-1?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">らくらく余白調整｜リテリア Margin</a>』とは、あるセクションとセクションの間の余白を調整するためのアプリになります。<br>このアプリを使用することで、ここの余白をもう少し開けたいみたいな悩みを解消できます。<br>テーマデフォルトのセクションって意外とセクション間の余白を調整できないことが多々あるんですよ。<br>そんな時にこのアプリを使用すると余白を自由自在に調整できます。<br>余白にもこだわりたいマーチャントの方には是非使用していただきたいアプリです！</p><h2 id="h9a6c7dabb6">らくらく余白調整 | リテリア Margin</h2><h3 id="h70589a8995">機能</h3><p>こちらのアプリの機能詳細についてご説明したいと思います。<br>このアプリを使用することにより、ストアカスタマイズ画面にて以下のセクションが使用可能になります。</p><ul><li>『余白調整（小）』：<span style="color:#333333">-50px ~ 50px の範囲で1pxごとの余白調整</span></li><li><span style="color:#333333">『余白調整（中）』：−400px ~ 400px の範囲で8pxごとの余白調整</span></li><li><span style="color:#333333">『余白調整（大）』：−800px ~ 800px の範囲で16pxごとの余白調整</span></li></ul><p><span style="color:#333333">私は、基本的には汎用的な『余白調整（小）』を使用して余白調整をします。</span><br><span style="color:#333333">がっつりスペースを空ける必要がある場合には、『余白調整（大）』を使用します。</span><br>かなり、細かい余白調整が必要な場合には『余白調整（小）』を使用します。<br>細かく使い分けができるのがありがたいですね。<br><br>また『余白調整（大or中or小）は、PC時とスマホ時の余白を設定できます。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/bfa4850db1ae4c31a4ba89c282989d59/image.png" alt=""></p><h3 id="h4d849f4362">使い方</h3><p>使い方について解説します。<br>以下の画像に示す部分にマージンを追加してみます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3df074c36aaa46c6b63269716bd349ee/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.48.19.png" alt=""><br>① 『セクションを追加』から『余白調整（大or中or小）セクションを追加します。<br>今回は、汎用的な『余白調整（中）』を使用してみましょう。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/23ca74107f7f45c080f585859506667a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.52.24.png" alt=""><br><span style="background-color:#ffffff">② 余白を入れたい位置にセクションを移動しましょう。</span><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0cf572c12b8c4a04b39aa16fe478568f/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.53.28.png" alt=""><br><br>③ 余白の大きさを設定します。<br>今回の例では、わかりやすくするため400pxに設定しました。<br>PC時とスマホ時どちらも適切な値に設定しましょう。<br><br>以上の設定が済んだら、以下のように余白が広がっていることを確認できると思います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/973877461fcd45f7b4ef1fc1522109c1/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-28%2014.55.14.png" alt=""></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今後も神アプリシリーズを定期的に配信しようと思いますので興味のある方は是非ご覧ください。<br>今回紹介した神アプリに興味のある方は<a href="https://apps.shopify.com/margin-1?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><p>▼ 【気まぐれShopifyアプリ調査】セクション間の余白を自由に調整できるアプリを見つけた - Qiita<br><a href="https://qiita.com/shinichi-gojo/items/ede27474732c7e367373" target="_blank" rel="noopener noreferrer">https://qiita.com/shinichi-gojo/items/ede27474732c7e367373</a><br>▼ 株式会社リテリア　リテリア Margin のLP<br><a href="https://www.re-terior.com/shopify-apps/reterior-margin/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-margin/guide</a></p>

【Shopify 神アプリ紹介シリーズ】デザインにこだわりたい人必見のセクション間余白調整アプリを紹介していく

<h2 id="h8d027c8ed3">はじめに</h2><p>こんちゃ、信条です。<br>今日は、Shopifyストアにてクーポンコードを使用するフローをいい感じにできる方法をご紹介します。<br>最後まで読んでいただけると嬉しいです。<br>早速いってみましょう。<br></p><h2 id="hb665ae3972">クーポンコードとは何か？</h2><p>そもそも、Shopifyのクーポンコードという機能をご存知でしょうか？<br>ざっくりと説明しますと、Shopifyには特定の条件を満たした顧客が『クーポンコード』を使用することにより商品が割引される仕組みがあります。<br>この特定の条件というのは、Shopifyのストアのディスカウント管理画面のクーポン作成画面にて設定できます。<br>設定画面は以下の画像の通りです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/c1a53579bbab48a38cb72278fcabfb0c/image.png" alt=""><br>クーポン適用する顧客の条件は以下があります。</p><ul><li>管理画面から指定した顧客　＝　顧客一人ひとりを指定</li><li>顧客セグメント（購入していない顧客、メール購読している顧客）　＝　顧客のグループを指定</li><li>全ての顧客</li></ul><p>クーポンの適用範囲は以下の通りです。</p><ul><li>全ての商品</li><li>特定のコレクション</li><li>特定の商品</li></ul><p>クーポンの種類は以下があります。</p><ul><li>割引率（何％割引するかを決める）</li><li>定額（これだけ引きますという価格をあらかじめ決めておく）</li><li>無料配送（配送料を無料にしてくれる）</li><li>Xを購入するとYをゲット（何か特定の商品を購入したら、他の商品がついてくるよってやつ）</li></ul><p>クーポンの利用制限は以下の通りです。</p><ul><li>合計回数（何回使用したら、このクーポンは使えなくなるよってやつ）</li><li>お客様お一人一回前</li></ul><p>クーポンには有効期限も設定できるようです。<br><br>以上の内容を設定することによりクーポンコードを作成することができます。<br>クーポンコードを作成すると、チェックアウトページに自動的にクーポンコード（文字列）を入力するためのフィールドが出てくるようになります。<br>以下の画像がチェックアウトページのクーポンコード入力用フィールドになります。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1eb05069a33845e1818a02a61ec1d72f/image.png" alt=""><br>顧客はクーポンコードをこちらのフィールドに入力して、クーポンを使用する形になります。<br>クーポンコードの配布方法には以下があります。</p><ul><li>メールで配布する</li><li>ストア上のどこかのページにクーポンコードを表示する</li></ul><p>後者の方法を使用する場合、クーポンコード（文字列）をストア上のどこかに表示することになるのですが、少しナンセンスな気がします。<br>顧客目線で考えると、文字列を選択・コピーしてチェックアウトページの入力欄にペーストするというフローはかなりめんどくさいしわかりにくいです。<br>やはり、視覚的にわかりやすくクーポンコピーできるような機能を提供したいものです。<br>そんな機能がないか調査をしてみたところ、『<a href="https://apps.shopify.com/1-coupon?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">クーポンコード１クリックコピー｜リテリア Coupon</a>』というアプリを発見しました。<br>(解説記事は<a href="https://www.re-terior.com/shopify-apps/reterior-coupon/guide" target="_blank" rel="noopener noreferrer">こちら</a>からどうぞ)</p><h2 id="hf40189571f"><span style="color:#333333">クーポンコード 1 クリック コピー｜リテリア Coupon</span></h2><p>このアプリを使用して、良かったと思うポイントは以下の通りです。</p><ul><li>顧客にとってわかりやすいUIを提供できる</li><li>マーチャントにとってもわかりやすい設定画面</li></ul><p><br>一つ目の良かったポイントについてご説明します。<br><br>以下の画像のような見た目のクーポンコピー機能を実装できます。<br>顧客からしたら、『これはクーポンだ』ってわかりやすいですよね。<br>このわかりやすいUIを提供できるという点はとてもポイントが高いです。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/2794feee32bc4ffcaccef55e98de9f49/image.png" alt=""><br><br>2つ目の良かったポイントについてご説明します。<br>以下の通り、マーチャント側では、画像クリック前に表示する画像と画像クリック後に表示する画像やクリック時にコピーされるクーポンコードなどを指定できます。<br>シンプルな設定画面なので、スラスラと設定できます。<br>嬉しいです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/7e687592db21416785b080b1f4959a41/image.png" alt=""></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介したアプリに興味のある方は<a href="https://apps.shopify.com/1-coupon?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://zenn.dev/kageyama/scraps/26cdca174771d3" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/26cdca174771d3</a></li><li><a href="unsafe:re-terior.com/shopify-apps/reterior-coupon/guide">re-terior.com/shopify-apps/reterior-coupon/guide</a></li></ul>

【いい感じのShopifyアプリ見つけた日誌】クーポンコードを使用するフローをいい感じにしたい

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも、五条です。<br>本日は、Shopifyストアに商品レビュー機能を実装するための方法をご紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="h63618e5e77">商品レビューとは</h2><p>そもそも、商品レビューって何かというところからお話ししたいと思います。<br>みなさんは、Amazon.comは使いますか？（使わない人は少ないと思いますが...）<br>Amazon.comで買い物をしようと思った時に、他の人の意見を聞きたいと思った時に他の購入者の意見を参考にしますよね。<br>こういった他の購入者による商品に対する意見のことを商品レビューと言います。<br>実は、Shopifyのストアにも商品レビュー機能は実装できるんです。<br>実装するためにはアプリを使用する必要がありますが、海外性のものばかりなので日本人の私からするとどうも使い勝手が少々悪い印象があります。<br>良さげなアプリがないか調査していましたところ、以下の記事を発見。<br>日本語対応した『<a style="background-color:#ffffff" href="https://apps.shopify.com/review-6?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">らくらく商品レビュー｜リテリア Review</a>』というアプリを紹介していました。<br><a href="https://zenn.dev/kageyama/scraps/66094dace162d4" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/66094dace162d4</a><br>以下のShopifyレビューアプリのランキング記事でも、<a style="background-color:#ffffff" href="https://apps.shopify.com/review-6?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">らくらく商品レビュー｜リテリア Review</a>が紹介されていました。<br><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer">https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2</a><br><br>以上のことから、日本のShopifyストアに導入するならこのアプリが最適解なんじゃないかなと思います。</p><h2 id="h1fef3a97be">らくらく商品レビュー | リテリア Review</h2><p>このアプリでできることは以下の通りです。</p><ul><li>レビュー書き込み機能</li><li>レビュー一覧機能</li><li>レビュー管理機能</li></ul><p>レビュー書き込み機能と、レビュー一覧機能については顧客側の機能になります。<br>レビュー管理機能がマーチャント側の機能になります。<br><br>もう少し詳細に説明していきたいと思います。<br></p><h3 id="h0434b0a458">レビュー書き込み機能</h3><p>レビュー書き込み機能は、顧客がオンラインストア側でレビューを書き込むための機能になります。<br>この機能では、レビュー内容を記入するためのモーダルとそのモーダルを開くためのボタンが提供されます。<br>以下の画像がUIをわかりやすく説明していると思います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/1ddeae89323f4071b0f659b46b7ffcd0/image.png" alt=""><br>顧客はこのモーダルに、以下の内容を記入してレビューを送信するみたいです。<br>全ての項目を入力しないと送れないようになっているみたいです（一つでも記入漏れがあると送れなかったです...。ありがたい機能です。）。</p><ul><li>メールアドレス</li><li>名前</li><li>レビュータイトル</li><li>レビュー内容</li></ul><h3 id="h88c3342124">レビュー一覧機能</h3><p>レビュー一覧機能は、顧客が他の購入者が残していったレビューを見るための機能のようです。<br>これまでに商品購入者が残していったレビューの一覧をストア上に表示するためのセクションを提供してくれます。<br>まさにAmazon.comみたいな見た目のセクションなので、ストアがAmazonになったんじゃないかと思いますよ。<br>UIは以下の画像の通りです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4106352fee1f4f8d8002a3e830e9596c/image.png" alt=""><br>初回は3件とか4件とか設定した初期値の分だけレビューが表示されますが、『もっとみる』を押すとその商品につけられたレビューが全て表示されます。<br></p><h3 id="h6e14e7d0c8">レビュー管理機能</h3><p>この機能はマーチャント側の機能ですね。<br>私も、一部の機能しか使っていませんが把握している限りですと『レビュー削除』と『レビュー返信』という機能があるようです。<br>レビュー削除機能では、レビューを選択して削除できます。ただ、一度削除しちゃうと復元できないみたいだから気をつけましょうね...。<br><br>レビュー返信機能は、レビューに対して返信する機能みたいです。<br>レビューに対して返信するとストア上では以下のように表示されるみたいです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0e877307964b4627ba352123824ff429/image.png" alt=""><br></p><h3 id="h78cf759b2c">おすすめポイント</h3><p>私が日本のストアに商品レビューアプリを導入するなら『らくらく商品レビュー｜リテリア Review』だと考える理由を2つ紹介します。</p><ul><li>日本語に対応している（管理画面はもちろん、サポートも日本語で対応してくれる）</li><li>カスタマイズ性に優れる</li></ul><p>やはり、日本語に対応しているというのはかなりポイントが高いです。<br>正直海外性のアプリは、管理画面が複雑なところもあり機能を使い倒せている感覚があまりないのですが、このアプリはシンプルな機能を提供してくれているため全ての機能を満遍なく使い倒せているという実感があります。<br>また、ストア側の表示もかなりカスタマイズできるのでありがたいです。<br>以下のカスタマイズが可能です。</p><ul><li>ボタンの配色設定</li><li>レビュー書き込みモーダルを開くためのボタンの上に表示する文言の設定</li><li>レビュー一覧セクションの初期値（顧客が商品ページを訪れた際に最初に表示されているレビューの件数）</li><li>セクションの上下のマージン（正直これはあってくれて本当に助かっている）</li></ul><p>やはりカスタマイズ性は正義ですね。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>最後まで読んでいただきありがとうございます。<br>今回紹介したアプリに興味のある方は<a href="https://apps.shopify.com/review-6?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>からどうぞ。<br>お疲れ様でした。<br></p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://zenn.dev/kageyama/scraps/66094dace162d4" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/66094dace162d4</a></li><li><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer">https://qiita.com/shopify_m</a><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer"><em>master</em></a><a href="https://qiita.com/shopify_master_yoshinori/items/ae9e583163efc28a73d2" target="_blank" rel="noopener noreferrer">shinori/items/ae9e583163efc28a73d2</a></li><li><a href="https://www.re-terior.com/shopify-apps/reterior-review/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-review/guide</a></li></ul>

【いい感じのShopifyアプリ見つけた日誌】日本語対応したレビューアプリを見つけたから共有したい

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも。<br>本日は、Shopifyのテーマに高カスタマイズ性のスライドショーを簡単に導入する方法を紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="h710e49cb9c">発売予告（Coming Soon）とは</h2><p>そもそも、発売予告ってなんだよって感じですよね。<br>発売予告とは、Shopify上の商品を購入はできない状態で発売前から公開しておく機能のことです。<br>発売予告することで、顧客は前もって発売予定の商品の情報に触れることができます。<br>商品情報に前もって触れられるようにすることで顧客の購買意欲を刺激することができ、結果売り上げ向上につながる可能性があります。<br>そんな発売予告の機能ですが、最近色々なストア上で見るようになりました。<br>人気沸騰中ですね。</p><h2 id="h342f467cf9">テーマデフォルトの課題</h2><p>発売予告機能は、テーマのデフォルトの機能を使用することで実装することが可能です（後ほど紹介しますが、問題点は多々あります...）。<br>一つ目の方法は、『売り切れ戦法』になります。<br>商品を売り切れ状態にすることで、商品は購入できなくなりますがストア上には公開された状態になります。<br>この特性を活かして発売予告を実装するのが売り切れ戦法になります。<br>ただ、問題点としてカート追加ボタンの文言や価格の横の文言が売り切れ時の表示になってしまいます。<br>顧客からしたら、ただの売り切れ商品やんって感じになります（発売予告だと考える人は少ないでしょう）。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/d2e775efa9e74aa481b03fdb301d07ad/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2015.09.19.png" alt=""><br><br>二つ目の方法が、『公開日設定戦法』になります。<br>商品の管理画面には、『公開日を設定する』という機能があることはご存知でしょうか？<br>こちらの機能を使用すると、商品を公開する日を指定できます。<br>この機能なら発売予告できそうってなるじゃないですか。<br>できないんですよね...。というのもこちらの設定をすると商品は公開日時になるまでストア上には表示されなくなります。<br>つまり、顧客は発売前の商品の情報に触れることができないのです。<br><br>上記の課題を解決して発売予告機能をストアに導入するアプリがないか調査してみたところ『商品ページ発売予告アプリ｜リテリア Coming Soon』というアプリを発見しました。<br>このアプリは、最近Shopifyスタッフの推しアプリらしくShopify app store のスポットライトというコーナーに掲載されています。<br>人気沸騰中らしいですね！<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/80c1b63dbdb940fd9d6fde406dca7e99/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2019.38.50.png" alt=""></p><h2 id="h79d5b20af6">商品ページ発売予告アプリ｜リテリア Coming Soon</h2><p>このアプリのすごいところは、商品を購入できない状態でストアに公開することができる（発売予告機能を実装できる）点だけでなく、ボタンの文言や残り時間の表示、公開日時の表示などのカスタマイズ性が非常に豊富な点にあります。<br>発売日時設定した際のストア側の表示は以下の通りです。<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/8e56106dfdb04a07b8b0c1a6f3f7f38a/image.png" alt=""><br><br>主な機能は以下の通りです。<br>正直まだ使いこなせていない機能も何個かありまそうですが、設定操作自体はとても簡単でした。<br></p><ul><li>発売予定日時後のボタンのテキスト</li><li>発売予定日時後かつ在庫がない場合のボタンのテキスト</li><li>発売日時前のボタンのテキスト</li><li>ボタンテキストのサイズ設定</li><li>配色設定：ボタン背景色とボタンテキストの色</li><li>発売日時前のボタンに埋め込むURL（このURLにLINE公式アカウントの友達登録用リンクを埋め込んだりして集客に使用するみたいです）</li><li>発売日時の表示設定（以下に示した『画像_発売日時』の表示の設定が可能）</li><li>残り時間の表示設定（以下に示した『画像＿残り時間』の表示の設定が可能）</li></ul><p><br>（画像_発売日時）<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/7b4d22954f32415ab1bea604d7733bcf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2019.52.26.png" alt=""><br>（画像_残り時間）：毎秒カウントダウンされるようです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b34a889e73174cbd9541bfd035d52898/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2019.52.30.png" alt=""><br><br>最後に紹介した発売日時の表示と残り時間の表示については、色々なフォーマットがあるようですので、ストアによって柔軟に変更することができそうです１<br>多彩なカスタマイズができるのは嬉しいですね！<br><br>人気沸騰中の理由もわかる気がします。</p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br><a href="https://apps.shopify.com/shopify-application-314?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>より、アプリのストアに移動できます。<br>興味のある方は是非！</p><h2 id="he45680f0bc">参考記事</h2><p>▼ <strong>【Shopifyアプリ調査】Coming Soonアプリをストアに導入したら、案外よかった件 - zenn</strong><br><a href="https://zenn.dev/shopifyyoshi/articles/9f3aa6de5b40cd" target="_blank" rel="noopener noreferrer">https://zenn.dev/shopifyyoshi/articles/9f3aa6de5b40cd</a><br>▼Shopifyの商品詳細ページに発売予告機能を追加できるアプリ「リテリア Coming Soon」について解説<br><a href="https://www.re-terior.com/shopify-apps/reterior-coming-soon/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-coming-soon/guide</a></p>

【いい感じのShopifyアプリ見つけた日誌】人気沸騰中の発売予告アプリを使ってみた

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも。<br>本日は、ShopifyのテーマにLINE誘導ボタンを導入する方法を紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="hd57582ef86">LINE誘導ボタンとは</h2><p>LINEに誘導するためのボタンのことを『LINE誘導ボタン』と言います。<br>よくECサイトなどで右下の方に見かけるやつです。<br>以下の画像がわかりやすいかもです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/12dc989247334569bcf193c190c8b872/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2014.15.52.png" alt=""><br><br>LINE誘導ボタンがあるだけでも、顧客のLINE誘導率はかなり変わって来ると思います。そのため、マーケティングにLINEの公式アカウントを使用したいマーチャントの方にはドストライクな機能になります。<br>ただ、LINE誘導ボタンはテーマにはデフォルトで備わっていません。<br>そのため、実装しようと思ったらLiquid,HTML,CSSの技術が必須になってきます。</p><h2 id="hc4b18b1e05">調査</h2><p>流石にコーディングとなるとハードルが少し高い気がします。<br>何かいいアプリがないか調査を進めていたところ、以下のスクラップを発見。<br><a href="https://zenn.dev/kageyama/scraps/1aa6c7d8871c8e" target="_blank" rel="noopener noreferrer">https://zenn.dev/kageyama/scraps/1aa6c7d8871c8e</a><br>どうやら、LINE誘導用のフローティングボタンを導入できる『LINE誘導ボタンらくらく設置｜リテリア LINE誘導』というアプリがあるようです。<br>以下に掲載した制作会社さんのLPも参考にしてみましたところ、機能やサポートについて細かくまとめられていました。<br><a href="https://www.re-terior.com/shopify-apps/reteriro-line-button/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reteriro-line-button/guide</a><br></p><h2 id="h7b0126b929">LINE誘導ボタンらくらく設置｜リテリア LINE誘導</h2><p>このアプリを導入すると、Shopifyストア上の全ページでLINE誘導ボタンが表示されます。しかも、カスタマイズ性も高いためストアのデザイン性を損ねることなくLINE誘導ボタンを導入することが可能でした。<br>カスタマイズ内容は以下の通りです。<br></p><ul><li>LINEアイコン画像の挿入</li><li>リンク（友だち追加ページに飛ばすためのリンク）の挿入</li><li>アイコン画像の位置（画面のどの辺りに表示するか）</li><li>アイコンサイズ</li><li>吹き出しのテキスト</li><li>吹き出しの背景色・テキストカラー</li><li>テキストサイズ</li><li>吹き出しパディング</li><li>アイコンと吹き出しの余白</li></ul><p><br>サイズ変更系はPCとモバイルの両方を設定できるようになっています。<br>そのため、『モバイル時にアイコンがちょっと大きく感じる...。』といったサイズに関する問題が発生しません。<br>ありがたいですね。<br><br>リテリア LINE誘導を使用して実装したLINE誘導ボタンは以下の通りです。<br>（デモストアより拝借）<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/132be824d86445c3b01ddad716cdf9f8/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202022-05-27%2014.31.24.png" alt=""><br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br>興味のある方は、<a href="https://apps.shopify.com/reterior-line-icon-app?locale=jafrom=unblog" target="_blank" rel="noopener noreferrer">こちらのリンク</a>よりShopifyアプリストアページにアクセスできます。<br><br>そんじゃ、またね。</p>

【いい感じのShopifyアプリ見つけた日誌】LINE誘導ボタン編

<h2 id="h8d027c8ed3">はじめに</h2><p>どうも。<br>本日は、Shopifyのテーマに高カスタマイズ性のスライドショーを簡単に導入する方法を紹介します。<br>最後まで読んでいただけると幸いです。</p><h2 id="h7978d46dc0">テーマデフォルトスライドショーの課題</h2><p>Shopifyにてストア構築している際、デザインをいい感じにしようと思ったらスライドショーセクションは使いたいですよね。<br>ただ、テーマにデフォルトで備わっているスライドショーって意外とカスタマイズ性が限られてて、『思ったものと違う...。』ってなることもあります。<br>例えば、Dawnのスライドショーを見てみましょう。<br>自動スライドのアニメーションに注目してほしいです。<br>スライドショーが一周した際に左にスライド遷移します。（永遠に右側だけにスライド遷移するみたいな実装ができない）<br><br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/84f295460c2d4eafb9c7c9dbafda7ddc/0c10757f3231a4d51489ae11380c3ff2.gif" alt=""><br><br>また、Impulseというテーマを例に挙げると、ユーザー<u>が</u>スライドを一度でもタップすると自動スライドが途切れてしまうという使用があるようです。<br><br>こんな感じで痒いところに手が届かないことがあります。</p><h2 id="hdc5a0d9d11">コーディングによる実装</h2><p>コーディングによる実装が可能かどうか調査してみたところ、以下の記事を見つけました。</p><ul><li><a href="https://zenn.dev/eijijii/scraps/35806bac66dc15" target="_blank" rel="noopener noreferrer">https://zenn.dev/eijijii/scraps/35806bac66dc15</a></li><li><a href="https://unreact.jp/blog/about-slideshow" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/about-slideshow</a></li></ul><p>上記の記事ではslick というスライドショー作成用のライブラリを使用する方法が紹介されていました。<br>その他にもswiper.jsというライブラリを使用することによりスライドショーを実装できることがわかりました。<br>ですが、コーディングによる実装となると技術的な壁があります。<br>できるだけ、Shopify既存に近い機能で実装したいですよね。<br>そんな場合には、Shopifyアプリを使用しましょう。</p><h2 id="h78dca961f9">スライドショー挿入アプリ｜リテリア スライドショー</h2><p>痒いところに手が届く、高カスタマイズ性のスライドショーを実装する方法がないか調査してみたところ、『<a href="https://apps.shopify.com/shopify-application-339?locale=ja?from=unblog" target="_blank" rel="noopener noreferrer">スライドショー挿入｜リテリア スライドショー</a>』というアプリを見つけました。<br><br>このアプリにより、挿入されるスライドショーはかなりカスタマイズ性が高いです。<br>以下のカスタマイズが可能です。<br></p><ul><li>画像（4枚まで挿入可能→４ページのスライドショーを作成）</li><li>画像に対応したURLの埋め込み</li><li>スライド遷移ボタンのスタイル変更（3種類のスタイルがある）</li><li>インジケーターのスタイル変更（3種類のスライドがある）</li><li>オートスライド（ループ再生が可能＝ずっと右にスライドし続ける実装が可能）</li><li>アニメーション設定（5種類のアニメーションがある）</li><li>配色設定</li></ul><h3 id="hcf83e1357e"><br></h3><h2 id="h3b85771699">スライドショー実装例</h2><p>『スライドショー挿入｜リテリア スライドショー』にて実装したスライドショーを以下に示します。<br><br>実装例１）<br>アプリのデモストアより拝借。<br>和の雰囲気にぴったりなスライドショーです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/de36300ea5414aa99da82c46ac4ef10d/a25c8eaba2bdda8d5167e395df829029.gif" alt=""><br><br>実装例２）<br>カジュアルな画像には、カジュアルなスライド遷移ボタンを使用するといい感じになります。<br>また、暗めの画像なので配色設定で白色を選択してコントラストをはっきりさせました。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/94bdbbcfe54945edbf6e58f12e3ee4b3/8ed2e087493d516ada82722021a39a02.gif" alt=""><br><br>実装例３）<br>清楚なイメージ。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/ddfd64d669334c76a08951ee691a476f/aeb12b09a5912f2f4db3070f5ca1efb9.gif" alt=""><br>かなり多彩な表現が可能なので、カスタマイズしていてとても楽しいです。<br></p><h2 id="hcbec2bf0d9">終わりに</h2><p>最後まで読んでいただきありがとうございます。<br><a href="https://apps.shopify.com/shopify-application-339?locale=ja" target="_blank" rel="noopener noreferrer">こちらのリンク</a>より、アプリストアに移動できます。<br>興味のある方は是非どうぞ。<br></p><h2 id="he45680f0bc">参考記事</h2><ul><li><a href="https://zenn.dev/eijijii/scraps/35806bac66dc15" target="_blank" rel="noopener noreferrer">https://zenn.dev/eijijii/scraps/35806bac66dc15</a></li><li><a href="https://unreact.jp/blog/about-slideshow" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/about-slideshow</a></li><li><a href="https://www.re-terior.com/shopify-apps/reterior-slideshow/guide" target="_blank" rel="noopener noreferrer">https://www.re-terior.com/shopify-apps/reterior-slideshow/guide</a></li></ul>

【いい感じのShopifyアプリ見つけた日誌】高カスタマイズ性 スライドショー編

<p>この記事ではLiquidを勉強する上で多くの人がつまずいているであろうオブジェクトについて書いていこうと思います。<br>対象はLiquidについて少し勉強したけど、まだコードを書いたことない人やオブジェクトというものがあるのは知っているけどいまいち使い方がわからないという方です。<br>参考サイトはこちらです: <a href="https://unreact.jp/blog/liquid-reference-ja" target="_blank" rel="noopener noreferrer">https://unreact.jp/blog/liquid-reference-ja</a><br>それではさっそくメンタルモデルから見ていきましょう。<br></p><h2 id="hb82e74dd69">メンタルモデル</h2><p>今回はこのような手順でオブジェクトについて学習していきます。</p><ol><li>テンプレートを押さえよう</li><li>オブジェクトは大きく2種類に分けられる</li><li>実際に使ってみよう</li></ol><p><br></p><h2 id="h4fba561099">1.テンプレートを押さえよう</h2><p>Liquidのオブジェクトを理解するうえで実は大事なのがテンプレートです。<br>このテンプレートを知っているのと知らないのとではオブジェクト理解するスピードが大きく変わってきます。<br>テンプレートとは何か、それは簡単に言うならばブログやコレクションなどのページを作るときにベースとなるもので、テンプレートにはブログや商品、コレクション、ページなどいくつかの種類があります。そしてテンプレートをブログや商品、コレクション、ページなどに割り当てることで使用することができます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/0d8a85087bd14214acfea2ba3e9ed82a/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A%E3%81%AE%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%20(39).png" alt=""><br>（管理画面ではこの位置にあります。）<br>ではこれがなぜオブジェクトと関係があるのかと思ったんじゃないでしょうか。<br>実はオブジェクトは特定のテンプレートでしか使えないものが存在するのです。（正しくはどのテンプレートでも使えるものの方が少なく、特定のテンプレートでしか使えないものがほとんどです。）<br>次の章ではこれらのことについて書いていきます。<br></p><h2 id="hd5d41d3bb9">2.オブジェクトは大きく2種類に分けられる</h2><p>前回の章ではどのテンプレートでも使えるオブジェクトと特定のテンプレートでしか使えないオブジェクトがあるという話をしましたが、どのテンプレートでも使えるオブジェクトのことをGlobal objectsといいます。その他のオブジェクトはまとめて呼ばれることはなく、blog objectsやproduct objectsのように一つ一つ分けて呼ばれます。<br>それではそれぞれの特徴を見ていきましょう。</p><h3 id="h0afd508f74">Global objects</h3><ul><li>どのテンプレート（ページ）でも使える</li><li>handle（一意の値）と一緒に使う場合が多い</li></ul><p>以上よりGlobal objectsはホームページで商品を表示したいときや、コレクションページでブログを表示したいときなどに使います。</p><h3 id="hce455dec50">その他のobjects</h3><ul><li>特定のテンプレート（ページ）でしか使えない</li><li>テンプレートを割り当てることでhandle（一意の値）を使わずに特定の商品やブログのオブジェクトにアクセスできる</li></ul><p>以上よりその他のobjectsはブログテンプレートや商品テンプレートをはじめとするテンプレートの中で使います。<br></p><h2 id="h59ab1d472f">3.実際に使ってみよう</h2><p>この章では実際に使ってみようということでGlobal objectsとproduct objectsを用いて実際にコードを簡単に書いていこうと思います。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/6f51091d938049e5a47905c908d0f3d5/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-02%20173723.png" alt=""><br>商品の情報はこちらになります。handleは”tシャツ-白無地"です。<br><br>まずはホームページでGlobal objectsを使ってみます。</p><pre><code>&lt;div&gt;
&nbsp;&nbsp;&lt;img&nbsp;src="{{&nbsp;all_products['tシャツ-白無地'].featured_image&nbsp;|&nbsp;img_url:&nbsp;'master'&nbsp;}}"&gt;
&nbsp;&nbsp;{{&nbsp;all_products['tシャツ-白無地'].title&nbsp;}}
&lt;/div&gt;</code></pre><p>コードはこちらで画面にはこのように出力されます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/15e72a82cd39418a9f5a6adcade512e4/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-02%20175632.png" alt=""><br>Global objectsの<em><code>all</code></em><code>_</code><em><code>products</code></em><em>で全商品にアクセスしてhandleで特定の商品にアクセス、最後に</em><em><code>featured_image</code></em>や<em><code>title</code></em>で属性を指定することで、このように画面に出力されます。<br><br>次にブログページでproduct objectsを使ってみます。</p><pre><code>&lt;div&gt;
&nbsp;&nbsp;&lt;img&nbsp;src="{{&nbsp;product.featured_image&nbsp;|&nbsp;img_url:&nbsp;'master'&nbsp;}}"&gt;
&nbsp;&nbsp;{{&nbsp;product.title&nbsp;}}
&lt;/div&gt;</code></pre><p>コードはこちらで画面にはこのように出力されます。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/6dea916689844863b3edfb0a501ec8ed/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-09-02%20181515.png" alt=""><br>今回はproduct objectsなのでGlobal objectsとは違い商品に<em><code>product</code></em>で直でアクセスすることができ<em><code>title</code></em>などの属性を使うことができます。<br><br>見た目こそ同じですがロジックにはちゃんと違いがあるので、その違いをしっかりと理解し、オブジェクトを使い分けましょう。<br></p><h2 id="hf6ea353dc5">4.まとめ</h2><p>最後に今回の記事のおさらいをしましょう。</p><ul><li>オブジェクトは大きく2種類に分けられる</li><li>テンプレートによってオブジェクトを使い分ける</li></ul><p>この2つを覚えてLiquidマスターになりましょう！</p>

オブジェクトを理解してLiquidをマスターしよう！

<h2 id="h8d027c8ed3">はじめに</h2><p>この記事では今日から使えるshopifyのセクションを作る時のコツを紹介していこうと思います。<br>Tailwind cssを使って作っていくのでTailwind cssについて知らない人はぜひしらべてみてください！</p><h2 id="h8b0944c545">PART1 FLEX編</h2><p>今回から始まりますこの記事の記念すべき1回目の内容はFLEXです！<br>flex-directionを使って要素の並びを変えれるようなセクションを作っていきます。</p><h2 id="hb82e74dd69">メンタルモデル</h2><p>私が実際に作ったセクションを例にして紹介していきますので、まずは完成したものから見ていきましょう。<img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/13e92a403f204d9f926485f90b8bf6fd/blog-part1(1).png" alt=""><br>こちらが実際に私が作ったセクションです。こちらはノーコードの部分でテキストと画像の並びを変えられるようになっています。<br>ノーコードの部分はこちらです。<br><img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/3b7b2923e73f4f9f8b36e2bdb4b4848b/blog-part1(2).png" alt=""><br>この画像の一番下に見えます「パソコン時のテキストと画像の順番を指定してください」というところから実際にテキストと画像の並びを入れ替えることができます。</p><h2 id="hca179bc255">実践！</h2><p>ここからはコードを見ていきます。<br>今回大事になってくるのはsettingsのselectです。</p><pre><code>{
&nbsp;&nbsp;"type":&nbsp;"select",
&nbsp;&nbsp;"id":&nbsp;"contentFlex",
&nbsp;&nbsp;"label":&nbsp;"パソコン時のテキストと画像の順番を指定してください",
&nbsp;&nbsp;"options":&nbsp;[
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":&nbsp;"flex-row",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":&nbsp;"テキストが左、画像が右"
&nbsp;&nbsp;&nbsp;&nbsp;},
&nbsp;&nbsp;&nbsp;&nbsp;{
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":&nbsp;"flex-row-reverse",
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":&nbsp;"画像が左、テキストが右"
&nbsp;&nbsp;&nbsp;&nbsp;}
&nbsp;&nbsp;]
}</code></pre><p>こちらがsettingsの中のselectなんですが、selectはidで呼び出したときにoptionsの中のvalueを使うことができます。<br>そのためvalueにclass名を書くことで（今回はTailwind cssをつかっているので）ノーコードの部分のselectで選んだoptionが作動してvalueのcssがかかるという仕組みです。<br>なのでHTML部分には次のように書きます。(これはわかりやすく書いたもので実際のコードではありません)</p><pre><code>#クラスでselectのsettingsを呼び出しています。ここにはvalueの値が入ります。
&lt;div class="flex {{ section.settings.contentFlex }}"&gt;
  &lt;div&gt;
    &lt;p&gt;{{ section.settings.title }}&lt;/p&gt;#これはタイトルです。
    &lt;p&gt;{{ section.settings.text }}&lt;/p&gt;#これは中の文章です。
  &lt;/div&gt;
  &lt;img src="{{ section.settings.image | img_url: 'master' }}"&gt;#これは画像です。
&lt;/div&gt;</code></pre><p>このようにして親要素のclassでsettingsのselectを呼び出すことでoptionのvalueの値である"flex-row"や"flex-row-reverse"のcssがかかるというわけです。</p><h2 id="hb132567b8a">お疲れさまでした</h2><p>ここまで読んでいただきありがとうございます。<br>以上でshopify section作りのコツ PART1 FLEX編は終わりになります。お疲れさまでした！<br>このようにshopifyのLiquidという言語は奥が深いのでまだまだ学べることはたくさんあります。<br>私も記事をどんどん上げていこうと思っていますので、ぜひ読んでください。</p>

shopify セクション作りのコツ PART1 FLEX編

<h2 id="h8d027c8ed3">はじめに</h2><p>どうもどうも、じゅんきです。<br>今回はShopifyUnite 2021で発表された点を僕なりにまとめてみました。<br>初めに断っておきますが、今回の記事はカルピス記事です。<br>正直、僕はShopifyめちゃくちゃかまってるタイプじゃないですが、そんな僕でもすごいなと思った機能などを紹介していきます。</p><h2 id="h927c6e0cec">オンラインストア２.０</h2><p>まず、これはすごいと思った機能がこちらの「オンラインストア2.0」です。<br>以下Shopify.devからの引用です。（<a href="https://shopify.dev/themes/migration?shpxid=5c227764-B0D3-44D2-DD4E-18F2A6760031" target="_blank" rel="noopener noreferrer">https://shopify.dev/themes/migration?shpxid=5c227764-B0D3-44D2-DD4E-18F2A6760031</a>）</p><blockquote>Online Store 2.0では、テーマのほとんどのページに新規および既存のセクションを追加したり、Shopifyテーマエディターで任意のページからセクションを直接追加および削除したりできる新しい<a href="https://shopify.dev/themes/architecture/templates" target="_blank" rel="noopener noreferrer">JSONテンプレート形式</a>が導入されています。<br>この機能により、マーチャントは開発者に頼ることなく、ストアのより多くの側面をパーソナライズできます。また、開発者はより多くのモジュラーコンポーネントを使用して保守可能なテーマを構築できます。</blockquote><p>トップページだけでなく、他のページにおいても管理画面上からノーコードでセクションの編集が可能になったようですね。</p><h2 id="h4f44ff4ab8">Dawn</h2><p>こちらもShopify Storeからの引用です</p><blockquote>Dawnは、パフォーマンスの考え方に基づいて構築され、Online Store2.0で利用可能なすべての新機能を使用する<a style="color:inherit;background-color:#ffffff" href="https://utm.io/udrGd" target="_blank" rel="noopener noreferrer">最初のオープンソースリファレンステーマ</a>です。</blockquote><p>オンラインストア２.０で利用可能な機能を盛り込んだテーマのようです。<br>そのため、以下のように管理画面側から各ページにおいて静的セクションの追加が可能になっているようです。<br><br>										<img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/b62b39091bc04deabdb7ff3502a3d305/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-30%2017.36.38.png" alt=""><br>また、セクションのカスタマイズもかなり細かい部分までできるようになりました。<br>例えば、テキスト付き画像ですが、以前に比べて設定できる項目が増えています。<br>											<img src="https://images.microcms-assets.io/assets/f772f1225a7a4d20a85cc60a89d909a9/4c6cdb968dad49c7bc3690b34845888a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-06-30%2017.45.38.png" alt=""><br>ローコードで細かい見た目の調整ができる点から、マーチャントにとってUXが非常に高くなることが見込まれます。<br><br>さらに、Dawnは他のテーマに比べて読み込み速度が35％も早いというメリットもあるようです。</p><h2 id="h8674e21674">ShopifyとGitHubの提携</h2><p>これまでは、テーマファイルの管理となると<span style="color:#252525">Theme-kit によってローカルにファイルを取得し、別で Git 管理する必要がありました。</span><br><span style="color:#252525">ですが、Shopifyが公式にGitHubと提携したことでその管理が楽になるようです。</span></p><h2 id="h8de1d247a6">Hydrogen</h2><p>以下、Shopify公式のサイトからの引用です。（<a href="https://www.shopify.jp/blog/unite-2021" target="_blank" rel="noopener noreferrer">https://www.shopify.jp/blog/unite-2021</a>）</p><blockquote>カスタムストアフロントの構築を簡素化するReactフレームワーク「Hydrogen」を発表しました。「Hydrogen」には、カート、バリエーションピッカー、メディアギャラリーなどのコマース特化型のコンポーネントが含まれ、カスタムストアフロント構築の複雑な部分を解消します。開発者は、ブランドを際立たせる体験の構築に集中できるようになります。<br>同時に「Oxygen」も発表されました。これは、「Hydrogen」をShopifyで高速かつグローバルに直接ホストするため方法で、eコマース用に最適化されています。</blockquote><p>なんと、Reactのフレームワークが導入されるようです。元々、セクションやスニペットなど見た目とロジックをまとめて管理していたShopifyにとってReactのコンポーネント思想はすごくマッチしたんじゃないかと思います。<br>モダンフロントエンドの技術を導入したことで、パフォーマンス向上したと考えられます。</p><h2 id="hd6ec201213">Oxigen</h2><p><span style="color:#212326">Oxigenは、「Hydrogen」をShopifyで高速かつグローバルに直接ホストするための方法らしいです。</span></p><h2 id="hcbec2bf0d9">終わりに</h2><p>今回はカルピス記事になっちゃいました。<br>ですが、Shopifyにモダンフロントエンドの技術が組み込まれつつあることがお分かりいただけたと思います。</p><h2 id="h7605dc6208">参考文献</h2><p>・<a href="https://www.shopify.jp/blog/unite-2021" target="_blank" rel="noopener noreferrer">https://www.shopify.jp/blog/unite-2021</a><br>・<a href="https://rewired.cloud/2021/06/30/shopify-unite-2021/" target="_blank" rel="noopener noreferrer">https://rewired.cloud/2021/06/30/shopify-unite-2021/</a><br>・<a href="https://shopify.dev/hydrogen" target="_blank" rel="noopener noreferrer">https://shopify.dev/hydrogen</a></p>

【Shopify】日本製のレビューアプリについて徹底解説

Shopifyにセット販売を取り入れるメリットとアプリの使い方を解説

Shopifyでスライドショーを簡単に設置できるアプリを解説

【Shopifyアプリ】LINE誘導バー・送料無料バーを作成してみた

【Shopify 神アプリ紹介シリーズ】日本製フォントピッカーアプリを紹介していく

【いい感じのShopifyアプリ見つけた日誌】YouTube動画をストアに埋め込めるアプリを見つけた

【Shopify 神アプリ紹介シリーズ】デザインにこだわりたい人必見のセクション間余白調整アプリを紹介していく

【いい感じのShopifyアプリ見つけた日誌】クーポンコードを使用するフローをいい感じにしたい

【いい感じのShopifyアプリ見つけた日誌】日本語対応したレビューアプリを見つけたから共有したい

【いい感じのShopifyアプリ見つけた日誌】人気沸騰中の発売予告アプリを使ってみた

【いい感じのShopifyアプリ見つけた日誌】LINE誘導ボタン編

【いい感じのShopifyアプリ見つけた日誌】高カスタマイズ性スライドショー編

Tags

About this Blog

【Shopify】日本製のレビューアプリについて徹底解説

Shopifyにセット販売を取り入れるメリットとアプリの使い方を解説

Shopifyでスライドショーを簡単に設置できるアプリを解説

【Shopifyアプリ】LINE誘導バー・送料無料バーを作成してみた

【Shopify 神アプリ紹介シリーズ】日本製フォントピッカーアプリを紹介していく

【いい感じのShopifyアプリ見つけた日誌】YouTube動画をストアに埋め込めるアプリを見つけた

【Shopify 神アプリ紹介シリーズ】デザインにこだわりたい人必見のセクション間余白調整アプリを紹介していく

【いい感じのShopifyアプリ見つけた日誌】クーポンコードを使用するフローをいい感じにしたい

【いい感じのShopifyアプリ見つけた日誌】日本語対応したレビューアプリを見つけたから共有したい

【いい感じのShopifyアプリ見つけた日誌】人気沸騰中の発売予告アプリを使ってみた

【いい感じのShopifyアプリ見つけた日誌】LINE誘導ボタン編

【いい感じのShopifyアプリ見つけた日誌】高カスタマイズ性 スライドショー編

Tags

About this Blog

【いい感じのShopifyアプリ見つけた日誌】高カスタマイズ性スライドショー編