CSS 商品一覧ページ
Q.商品一覧で並べ替えを非表示にするには?
記述するCSS
/*商品一覧で並べ替えを非表示*/ div.main.main--product-list section.__control div.__sort-control{display:none;}
カスタムCSSの設定は、デザイン > カスタムCSSのヘルプをご参照ください。
Q.商品一覧の商品画像で売り切れを表現するには?
記述するCSS
/* 商品一覧でのSOLD OUT表示を有効にする */
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout { display: block; }
.main.main--product-list section.__list.__list--row ul.__product li.__item.__is-soldout a table tr td.__photo .__soldout { display: block; }
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout:after { content: 'SOLD OUT' ;font-size: 1.3em; color: #fff;}
デフォルトではSOLD OUTの表記ですが赤字を変更することで文字列の変更が可能です。
カスタムCSSの設定は、デザイン > カスタムCSSのヘルプをご参照ください。
Q.商品一覧のno image を非表示にするには?
記述するCSS
/*商品一覧ページ ブロック表示 no image を非表示にする*/ body > div.wrapper.wrapper--column-2.wrapper--product-list > div > div > section.__list.__list--block.p-product-block > ul > li.__item > a > div.__photo.__is-noimage{display:none;} /*商品一覧ページ リスト表示 no image を非表示にする*/ body > div.wrapper.wrapper--column-2.wrapper--product-list > div > div > section.__list.__list--row > ul > li.__item > a > table > tbody > tr > td.__photo.__is-noimage{display:none;}
カスタムCSSの設定は、デザイン > カスタムCSSのヘルプをご参照ください。