shopifyのDebutテーマカスタマイズ体験記

55168 ワード
テキストリンク

今、shopifyのDebutテーマのカスタマイズの仕事を請け負っています。
その中で経験したことを私自身の備忘録の意味も込めて、ここに記録します。
随時記事の内容を追記していきたいと思っています。

Debutテーマ

セクションのヘッダー見出し

何故かセクションのタイトルの上にかぶさるように、グレーで要素が塗りつぶされている感じがありました。
このように、修正しました。
custom.cssの392行目
.section-header:before{content: '';width: 100vw;height: 100%;position: absolute;top: 0;left: 0;background-color: #1d1d1f;のbackground-color: #1d1d1f;を削除します。

/*Section Header CSS Starts*/
.section-header{padding: 50px 0px;position: relative;}
.section-header:before{content: '';width: 100vw;height: 100%;position: absolute;top: 0;left: 0;background-color: #1d1d1f;

を下記のように修正します。

/*Section Header CSS Starts*/
.section-header{padding: 50px 0px;position: relative;}
.section-header:before{content: '';width: 100vw;height: 100%;position: absolute;top: 0;left: 0;

コレクションリストの表示順番を任意のものにしたい

コレクションリストは、アルファベット順など決まった規則の中で、並べ替えができます。
でも、ショップの事情に合わせてコレクションを表示する順番を変えたいときは、下記のようにします。

下記の公式の記事を参考にします。

https://help.shopify.com/ja/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/change-collections-page

私の場合は、slide-category.liquidを修正しました。

            <div class="collections-box-main">

                <div class="collections-box-outer">

                    <div id="owl-example1" class="owl-carousel">
                        {%- for collection in collections -%}
                        <div class="collections-box">
                            <div class="collections-box-inner">
                                <!--
                              These control flow tags check to see if there is a featured image for a collection.
                              If there isn't one, then we assign the image from the first product in the collection.
                            -->

下記のように修正しました。

            <div class="collections-box-main">

                <div class="collections-box-outer">

                    <div id="owl-example1" class="owl-carousel">
                        {% for link in linklists.all-collections.links %}
                        {% assign collection = link.object %}
                        <div class="collections-box">
                            <div class="collections-box-inner">
                                <!--
                              These control flow tags check to see if there is a featured image for a collection.
                              If there isn't one, then we assign the image from the first product in the collection.
                            -->

all-collectionsが、追加したメニューの名前です。

Boxes Sectionの画像を入れ替える

custom.cssの下記の行を修正します。

.boxes-box-2 .boxes-box-inner{background-image: url("box-2.jpg");}

box-2.jpgが、要素の背景画像です。
box-2.jpgは、左から2つ目の画像という意味です。

フッターのカスタマイズ

フッターのメニューの項目を入れかる場合は、安全策として元々有るフッターメニューを名前を変えて残しておくのが良いと思います。
ただし、ハンドル名に気をつけてください。

こちらの投稿のように、

<div class="col-xl-4 col-12">
    <div class="footer-box footer-box-3">
        <div class="footer-box-inner">

            <div id="accordion3">
                <div class="card__">
                    <div class="card-header__" id="heading3">
                        <h5>
                            <button class="btn btn-link" data-toggle="collapse" data-target="#collapse3" aria-expanded="true" aria-controls="collapse3">
                               メニュータイトル
                            </button>
                        </h5>
                    </div>

                    <div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordion3">
                        <div class="card-body_">

                            <nav role="navigation">
                                <ul>
                                    {%- for link in linklists.link-list-3.links -%}
                                    <li>
                                        <a href="{{ link.url }}" {% if
                                        link.active %}aria-current="page" class="active"{% endif %}>
                                        {{ link.title }}
                                        </a>
                                    </li>
                                    {%- endfor -%}
                                </ul>
                            </nav>

                        </div>
                    </div>
                </div>


            </div>


        </div>
    </div>
</div>

下記のコードのlink-list-3の部分が、ハンドル名になります。
新しくフッターメニューを作った際は、ツイートに有る画像のようにハンドル名を確認してください。
そして、もし既存のメニューを入れ替えるなら、ハンドル名を入れ替えてください。

ショッピングセクションの内容を変える

こちらに記事を投稿しています。

https://community.shopify.com/c/shopify-テーマ/featured-sectionに入力しても再読込されて反映されない/td-p/1581738

メニューで作ったものを表示

collection2という名前のハンドルのメニューの中身を表示

{% for link in linklists.collection2.links %}			
{% assign collection = link.object %}

メニューを左から右に出てくるようにする

    function closeMobileNav() {
        theme.Helpers.prepareTransition(cache.mobileNavContainer);
        cache.mobileNavContainer.classList.remove(classes.navOpen);
        cache.mobileNavContainer.style.transform = 'translateY(-100%)';
        cache.pageContainer.setAttribute('style', '');

の

        cache.mobileNavContainer.style.transform = 'translateX(-100%)';

をtranslateYからtranslateXに書きまえます。

CSSも、変更します。

/*================ Mobile nav wrapper ================*/
.mobile-nav-wrapper {
  -ms-transform: translateY(-100%);
  -webkit-transform: transateY(-100%);
  transform: translateY(-100%);
  position: absolute;
  top: 0;
  left: 0;

translateYをtranslateXに、書き換えます。
このときに、translateYを書き換えすぎないように、気をつけると良いです。
余分な場所の偏移に影響ないように、気をつけましよう。

特定のコレクションの商品から一つを表示して、３つのコレクションを表示する

{% assign cn-name = "hoge1, hoge2, hoge3" | split: ", "%}
             {% assign cn-cont = 0 %} 

            <div class="collections-box-main">

                <div class="collections-box-outer">
                    <div id="owl-example2" class="owl-carousel">
                        {% for cn-h in cn-name %}
                            
                                {% assign product  = collections[cn-h] %}
                                 <!-- 
                                 <h3 class="product-title">{{ product.title }}</h3>
                                 -->
                                 <a href="{{ product.url }}"><img src="{{ product.featured_image | img_url:'300x' }}"></a>
                               
                              
                        {% endfor %}

                    </div>


                </div>



            </div>

hoge1から３に、表示したいコレクションのハンドル名を設定します。
category セクションというものをカスタマイズして、3種類のコレクションの商品を表示する内容のソースコードです。
この部分をカスタマイズすると、応用できると思います。

JSONでエラーが出るとき

今回feature-section.liquidとshipping-section.liquidの更新が上手く行かず、数日悩んでいました。
feature-section.liquidを書き換えるとshipping-section.liquidの書き換えた内容が元にもどってしまう。または、その逆もあるということで、何度試しても、解決しなかったのです。
今回、ふと閃いて新しいDebutの新しいバージョンから、footerのschemaをコピーして、今編集しているfooterに貼り付けました。
今編集しているfooterには、schemaが無かったのです。
その影響で、settings_data.jsonでエラーが出ていたようです。
footerのschemaを修正したら、settings_data.jsonのエラーも無くなりました。

feature sectionのカルーセルのJavaScript

swiperを実装

クライアントが参考にしてほしいと言ったサイトで使っているスライドショーのプログラムが、分かりました。
HTMLのクラス名で、検索して見つけました。

https://www.oosaka-web.jp/column/web/161117/
下記のサイトにあるサンプルコードで、動きました。
https://haniwaman.com/swiper/

index.liquidに、記載しました。
一行目は、最初からあるコードです。

{{ content_for_index }}



<!--  Swiper -->
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>


<!-- Initialize Swiper -->
<script type="text/JavaScript">
    const swiper = new Swiper('.swiper-container', {
        // Optional parameters
        direction: 'horizontal',
        // Navigation arrows
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }

    });
</script>

theme.liquidのheader内

<!--  Swiper -->
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">

<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

矢印のカスタマイズは、こちらの方が分かりやすいと思います。

https://web-saku.net/swiper_introduction/

ナビゲーションの文字の大きさが変わらない時は、こちらの記事を参考にすると良いです。

https://qiita.com/morioka1206/items/95985b1f2db3ea43991c

Font Awesomeのアイコンを使い、ナビゲーションのアイコンを小さくして実装しました。

   /*  swiper */
    .swiper-button-prev,
    .swiper-button-next {
       	background-image: none; 
        width: 32px; 
        height: 32px; 
        color:#000;
    }
/*アイコンのセット*/
.swiper-button-prev:before {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f104';
    font-size: 20px;

}
/*アイコンのセット*/
.swiper-button-next:before {
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: '\f105'; 
    font-size: 20px;
	
}
/*初期のアイコンを消す*/
.swiper-button-prev::after {
		content: "";
}
/*初期のアイコンを消す*/
.swiper-button-next::after {
		content: "";
}

ヘッダーのグラデーション

クラスタ名は、テーマによって異なると思います。
それぞれの環境に合わせて、修正してください。
上が黒です。
上から下に向かって、透明グラデーションになっています。

body.template-index #shopify-section-header{
    background: linear-gradient(180deg, #000 30%,transparent 100%) !important;

}

iPhone12 で上下左右5pxの余白で画像を掲載

iPhone PROと、その他のiPhone12と画面サイズを分けて対応しました。

 @media screen and (max-width: 428px) {
        .boxes-box2-1 .boxes-box-inner {
                width: 418px;

                /*
                width: 320px;
                height: 427p/*
                */
                text-align: center;
                margin: 5px 5px 2px 5px;
                aspect-ratio: 3/4;
            }   
        .boxes-box2-2 .boxes-box-inner{
                 width: 418px;               
                /*
                width: 320px;
                height: 427px;
                */

                text-align: center;
                margin: 3px 5px 2px 5px; 
                aspect-ratio: 3/4;     
            }
        .boxes-box2-3 .boxes-box-inner{
                 width: 418px;               
                /*
                width: 320px;
                height: 427px;
                */

                text-align: center;
                margin: 3px 5px 5px 5px;
                aspect-ratio: 3/4;
            }
}
  @media screen and (max-width: 390px) {
        .boxes-box2-1 .boxes-box-inner {
                width: 380px;

                /*
                width: 320px;
                height: 427p/*
                */
                text-align: center;
                margin: 5px 5px 2px 5px;
                aspect-ratio: 3/4;
            }   
        .boxes-box2-2 .boxes-box-inner{
                 width: 380px;               
                /*
                width: 320px;
                height: 427px;
                */

                text-align: center;
                margin: 3px 5px 2px 5px; 
                aspect-ratio: 3/4;     
            }
        .boxes-box2-3 .boxes-box-inner{
                 width: 380px;               
                /*
                width: 320px;
                height: 427px;
                */

                text-align: center;
                margin: 3px 5px 5px 5px;
                aspect-ratio: 3/4;
            }
}

ヘッダーグラデーション

パソコン版できれいにグラデーションできるのに、スマホの画面でグラデーションが反映されない時は、下の要素のmarginを確認してみましょう。
私は、上書きされていると思い、必死に要素を探していました。
でも、動きをよく見たら、本当のBodyの背景色だったのです。

    .slideshow--large {
        min-height: 100vh !important;
        /*margin-top: 112px;*/
        height: auto !important;
    }

collectionの画像サイズの変更

商品一覧の画像サイズを変更したい時は、こちらのクラス名に指定されている高さを調整すると良いようです。
ここに掲載している数値は、変更後の値です。

 .product-card .grid-view-item__image-wrapper .grid-view-item__image{height: 234.367px;}

shopifyのテーマ更新の注意点

shopifyのテーマですが、ソースコードを修正してカスタマイズした場合は、自動でテーマの更新が出来ないことを知りました。

https://help.shopify.com/ja/manual/online-store/themes/managing-themes/updating-themes

希望のスライダーのボタン

https://torublog.com/shopify-slideshow-swiper-js/

ウェブのテーマエディタを使ったカスタマイズの場合は、テーマの新しいバージョンを選択することで、自動で更新が反映されます。
でも、ソースコードを修正してカスタマイズした場合は、テーマをダウンロードして手動でカスタマイズの内容を反映させる必要があります。
だから、GitHubを使うのかもしれないですね。

Python -ifについて-
clue / log パッケージ