Guides

Use Shop Builder edit store level setting new products features for product displaying

Suggest Edits

簡介

此文件提供 Layout engine 店家，於前台顯示 SHOP Builder > Store Level Settings > Products 以下 新設定項 效果的 Liquid 更新指引

  1. 規格圖片顯示樣式（套用於 PDP, PLP, 進階分頁中的商品元件, 促銷活動頁）
    1. 規格圖型狀
    2. 規格圖大小
  2. 商品名稱文字對齊（套用於 PDP, PLP, 進階分頁中的商品元件, 促銷活動頁）
  3. 自訂標籤樣式（套用於 PLP, 進階分頁中的商品元件, 促銷活動頁）
  4. 商品分類總數量（套用於 PLP, 促銷活動頁）

前往 ADMIN > HTML editor 編輯

1. promotion_page.liquid

步驟一: 搜尋 promotion_page.liquid
步驟二: 找出 <h1 class="Label" ng-non-bindable>{{ promotion.title }}</h1> 或是 <h2 class="Label" ng-non-bindable>{{ promotion.title }}</h2>
步驟三: 將其改成下列程式碼

<h1 class="Label" ng-non-bindable>
  {{ promotion.title }}
  {% if theme.settings.show_products_total %}
    {% assign products_total = paginate.total | default: 0 %}
    <span class="ProductList-total">{{ 'shopline_translations.themes.products.total' | translate: total: products_total }}</span>
  {% endif %}
</h1>

2. product_detail.liquid

步驟一: 搜尋 product_detail.liquid
步驟二: 找出 <div class="product-detail-actions">
步驟三: 將其改成下列程式碼

<div class="product-detail-actions {% if theme.settings.variation_image_style %} --plp-variant-image-{{ theme.settings.variation_image_style }} {% endif %}{% if theme.settings.variation_image_size %} --plp-variant-image-{{ theme.settings.variation_image_size }} {% endif %}">

3. product.liquid

步驟一: 搜尋 product.liquid
步驟二: 找出 <a class="Product-item ... >程式碼區塊，這通常在檔案的第一行就能找到

<a class="Product-item 
  {% unless product.sold_out and shop.sold_out_enabled %}
    {% if product.available_time_type %}
      {{ product.available_time_type | replace: '_', '-' }}
    {% endif %}
  {% endunless %}"
  href="{{ product.url }}"
  product-id="{{product.id}}"
  {{ product.ga_click_tag }}
  {% if open_link_in_new_tab %} target="_blank" {% endif %}
>

步驟三: 將其改成下列程式碼

<a class="Product-item 
  {% unless product.sold_out and shop.sold_out_enabled %}
    {% if product.available_time_type %}
      {{ product.available_time_type | replace: '_', '-' }}
    {% endif %}
  {% endunless %}
  {% if theme.settings.product_custom_label_style %} --plp-product-custom-label-{{ theme.settings.product_custom_label_style }} {% endif %}
  "
  href="{{ product.url }}"
  product-id="{{product.id}}"
  {{ product.ga_click_tag }}
  {% if open_link_in_new_tab %} target="_blank" {% endif %}
>

步驟四: 找出 <div class="Product-info">
步驟五: 將其改成下列程式碼

<div class="Product-info {% if theme.settings.product_name_align %} --plp-product-name-align-{{ theme.settings.product_name_align }} {% endif %}{% if theme.settings.variation_image_style %} --plp-variant-image-{{ theme.settings.variation_image_style }} {% endif %}{% if theme.settings.variation_image_size %} --plp-variant-image-{{ theme.settings.variation_image_size }} {% endif %}">

4. products.liquid

步驟一: 搜尋 products.liquid
步驟二: 找出 <h1 class="Label"> ... </h1> 的程式碼區塊

<h1 class="Label">
  {% if category %}
    {{ category.title }}
  {% else %}
    {{ 'shopline_translations.themes.products.view_all' | translate }}
  {% endif %}
</h1>

步驟三: 將其改成下列程式碼

<h1 class="Label">
  {% if category %}
    {{ category.title }}
  {% else %}
    {{ 'shopline_translations.themes.products.view_all' | translate }}
  {% endif %}
  {% if theme.settings.show_products_total %}
    {% assign products_total = paginate.total | default: 0 %}
    <span class="ProductList-total">{{ 'shopline_translations.themes.products.total' | translate: total: products_total }}</span>
  {% endif %}
</h1>

5. promotion_product.liquid

步驟一: 搜尋 promotion_product.liquid
步驟二: 找出 <product-item ... > 開頭的程式碼區塊

