Yuya M

ECサイト構築運営・創業などコンサルティングサービスなどなどを行っています。ビジネスプ…

Yuya M

ECサイト構築運営・創業などコンサルティングサービスなどなどを行っています。ビジネスプランの構築・見直しなどお手伝いしています。米国MBA(経営学修士)ホルダー。ウェブサイト構築やShopifyパートナーもやってます。

  • Shopifyテーマ Liquid言語のまとめ

    Shopifyテーマのカスタマイズや作成に必須なLiquid言語についてのまとめ。

Shopifyテーマ Chapter13 Liquidで便利なCSS hooks

Javascript hooks やWordpress のように、ShopifyにもCSSクラスをbody タグに動的に加えることができます。 bodyのクラスに現在のレンダリング中のテンプレートを加える<body class="{{ template | handlize }}"> 以前のチャプターでLiquidコードの{{ template }}をつかって現在使用中のテンプレート名を出力する方法を紹介しましたが、その応用です。 テンプレートによって下記のようにcla

Yuya M

    • Macでなるべくキーボードだけで操作する　−文章入力編１−　

      Macでなるべくキーボードだけで操作するシリーズ　−文章入力編１− です。このシリーズについての概要は「Macでなるべくキーボードだけで操作する方法vol0」をご覧ください。 この記事の目標なるべく効率よく文章入力できるようにする。 できるかぎりキーボードのホームポジションを崩さずに文字入力を行う。 こんな人におすすめ。 これまで文章を消すときにdelete キーを連打したり、編集したいところに行くのに矢印キーを連打してた。そんで消したくないものまで消してしまったりなん

      Yuya M

      • Macでなるべくキーボードだけで操作する方法vol0

        この記事シリーズについて目標 できる限りマウスやトラックパッドを使わずにキーボードで操作して効率化を目指す。 できる限りホームポジションから動かしたくない 環境 MacOS キーボードUS配列おすすめ こんな人におすすめ たくさん文字を書く いろいろリサーチしながら書く なるべく効率化したい マウスを使うと肩凝る トラックパッドつかうと指がなんかつかれる キーボードをカチャカチャするのがなんか好き この記事の方針たくさんショートカットを覚えるわけで

        Yuya M

        • Shopifyテーマ Chapter 11 画像の出力の仕方いろいろ

          このチャプターではテーマ上でどのように画像を表示するかをみていきます。 Shopifyでは画像をアップロードすると自動的にShopfiyのCDN(コンテンツデリバリーネットワーク)上に画像が保管されます。 そして下記のようなオブジェクトが画像CDNのリンクを含んでいます。 article collection image line_item product variant そしてLiquidではこれらのオブジェクトに含まれる画像URLを出力し、テーマ上で画像と

          Yuya M

        Shopifyテーマ Chapter13 Liquidで便利なCSS hooks

        Yuya M

        • Macでなるべくキーボードだけで操作する　−文章入力編１−　

          Yuya M

        • Macでなるべくキーボードだけで操作する方法vol0

          Yuya M

        • Shopifyテーマ Chapter 11 画像の出力の仕方いろいろ

          Yuya M

        マガジン

        • Shopifyテーマ Liquid言語のまとめ
          9本

        記事

          Shopifyテーマ Chapter 10 all_productsの使い方

          このチャプターではコレクションをループさせたりせず、もしくは商品ページ上でないところで、特定の商品情報にアクセスする方法を紹介します。 商品に直にアクセスするためにはall_productsのオブジェクトを使用します。例えば下記のような例です。 {{ all_products["coffee-cup"].title }} この記述方法はとてもシンプルでall_productsに商品のハンドルを上記のように[]で指定するだけです。 このようにして配列やディクショナリー内の

          Yuya M

          Shopifyテーマ Chapter 10 all_productsの使い方

          Yuya M

          Shopifyテーマ Chapter9 セクションとブロック

          Shopityテーマにおける｢セクション｣はページを構成するカスタマイズ可能な要素です。セクションはスニペットと似ていますが、セクションはShopifyのオンラインストアエディタでユーザーがコード編集を行うことなくカスタマイズを行うことができる仕組みになっています。 *オンラインストアエディタと英語では呼ばれていますが、日本語ではテーマエディタと呼ばれてるようです。 下記はセクションの特徴の概要です。 セクションはオンラインストアエディタでテンプレートに追加することがで

          Yuya M

          Shopifyテーマ Chapter9 セクションとブロック

          Yuya M

          Shopifyテーマ Chapter 8 スニペットの使い方

          以前のチャプターでも紹介しましたが、Shopifyでスニペットを使うにあたって下記の事を覚えておくとわかりやすいです。 スニペットは再利用するコードの塊をまとめたファイル。 スニペットはスニペットフォルダに格納します。 スニペットファイルには.liquidの拡張子をつけます。 スニペットファイルはストア全体を通して複数回使うコードに使われます。 テンプレート内で仕様するにはLiquidコードタグ{% render %}を使います。 使用するときに{% render

          Yuya M

          Shopifyテーマ Chapter 8 スニペットの使い方

          Yuya M

          Shopify テーマ Chapter7 リンクリスト

          リンクリストはShopifyの特定のページにアクセスするためのリンクのリストです。 リンクはページ・コレクション・商品などのページへアクセスさせることができます。 リンクリストは階層構造にすることができ、Shopifyの管理画面で設定することができます。 メニューの作成Shopifyの管理画面上の｢オンラインストア>メニュー｣を選択するとメニューとなるリンクリストを作成することができます。 デフォルトではメインメニューと名前の付けられたリンクリストがあります。基本時にこの

          Yuya M

          Shopify テーマ Chapter7 リンクリスト

          Yuya M

          Shopifyテーマ Chapter6 オルタネイトレイアウト

          チャプター5ではオルタネイトテンプレートの作り方をみました。今回はLiquidのレイアウトファイルをみてみます。 デフォルトのレイアウトファイル theme.liquidShopifyのテーマのデフォルトのレイアウトファイルはtheme.liquidというファイルでレイアウトのフォルダーの中に入っています。 このtheme.liquidレイアウトファイルはShopifyテーマの｢マスター｣テンプレートのようなものです。このtheme.liquidファイルが他のすべてのテン

          Yuya M

          Shopifyテーマ Chapter6 オルタネイトレイアウト

          Yuya M

          M1・M2 Macbook 環境でのVSCodeでNEOVIM

          M2チップのMac book airを購入。色々インストールし直し。 ところがVSCodeでNEOVIMが動かなくなったので、なんとかしてたら無事動いたので覚書。(なんとかなーれ) 環境本体: M2 Mac Book air 2022 (おそらくAppleシリコンチップのMac全般だと思われる) コードエディタ: VS Code プラグイン: VSCode Neovim by Alexey Svetliakov氏 目的M2 Mac book 環境のV

          Yuya M

          M1・M2 Macbook 環境でのVSCodeでNEOVIM

          Yuya M

          Shopiyテーマ Chapter 5 オルタネイトテンプレート

          Shopify テーマのファイル構成を見た時、最初は collection や product ページはそれぞれ一つだけのファイルに対応させているように見えるからもしれません。 ですが、Shopify では、複数のバリエーションファイル(オルタネイトテンプレート)を作り、別のファイル指定してレンダリングさせることが可能です。 例えば T シャツの商品群には A の liquid ファイルを、ズボンの商品群には別のレイアウトの B の liquid ファイルを、、という具合に

          Yuya M

          Shopiyテーマ Chapter 5 オルタネイトテンプレート

          Yuya M

          Shopifyテーマ Chapter4 商品ページ

          これまでのチャプターではShopifyのテンプレートファイルがどのようなURLでレンダリングされるかを見てきました。今回はproduct.liquidファイルについてみていきます。 商品ページのレンダリングサイト訪問者が商品ページをみたときにはproduct.liquidのliquidコードファイルがデフォルトでレンダリングされます。また別バージョンの商品ページ用のファイルを作り、商品によって別のデザインのページを表示させることも可能です。 *OS2.0仕様では、オンライン

          Yuya M

          Shopifyテーマ Chapter4 商品ページ

          Yuya M

          ShopifyテーマChapter3 LiquidファイルとURLの連携

          Shopify上で、Liquidファイルはそのフォルダ構成やファイル名によって、どのファイルがどのページやURLで表示されるかがあらかじめ決められています。 まずどのフォルダがどういった場合に使われるかを知る。 そして、その中のどのファイルがどのページで表示されるかを見ていきましょう。 URLテンプレートマッピングShopifyは独自のルーティング(URLとの紐付け)構造が設定されていて、ユーザーがリクエストするURLによってどのLiquidファイルがレンダリングされるかが

          Yuya M

          ShopifyテーマChapter3 LiquidファイルとURLの連携

          Yuya M

          Shopifyテーマ Chapter2 テーマ開発・編集のツール

          Shopifyでは管理画面からテーマのカスタマイズやLiquidコード直接編集することができます。(オンラインストアエディタとオンラインコードエディタ) ただし、より複雑なカスタマイズを行う・Shopiyテーマをイチから開発するにはローカル環境で高機能なテキストエディタやIDEを使用したほうが便利です。 Shopifyではローカル環境でのShopifyテーマの開発やLiquidコードのカスタマイズが行いやすいように2つのツールを用意してくれています。 Theme ki

          Yuya M

          Shopifyテーマ Chapter2 テーマ開発・編集のツール

          Yuya M

          Shopifyテーマ Chapter1 Liquidコードの基本

          Shopify のLiquid イントロダクションLiquid とはShopifyのテーマに使われるプログラミング言語の一つです。正確にはテンプレート言語というカテゴリになります。Shopifyストアのデータとストアのデザイン構成(HTML・CSS)を橋渡しするために使われます。これにより、Shopify管理画面で登録した商品や画像のデータをECストア上に表示することができます。 チャプター1 Liquid についての概要Liquid はテンプレート言語またテンプレートエ

          Yuya M

          Shopifyテーマ Chapter1 Liquidコードの基本

          Yuya M

          Noteはじめてみました。

          前々から興味はあったけど、なかなか手をつけずにいたnoteはじめてみました。 自己紹介EC構築やビジネスサポートのコンサルティングやっています。米国MBAホルダー。Shopifyパートナー。あと海外との連絡やりとり支援や翻訳的なことも。 ウェブサイト構築なども。 noteで書いてこうかなと思っていること①最近ハマっているMacでの作業効率化 Macを使い始めて長いけど、まだまだ使いこなせてないことや、作業効率化のTipsなんかの覚書を書いていこうかなと。 なかなか日本語

          Yuya M

          Noteはじめてみました。

          Yuya M