[Liquid]GETクエリの値を取得する｜hmeta
https://xxxx.myshopify.com/search?type=product のtypeの値を取得したい時のLiquidでの処理を紹介いたします。 下記コードをファイル名：snippets/function_get_query_value_by_key.liquidで保存します。 {%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%} {%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | replace:'\/','/' | replace:'%20',' ' | replace:'\u0026','&' -%} {%- assign ge
![[Liquid]GETクエリの値を取得する｜hmeta](https://cdn-ak-scissors.b.st-hatena.com/image/square/36d273e94fca45a6aa2f84fd6db957454739a30a/height=288;version=1;width=512/https%3A%2F%2Fassets.st-note.com%2Fproduction%2Fuploads%2Fimages%2F44645245%2Frectangle_large_type_2_b9322b8a71c86b84924747a44290e9d5.png%3Ffit%3Dbounds%26quality%3D85%26width%3D1280)
ブログ記事で、前の記事・次の記事ボタンを設置したい。
今見ているブログ記事のページから、前後のページ(古いor新しい記事)へ飛ぶボタンを設置したいです。 イメージはこんな感じです。 {%- if paginate.previous -%}/{%- if paginate.next -%}を使うのはなんとなくわかるのですが、、、。知識がなく、下手な質問で申し訳ありません。
【Shopify】トップページに商品のタグ一覧を表示する方法【重複なし】 | わやずぶろぐ
Shopifyで、トップページに商品のタグ一覧を重複なしで表示する方法の解説記事です。 かなりピンポイントの話ですが、一般化すると以下のようになるかと思います。 Liquidテンプレートにおいて、配列の中で重複したものを削除して表示する方法 PHPで言うところのarray_uniqueにあたります。 » array_unique Liquidでは同じような処理がなく、少し遠回りしなければなりません。 今回は、「Liquidで配列を作る、要素を追加する」を参考にさせてもらいました。 Liquidテンプレートには癖があり、慣れるまではひと苦労です。 以下の２つは、Liquidを理解するのに必須のサイトです。 Liquid template language（ShopifyによるLiquidの解説サイト）Shopify Cheat Sheet この記事を書いている私（わや@wayasblog）は
【Shopify】シンプルなページネーションを実装する【サンプルコードを日本語で解説】｜liquid note | 初学者向けShopify情報ブログ
ページネーションのサンプルコード 以下のページにサンプルコードが掲載されています。 https://shopify.github.io/liquid-code-examples/example/accessible-pagination <style> .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } </style> {%- paginate blog.articles by 5 -%} {%- for article in blog.articles -%} <!-- show blog article detail
【Shopify】新着情報・お知らせ一覧のセクションを作成する【簡単】｜liquid note | 初学者向けShopify情報ブログ
いわゆる新着情報が縦並びになってる「お知らせ一覧」って日本のサイト、特にコーポレートサイトだと定番のコンテンツですが、Shopifyのテーマではあまり見かけないですよね。（大抵は四角いブログ記事が横に3つ並ぶのが1種類用意されているだけ・・） ただ、案件としては、「ECにもコーポレートサイトの機能を持たせたい」とか「ニュースティッカーくらい普通にあるでしょ？」みたいな声をいただくことも多いです。。 そこで今回は、トップページにお知らせ一覧を追加するためのサンプルコードを作成してみました。 ▼今回作成するサンプル▼ 【まずはコピペ】トップページに「お知らせ一覧」のセクションを追加する まずは「オンラインストア」>「テーマ」を選択します。 次に編集するテーマの「アクション」から「コードを編集する」を選択します。 「新しいSectionを追加する」をクリックして、お知らせ一覧を表示するための場所
Shopifyで階層のあるパンくずリストを実装【サンプルコードあり】｜liquid note | 初学者向けShopify情報ブログ
特に国内向けストアだとご要望として多いのが「パンくずリスト」ですよね。 商品数やカテゴリが多い場合には確かにあると便利ですが、Shopifyのテーマでは基本的にデフォルトでは対応していません。 そこで今回は、Shopifyでパンくずリストを自力で実装する方法をご紹介します。 一番基本のパンくずリストの作り方 基本となるパンくずリストの作り方は、Shopifyの公式サイトでも紹介されています。 https://shopify.dev/tutorials/customize-theme-add-breadcrumbs 「breadcrumbs.liquid」みたいなスニペットを作って、以下のコードをコピペすればOKです。 {% unless template == 'index' or template == 'cart' or template == 'list-collections' %
【のし袋】Shopifyの商品詳細ページに任意のオプションを追加する方法 | HPcode（えいちぴーこーど）
Shopifyの商品購入時に任意のオプションを追加する方法を紹介します！ Shopifyには「Line Item Property」という任意のフォーム項目を追加する機能があらかじめ備わっているので、やり方を知っていれば簡単に実装することが可能です！ 今回は、日本でショップ運営するなら馴染み深いであろう「のし袋」のオプションを例に紹介していきます。公式の以下の記事をベースといるので、こちらも合わせてご覧ください！ → Shopifyテーマカスタマイズの三種の神器：Cart attributes、Line Item Property、Customer noteを使いこなそう！ のし袋オプションの完成形 各商品詳細ページに対して、「表書き」「名入れ」が入力できるようにカスタマイズしていきます。イメージとしては以下のような感じで、シンプルに「表書き」「名入れ」の入力欄が2つ追加されるような感じで
土屋鞄製造所（鞄工房土屋）
MAIL MAGAZINE 読み物としてお楽しみいただけるコンテンツや、最新の製品情報などをお届けしています。 ※プライバシーポリシーをよくお読みいただき、同意の上ご登録ください。
Shopifyテーマのカスタマイズ項目を作成する方法 | HPcode（えいちぴーこーど）
Shopifyテーマには、ユーザー自身がサイトのテキストやデザイン、配置等を自由に設定できる「カスタマイズ」と呼ばれる機能が備わっています。大きく分けると2つのカスタマイズがタブで分かれていることが分かります。 テーマ全体のカスタマイズ各セクションごとのカスタマイズ 以下はデフォルトテーマである「Debut」のカスタマイズ画面の画像です。 この上記のカスタマイズ項目はテンプレート側で自由に設定が可能なので、この記事ではテーマのカスタマイズ項目を独自に設定する方法を見てけたらと思います！ ※ この記事では項目の追加の方法だけ紹介しています。管理画面から設定した値を活用する方法する方法については別の記事で紹介していけたらと思っています。 テーマ全体のカスタマイズを設定する まずはテーマ全体をカスタマイズする項目を追加する方法について見ていきましょう。公式ドキュメントは以下のとおりです。 （公式
はじめてのShopifyのコーディングで注意する2ポイント | 東京のWeb制作会社 株式会社クーシー
はじめてのShopifyのコーディングで注意する2ポイント 目的別 システム開発 ECサイト ECサイト構築 先日案件にてShopifyのコーディング作業に携わりました。 Shopifyの需要は多くなってきていますが、情報がまだまだ少ないので、悪戦苦闘しながらの作業になりました。 （英語の情報が多く、日本語の情報は少ない） はじめに結論を言うと、今回ブログでお伝えしたい注意点は以下の2つになります。 開発作業の複数人展開は上書きに注意 画像ファイルの参照で1手間2手間かかる 前者は主に作業フローにおける注意点で、後者はコーディング上の注意点になります。 上記の要因には、Shopifyコーディングにおけるいくつかの特徴といえる部分が影響します。なぜそうなるか要因となるShopifyコーディングの特徴を合わせて解説します。 ローカル環境で動作確認ができない Shopifyが提供しているThem
ShopifyでCSSやJS、画像を読み込む方法
Shopifyでテーマフォルダに入れたCSSや画像ファイルを画面に表示する方法を解説します。 テーマフォルダ以外にも管理画面からアップロードしたファイルを読み込む方法についても解説します。 ShopifyでCSSやJSファイルを読み込む方法 cssやjsフォルダの読み込み方法は次の３つがあります。 テーマのassetsフォルダから読み込む 管理画面のファイルにアップロードしたものを読み込む 外部サーバーから読み込む テーマのassetsフォルダから読み込む テーマで使用するCSSやJavascriptファイルは通常assetsフォルダに入れて管理します。 assetsフォルダにあるcssファイルやjavascriptファイルを読み込むには、asset_urlフィルタを使います。 <link rel="stylesheet" href="{{ 'style.css' | asset_url
Shopify テーマに外部JSライブラリを追加する
外部JSライブラリを追加する方法前提として、Shopify Theme Kit で Shopify デフォルトの Debut テーマを編集する時のやり方です。Shopify Theme Kit についてはこちらの記事もご覧ください。 Shopify で外部JSライブラリを追加するには、まず追加したいJSファイルをテーマファイル内の assets/ ディレクトリに追加します。 この時、 assets/ ディレクトリにサブディレクトリは追加できないため、ディレクトリ直下に配置する必要があるところが注意点です。 例えば assets/scripts/vendor.js のようにJSファイルを配置した場合、theme deploy を実行すると以下のようなエラーが出ます。 17:35:23 [development] processing assets/scripts/vendor.js [dev
ChocolateyでCygwin（C:¥に）インストール・設定する - Qiita
普通にインストールするとProgram Filesにインストールされてしまうので、それを変更する Cygwinのインストール C:¥> cinst cygwin -o -ia "-q -N -R C:\ -l C:\Cygwin\packages --packages wget, tar, gawk, xz, bzip2, gcc-core -s http://ftp.iij.ad.jp/pub/cygwin/" -oでオプションを上書きすることを示す（OverrideArguments flag） -iaでオプションを上書きするインストールオプションを指定する（InstallArguments） シングルクオーテーションに囲まれた部分がCygwinに関連する部分で、例えば、 --packagesでパッケージも一緒に指定できる。 ちなみに %USERPROFILE%\AppData\Loc
ThemeKitの使い方（Shopify入門） | The FACTORY
【Shopify】Theme kit設定をしてローカル開発環境を整えよう！ Shopifyのテーマを開発・編集する上でネックとなるのが、下の画像のように管理画面からのコード編集ではないでしょうか。 今回は、Shopifyテーマを編集するための開発環境の作り方についてご紹介します。 今回ご紹介する方法でShopifyテーマ開発環境を整えると、以下のことが実現できるので、ぜひ試してみてください。 ・ローカル環境なので、いつも使っているエディタで編集できる！ 好みのエディタでTheme開発ができるので、スムーズに作業をこなすことができます。 ・ローカル環境とShopifyストアのThemeファイルのやりとりが簡単 ストアからのファイルのダウンロードやローカルで編集したファイルのストアへの反映がコマンドで簡単に実行することができます。 Shopifyローカル開発環境構築の流れ 大まかな流れは、以下
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Line Item Property – Shopify UI Elements Generator
How can I use the Blog object attributes `.previous_article` and `.next_article`?