EC-CUBE4では管理画面のコンテンツ管理機能を応用するとカテゴリページごとにコンテンツを追加できる。

説明は後で追加します。

category_contents.twig

{% if Category %}
    {% set category_block_name = 'Block/category_'~Category.id~'.twig' %}
    {{ include(category_block_name) }}
{% endif %}

ジェラートカテゴリのブロック

category_1.twig

<div class="ec-sliderRole"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>

category_1.twig

<div class="ec-pickupRole">

    <h2 class="ec-pickupRole__title">
        <picture>
        <source media="(max-width:768px)" srcset="/html/user_data/pickup_gelato_sp.png">
        <img src="/html/user_data/pickup_gelato_pc.png" alt="ジェラート特集">
        </picture>
    </h2>
    <p class="ec-pickupRole__description">
        カテゴリ一覧に静的HTMLを追加し、特集ページを作る方法です<br>
        picuture要素を使うことで、特集タイトル画像をPCとスマホで切り替えることができます。
    </p>
</div>

customize.css

img{
    max-width: 100%;
    height: auto;
}
.ec-pickupRole{
    width: 100%;
    max-width: 1130px;
    margin: 10px auto 30px;
}
.ec-pickupRole__title{
    margin-bottom: 20px;
}
.ec-pickupRole__description{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

アイスカテゴリのブロック

category_5.twig

<div class="ec-sliderRole"><img src="{{ asset('assets/img/top/img_hero_pc05.jpg') }}"></div>