ブログ

Shopifyで商品を並び替える仕組みとJavaScriptで動的にソートする方法まとめ

Shpifyでは商品一覧はURLのパラメーターで並び替えができるようになっています。この記事では どういった並び替えの方法があるのか ドロップダウンリスト等から動的に変更する方法 タグで絞り込む方法 …

【どちらを選ぶ?】ShopifyとBASEを比較して選ぶ基準をまとめました

国内でネットショップを開設しようと検討したときにまず出てくるのはBASEかと思います。一方の海外ではShopifyが選択肢に上がりやすいです。 Shopifyは2018年に日本に参入して以来、どんどん…

Shopifyテーマのカスタマイズ項目を作成する方法

Shopifyテーマには、ユーザー自身がサイトのテキストやデザイン、配置等を自由に設定できる「カスタマイズ」と呼ばれる機能が備わっています。大きく分けると2つのカスタマイズがタブで分かれていることが分…

Shopifyカスタマイズには欠かせないLiquid言語の基本構文のまとめ

Shpifyのテンプレートを編集際に馴染みのないliquidという言語に出会うかと思います。他のプログラミング言語をかじった方でしたらすぐ理解できるかと思いますが、liquidなりの書き方のルールが決…

Shopifyスターターテーマの導入と各テンプレートの役割を理解する

この記事では自作テーマの方法について紹介していきます。自作のテーマを使う機会はShopidyだとあまりないかもしれませんが、例えば以下のようなケースで疲れることも考えられます。 他のネットショップから…

JavaScriptの非同期について理解する!【Promise、async / await】

JavaScriptを勉強していくと突き当たる壁として非同期処理の理解があるかと思います。わたしもぶち当たり → 分からかないから放置していると、またぶち当たり、を繰り返していくうちに覚えていきました…

Shopifyのテンプレートをローカル環境でカスタマイズする方法

Shopifyのテンプレートをローカル環境でカスタマイズする方法です。テンプレートのカスタマイズはShopiyの管理画面のオンライン上で編集も可能ですが、慣れたエディタで編集した方がはかどる場合もある…

webpackでEJSをコンパイルする方法

webpackでEJSをコンパイルする方法です!「Sassの出力をファイルを分離してCSSファイルを作成する」のように、webpackはHTMLファイルを生成することも可能となっています。 webpa…

webpackで画像を圧縮する方法

webpackで画像を圧縮する方法です。流れとしては、公開用フォルダに移動させてそちらのファイルを圧縮するといった形となります。 拡張させるだけの簡単作業なのでぜひ取り入れて見てください! なお、we…

【コーダー向け】webpackでSassをコンパイルする方法

webpackでSassをコンパイルする方法です。webpackはHTMLコーダーにあまり優しくない印象(偏見)がありましたが、結論から言うとやりたいことは十分にやらせてくれます。 具体的に実際にやっ…