Skip to main content

Hướng dẫn support dùng Custom CSS để sửa hiển thị, tăng review Boost Sales

Countdown Timer​

Lỗi hiển thị: Khoảng cách giữa text và countdown timer bị rộng (2 phần khoanh đỏ trong ảnh). Lỗi này sẽ bị cả trên preview và frontend

Chat tự động của khách gửi đến CS: I want to change the layout

Khi gặp chat trên, CS/TS vào check preview + frontend -> nếu thực sự thấy khoảng cách bị rộng thì điền đoạn code CSS dưới vào phần Custom CSS trong Advanced Settings

Để thay đổi độ rộng/hẹp của khoảng cách chỉ cần thay các chỉ số 20, 15 , các phần khác không cần thay đổi

Số hiện tại đang là giá trị mặc định hiển thị cũ của app khi không lỗi, nếu thấy vẫn rộng thì mọi người có thể tự sửa số. Khi sửa số nhớ để đơn vị là px.

CSS Countdown

.proofo-countdown-timer-wrap h3 {
    margin-bottom: 20px !important;
  }
  .proofo-countdown-progress-bar-message {
    margin-top: 15px !important;
  }

Trust Badges​

Lỗi hiển thị: Giá trị mặc định của size small được tăng lên -> trust badges có thể bị hiển thị thành 2 dòng Ẩn phần kéo thả custom size cho badge

=> Chat tự động của khách gửi đến CS: I want to change the layout

Khi gặp chat trên, CS/TS vào check preview + frontend -> nếu thực sự thấy badge bị hiện 2 dòng thì điền đoạn code CSS dưới vào phần Custom CSS trong Advanced Settings, không cần chọn lại setting size ở trên

Để thay đổi kích thước của badge thì chỉ cần thay đổi 2 số 80 . Lưu ý 2 số này cần giống nhau để hiển thị được đúng tỉ lệ và dễ nhìn Số hiện tại đang là giá trị mặc định hiển thị cũ của app khi không lỗi, nếu thấy vẫn rộng thì mọi người có thể tự sửa số. Khi sửa số nhớ để đơn vị là px.

.boost-sales-list-badges.small .avada-bages-wrap {
    max-width: 80px !important;
    width: 80px !important;
 }

Video hướng dẫn​

Countdown Timer​

Displaying issue in both Preview and Storefront: Space between countdown timer number and texts is too big (highlighted in the screenshot).

Automated message: I want to change the layout

When taking the chat, CS/TS check the preview + frontend, if the issue is showing, paste this CSS code into Custom CSS section in Advance Settings.

To change the padding, you will just need to adjust the number 20, 15, leave the rest as is.

The current value is the default one without spacing issue, if the padding is still big, you can adjust the value yourself, make sure the unit is px.

CSS Countdown

.proofo-countdown-timer-wrap h3 {
    margin-bottom: 20px !important;
  }
  .proofo-countdown-progress-bar-message {
    margin-top: 15px !important;
  }

Trust Badges​

Displaying issue:

The default size of Small (Size) option is increased > trust badges can be displayed in 2 lines > hide the Custom size option

Automated message: I want to change the layout

When taking the chat, CS/TS check preview + frontend -> if the badges are showing in 2 lines, paste this CSS code in the Custom CSS section in Advance Settings wihthout having to resizing in the Size options.

To change the badges' size, you just need to adjust the number 80 in both lines

Note: these 2 values should be the same so that the badges can be equally sized and good-looking.

The current value is the default one without sizing issue, you can adjust the values yourself if necessary and make sure unit is px.

CSS Trust Bagdes

.boost-sales-list-badges.small .avada-bages-wrap {
    max-width: 80px !important;
    width: 80px !important;
 }