會員中心 > 個人資訊頁 改版

Introduction

為了支援 會員中心 > 個人資訊頁 的改版，對於有開啟 Layout Engine 的店家，需調整代碼以支援新功能。

1. theme.css.liquid

步驟一: 前往側邊欄的 網店設計 > 編輯 HTML/CSS 頁面

步驟二: 找到資源檔目錄下的 theme.css.liquid 這個 file 並且滾動到最下面的空白處如下圖

步驟三: 直接在theme.css.liquid最底下加入以下程式碼

Text

/* ADD for member center profile page */
#member-center-profile__form .intl-tel-input {
  display: block;
}
#member-center-profile__form .intl-tel-input .iti-flag {
  background: transparent;
  box-shadow: none;
  width: auto;
  height: auto;
  margin-right: 3px;
  min-width: 20px;
}
#member-center-profile__form .intl-tel-input .flag-container .arrow {
  margin-left: 4px;
  font-size: 10px;
}
#member-center-profile__form .intl-tel-input .country-list {
  margin-bottom: -1px;
  z-index: 101;
}
#member-center-profile__form .intl-tel-input .country-list .divider {
  margin: 0 auto;
}
#member-center-profile__form .intl-tel-input .country-list .flag-box {
  display: none;
}
#member-center-profile__form .intl-tel-input .country-list .flag-box .iti-flag {
  background-image: none;
}
#member-center-profile__form .intl-tel-input.allow-dropdown .selected-flag {
  display: flex;
  width: 89px;
  background-color: transparent;
  border-right: 1px #dddddd solid;
  font-size: 14px;
}
#member-center-profile__form .intl-tel-input.allow-dropdown .selected-dial-code {
  padding-left: 0;
  min-width: 32px;
}
#member-center-profile__form .intl-tel-input.allow-dropdown .country-code {
  color: #333333;
  font-size: 12px;
  font-weight: 600;
}
#member-center-profile__form .intl-tel-input.allow-dropdown input {
  height: 44px;
  padding-left: 96px;
  border-radius: 3.75px;
  font-size: 14px;
  color: #333333;
  box-shadow: none;
}
#member-center-profile__form .mobile-phone-input {
  background-color: transparent;
}
#member-center-profile__form .member-center-profile__form-section {
  border-color: #dddddd;
}
#member-center-profile__form .member-subscription__divider {
  border-color: #dddddd;
}
#member-center-profile__form .tier-detail-row-description {
  color: #333333;
}
#member-center-profile__form .grecaptcha-badge {
  visibility: hidden;
}
#member-center-profile__form .birthday-faq {
  color: #337ab7;
}
#member-center-profile__form .member-center-profile__according-button {
  color: #337ab7;
}
#member-center-profile__form .member-center-profile__delete-address-button {
  color: #999999;
  font-size: 12px;
  opacity: 0.3;
}
#member-center-profile__form .member-center-profile__default-button {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #dddddd;
}
#member-center-profile__form .general-subscribe-button, #member-center-profile__form .line-subscribe-button, #member-center-profile__form .general-unsubscribe-button, #member-center-profile__form .line-unsubscribe-button, #member-center-profile__form .facebook-unsubscribe-button {
  color: #333333;
  font-size: 1.4rem;
  line-height: 2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 4px 10px;
}
#member-center-profile__form .general-subscribe-button > svg, #member-center-profile__form .line-subscribe-button > svg, #member-center-profile__form .general-unsubscribe-button > svg, #member-center-profile__form .line-unsubscribe-button > svg, #member-center-profile__form .facebook-unsubscribe-button > svg {
  width: 1.6rem;
  height: 1.6rem;
}
#member-center-profile__form .line-subscribe-button {
  padding: 0 0.8rem;
  color: #4cc764;
}
#member-center-profile__form .general-unsubscribe-button {
  color: #999999;
}
#member-center-profile__form .line-unsubscribe-button, #member-center-profile__form .facebook-unsubscribe-button {
  color: #c2c2c2;
}
#member-center-profile__form .credit-card-field__list {
  border: 1px solid #dddddd;
  padding: 0 20px;
}
#member-center-profile__form .credit-card-field__list-item {
  border-bottom: 1px solid #dddddd;
  padding: 15px 0;
}
#member-center-profile__form .credit-card-field__list-item:last-child {
  border-bottom: 0;
}
.credit-card-delete-modal__item {
  background-color: #f8f8f8;
  padding: 15px 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
  align-items: center;
}
.iti-mobile .intl-tel-input .country-list .flag-box {
  width: 0;
}
.iti-mobile .intl-tel-input .country-list .flag-box .iti-flag {
  display: none;
}
/* END ADD for member center profile page  */

步驟四：檢查完成後的樣子是否正確