Shopifyブログ

Shopifyでフォント追加（Webfontの読み込み方）

今回は、ShopifyでWebfontの読み込み方を備忘録として残します。 メイリオを読み込む場合、メイリオのwoffファイルを手に入れます。 基本的にはWindowsPCに入っているのでそのファイルを利用します。 形式がttcファイルなど、woffファイルでない場合は、オンライン上で変換できるWebサービスが無料で存在するので、 そちらで変換してください。 ttcからttfへの変換は以下のサイトhttps://transfonter.org/ttc-unpack ttfからwoffへの変換は以下のサイトhttps://convertio.co/ja/ttf-woff/ woffファイルを手に入れたら、Shopifyの管理画面にログインし、コンテンツ管理のファイルにUPします。 開発している身からするとテーマ内のassetsディレクトリ以下に設置したくなりますが、 どうもassetsでは文字コードの都合で正しく認識できないようです。 （しっかり確認した訳ではないですが、海外の記事に上記内容の投稿があったので今回はファイルにUPしています） 以下のように、CSSを記述します。 @font-face { font-family: "Meiryo"; font-style: normal; font-weight: 400; src: url("https://cdn.shopify.com/s/files/1/000/000/000/files/Meiryo-01.woff;) format("woff"); } 今回はメイリオを読み込みたいので上記の内容にしています。srcのurl内にファイルのURLを記述しています。

Downの特集コレクションの表示商品数の上限を増やすコード

ShopifyのDawnテーマにある「特集コレクション」featured-collection.liquidはデフォルトの状態だと12件、コードを触っても最大50件までしかコレクションのアイテムを表示させることができません。 今回は特集コレクションを応用して、全ての商品を50件以上表示させてみました。 featured-collection.liquidをみると54行目から69行目に以下のコードがあるはずです。 {%- for product in section.settings.collection.products limit: section.settings.products_to_show -%} <li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider %} slider__slide{% endif %}"> {% render 'card-product', card_product: product, media_aspect_ratio:...

NoSleep.jsでスマートフォン用Webサイトのスリープを制御した

今回はNosllep.jsというライブラリを使用したので、備忘録として記録します。 「Nosleep.js」は、Webページやモバイルアプリケーションなどのブラウザベースのアプリケーションでスリープモードを回避するためのJavaScriptライブラリです。 通常、ブラウザは一定時間経過すると自動的にスリープモードに入ります。しかし、動画再生や長時間の操作など、特定の条件下ではスリープモードを回避したい場合があります。このような場合、Nosleep.jsを使用することでスリープモードを回避することができます。 Nosleep.jsは、スリープモードを回避するためのAPIを提供しており、必要に応じてスリープモードを無効化することができます。また、スリープモードを無効化した後は、ユーザーが操作していなくても自動的にスリープモードに入るように戻すこともできます。 Nosleep.jsは、主にWeb開発者やモバイルアプリ開発者に利用されています。特に、長時間の操作が必要なアプリケーションや、動画再生アプリなどで活用されています。 Githubhttps://github.com/richtr/NoSleep.js/ ライブデモサイトhttps://richtr.github.io/NoSleep.js/example/ CDNは以下を使用しました。 <script src="https://cdnjs.cloudflare.com/ajax/libs/nosleep/0.12.0/NoSleep.min.js"></script>< JSはデモサイトのコードを使用し、トグルボタンとJSを組み合わせてコードを書きました。 うまく実装できていれば、コンソールログに「Wake Lock active.」,「Wake Lock released.」 が表示されます。

Shopifyでリッチテキストのメタフィールドをフロントに表示するコードの紹介

今回はShopifyで2023年に追加されたリッチテキストというメタフィールドをフロントに表示するコードを紹介します。 まずは管理画面でメタフィールドを設定し、テキストを入力し保存します。 ブログ記事内で以下のコードを貼り付けます。 <section> <div> {% assign data = article.metafields.custom.cooking_intro.value %} {% for child in data.children %} {% if child.type == "heading" %} <h{{ child.level }}>{{ child.children[0].value }}</h{{ child.level }}>...

CSSをSCSSに変換してくれるオンラインサイトの紹介

今回はCSSをSCSSにコンバートしてくれるWebサイトを紹介します。それがこちらhttps://www.cssportal.com/css-to-scss/このサイトには他にもCSSに関連するツールがありますので、よかったら活用ください。

Collectionでバリエーションごとの在庫数を合計して表示するコードの紹介

ShopifyテーマのDawnのコレクション部分に、各商品内のバリエーションごとの在庫数を合計して、全バリエーションの在庫の合計が1であれば赤色で表示させるコードを紹介します。 コレクションで各バリエーションの在庫数を計算し、残り1点の商品のみ表示させるのに時間がかかったので備忘録として記録します。完成すると以下のような見た目になります。 {% assign results = "" %} {% for var in card_product.variants %} {% assign results = results | append: var.inventory_quantity | append: "," %} {% endfor %} {%...