<product-item
  product-id="{{ product.id }}"
  ng-class="{'quick-cart-mobile': isMobileTabletWidth()}"
  class="
    {% if shop.features contains 'plp_wishlist' and theme.settings.plp_wishlist %}has-wishlist-button{% endif %}
    {% if shop.features contains 'plp_variation_selector' and theme.settings.plp_variation_selector.enabled %}has-variant-selector{% endif %}
  "
>

步驟三: 將其改成下列程式碼

<product-item
  product-id="{{ product.id }}"
  ng-class="{'quick-cart-mobile': isMobileTabletWidth()}"
  class="
    {% if shop.features contains 'plp_wishlist' and theme.settings.plp_wishlist %}has-wishlist-button{% endif %}
    {% if shop.features contains 'plp_variation_selector' and theme.settings.plp_variation_selector.enabled %}has-variant-selector{% endif %}
  "
  modal-window-class="
    {% if theme.settings.variation_image_style %} 
      --plp-variant-image-{{ theme.settings.variation_image_style }}
    {% endif %}
    {% if theme.settings.variation_image_size %}
      --plp-variant-image-{{ theme.settings.variation_image_size }}
    {% endif %}
  "
>

步驟四: 找出 <a href="{{ product.url }}" {{ product.ga_click_tag }} class="quick-cart-item js-quick-cart-item">
步驟五: 將其改成下列程式碼

<a href="{{ product.url }}" {{ product.ga_click_tag }} class="quick-cart-item js-quick-cart-item {% if theme.settings.product_custom_label_style %} --plp-product-custom-label-{{ theme.settings.product_custom_label_style }} {% endif %}">

步驟六: 找出 <div class="info-box">
步驟七: 將其改成下列程式碼

<div class="info-box {% if theme.settings.product_name_align %} --plp-product-name-align-{{ theme.settings.product_name_align }} {% endif %} {% if theme.settings.variation_image_style %} --plp-variant-image-{{ theme.settings.variation_image_style }} {% endif %}{% if theme.settings.variation_image_size %} --plp-variant-image-{{ theme.settings.variation_image_size }} {% endif %}">

6. quick_cart_product.liquid

步驟一: 搜尋 quick_cart_product.liquid
步驟二: 找出 <a href="{{ product.url }}" ...> 開頭的程式碼區塊

<a
  href="{{ product.url }}"
  {% if open_link_in_new_tab %} target="_blank" {% endif %}
  {{ product.ga_click_tag }} class="quick-cart-item js-quick-cart-item {% unless product.sold_out and shop.sold_out_enabled %} {% if product.available_time_type %} {{ product.available_time_type | replace: '_', '-' }} {% endif %} {% endunless %}" >

步驟三: 將其改成下列程式碼

<a
  href="{{ product.url }}"
  {% if open_link_in_new_tab %} target="_blank" {% endif %}
  {{ product.ga_click_tag }} 
  class="quick-cart-item js-quick-cart-item
  {% unless product.sold_out and shop.sold_out_enabled %}
    {% if product.available_time_type %} {{ product.available_time_type | replace: '_', '-' }} {% endif %}
  {% endunless %}
  {% if theme.settings.product_custom_label_style %} --plp-product-custom-label-{{ theme.settings.product_custom_label_style }} {% endif %}
  "
>

步驟四: 找出 <div class="info-box">
步驟五: 將其改成下列程式碼

<div class="info-box {% if theme.settings.product_name_align %} --plp-product-name-align-{{ theme.settings.product_name_align }} {% endif %}{% if theme.settings.variation_image_style %} --plp-variant-image-{{ theme.settings.variation_image_style }} {% endif %}{% if theme.settings.variation_image_size %} --plp-variant-image-{{ theme.settings.variation_image_size }} {% endif %}">

7. redeem_gift_page.liquid

步驟一: 搜尋 redeem_gift_page.liquid
步驟二: 找出 <h1 class="Label" ng-non-bindable>{{ promotion.title }}</h1> 或是 <h2 class="Label" ng-non-bindable>{{ promotion.title }}</h2>
步驟三: 將其改成下列程式碼

<h1 class="Label" ng-non-bindable>
  {{ promotion.title }}
  {% if theme.settings.show_products_total %}
    {% assign products_total = paginate.total | default: 0 %}
    <span class="ProductList-total">{{ 'shopline_translations.themes.products.total' | translate: total: products_total }}</span>
  {% endif %}
</h1>

Updated over 1 year ago