Help us understand the problem. What is going on with this article?

Shopifyのテーマの編集方法 ~随時更新~

自分のメモ用ですが、参考になれば幸いです.

フォルダ構成

上から順に大きいコンポーネント. 拡張子liquidはrubyの文法で書かれています.
*初めてや!って人はrailsいじってからやるといいかも。
Layout
Template
Section
Snippet

Javascript

Assets配下に設置
以下でinclude

<script src="{{ 'header_common.js' | asset_url }}" defer="defer"></script>

CSS

Assets配下に設置
以下でinclude

{{ 'header.scss' | asset_url  | stylesheet_tag }}

テーマのCSSを変えたい

プレビュー表示から、編集したい要素のclassを探す
theme.scss.liquid内で該当クラスを探す
中身をいじる!

テンプレート

自分でテンプレートを作ってもOK.
その際は、下記のようにすると適応できる。
この場合は、sectionフォルダから該当ファイルがあれば、見つけてレンダリング.

{% section 'header' %}
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした