产品详情页常见故障处理方法
当从其他地方将内容粘贴到产品或专辑详情,我们会难免遇到各种各样的问题。例如:
产品描述不整齐,不完整
图片不显示
视频在移动端显示不完整
我们列出一些常见故障和处理方法。
A. 产品描述不整齐,不完整
B. 图片不显示
C. 视频在移动端显示不完整
例如:
产品详情显示三条分割线,正常显示一条。
产品描述内容是弹出式,正常显示在产品下面或右边。
原因:内容从其他网站复制粘贴过来,含有多余的 HTML、CSS代码。
处理方法:有两种处理方法。
方法一 (适合对HTML 和 CSS不熟悉的用户):只复制,粘贴纯文本(plain text)内容,使用后台内置的编辑器来修改格式。使用 editpad.org 将文本转换成纯文本。
复制想要添加的文本。
打开 editpad.org,将已复制好的文本粘贴进去。
Editpad.org 自动将文本转换成纯文本。复制纯文本,粘贴到 ShopBase 后台详情编辑页。
方法二 (适合对HTML 和 CSS熟悉的用户):按照这些步骤删除多余代码。
ShopBase/PlusBase 店铺,前往 产品展示(Products) > 所有产品(All products) ,点击需要编辑的产品。
PrintBase 店铺,前往 广告活动(Campaigns) > 所有广告活动(All campaigns) 点击需要编辑的产品。
如果您要编辑的专辑,前往 产品展示(Products) > 专辑(Collection),点击需要编辑的专辑。
描述(Description) 里点击 Source code(源代码) </> 打开 Source Code 编辑页面。
Source Code里找到 class="......" ,删除这个参数。 (如 class="product_collapse py12 brdr-bottom-1" 、 class="product__description-html" )。
【例如】原来代码有 class="......" 。
删除 class="..." ,修改后的代码如下。
点击 保存(Save) 。
点击 保存更改(Save changes) 完成。点击 View 查看前端是否显示正常。
【例如】
原因:图片在外部系统储存,加载时间更长。另外由于依赖于外部系统,图片质量不稳定,在某些情况下可能无法加载。
处理方法:为了保证前端的加载速度,为买方提供更佳体验,建议您重新上传图片到 ShopBase。
ShopBase/PlusBase 店铺,前往 产品展示(Products) > 所有产品(All products) ,点击需要编辑的产品。
PrintBase 店铺,前往 广告活动(Campaigns) > 所有广告活动(All campaigns) 点击需要编辑的产品。
如果您要编辑的专辑,前往 产品展示(Products) > 专辑(Collection),点击需要编辑的专辑。
描述(Description) 里,删除错误图片。
鼠标放在想要添加图片的位置,点击 Insert/Edit Image 按钮。
Insert/Edit Image 里,上传图片,点击 Save。
点击 保存更改(Save changes) 完成。点击 View 查看前端是否显示正常。
如果您遇到的其他问题且无法处理,请联系 在线客服咨询。
【例如】:
原因:视频的大小在移动端显示不完整。
处理方法:您需要编辑产品页的源代码,添加代码到 偏好(Preference) 。
ShopBase/PlusBase 店铺,前往 产品展示(Products) > 所有产品(All products) ,点击需要编辑的产品。
PrintBase 店铺,前往 广告活动(Campaigns) > 所有广告活动(All campaigns) 点击需要编辑的产品。
如果您要编辑的专辑,前往 产品展示(Products) > 专辑(Collection),点击需要编辑的专辑。
描述(Description) 里点击 Source code(源代码) </> 打开 Source Code 编辑页面。
Source Code 里找到下面代码。
将以下代码替代。
代码里的视频大小可能不一样。
例如,您代码是 <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p> ,改成 <p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
点击 Save 保存。
点击 保存更改(Save changes) 完成。
前往 线上店铺(Online store) > 偏好(Preferences)。
其他脚本(Additional scripts)> 头文件(Head) 模块里,添加这个代码。
点击 Save 完成。
产品概述
PrintBase和ShopBase的POD产品概述
产品描述不整齐,不完整
图片不显示
视频在移动端显示不完整
我们列出一些常见故障和处理方法。
主要内容
A. 产品描述不整齐,不完整
B. 图片不显示
C. 视频在移动端显示不完整
A. 产品描述不整齐,不完整
例如:
产品详情显示三条分割线,正常显示一条。
产品描述内容是弹出式,正常显示在产品下面或右边。
原因:内容从其他网站复制粘贴过来,含有多余的 HTML、CSS代码。
处理方法:有两种处理方法。
方法一 (适合对HTML 和 CSS不熟悉的用户):只复制,粘贴纯文本(plain text)内容,使用后台内置的编辑器来修改格式。使用 editpad.org 将文本转换成纯文本。
复制想要添加的文本。
打开 editpad.org,将已复制好的文本粘贴进去。
Editpad.org 自动将文本转换成纯文本。复制纯文本,粘贴到 ShopBase 后台详情编辑页。
方法二 (适合对HTML 和 CSS熟悉的用户):按照这些步骤删除多余代码。
ShopBase/PlusBase 店铺,前往 产品展示(Products) > 所有产品(All products) ,点击需要编辑的产品。
PrintBase 店铺,前往 广告活动(Campaigns) > 所有广告活动(All campaigns) 点击需要编辑的产品。
如果您要编辑的专辑,前往 产品展示(Products) > 专辑(Collection),点击需要编辑的专辑。
描述(Description) 里点击 Source code(源代码) </> 打开 Source Code 编辑页面。
Source Code里找到 class="......" ,删除这个参数。 (如 class="product_collapse py12 brdr-bottom-1" 、 class="product__description-html" )。
【例如】原来代码有 class="......" 。
<div class="product_collapse py12 brdr-bottom-1">
<div class="toggle_content mt12">
<div class="product__description-html">
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>
删除 class="..." ,修改后的代码如下。
<div>
<div>
<div>
<div><img
src="https://img.btdmp.com/files/10051315/2019/11/26/1574762616068a6695e5.png"
alt=""/></div>
点击 保存(Save) 。
点击 保存更改(Save changes) 完成。点击 View 查看前端是否显示正常。
B. 图片不显示
【例如】
原因:图片在外部系统储存,加载时间更长。另外由于依赖于外部系统,图片质量不稳定,在某些情况下可能无法加载。
处理方法:为了保证前端的加载速度,为买方提供更佳体验,建议您重新上传图片到 ShopBase。
ShopBase/PlusBase 店铺,前往 产品展示(Products) > 所有产品(All products) ,点击需要编辑的产品。
PrintBase 店铺,前往 广告活动(Campaigns) > 所有广告活动(All campaigns) 点击需要编辑的产品。
如果您要编辑的专辑,前往 产品展示(Products) > 专辑(Collection),点击需要编辑的专辑。
描述(Description) 里,删除错误图片。
鼠标放在想要添加图片的位置,点击 Insert/Edit Image 按钮。
Insert/Edit Image 里,上传图片,点击 Save。
点击 保存更改(Save changes) 完成。点击 View 查看前端是否显示正常。
如果您遇到的其他问题且无法处理,请联系 在线客服咨询。
C. 视频在移动端显示不完整
【例如】:
原因:视频的大小在移动端显示不完整。
处理方法:您需要编辑产品页的源代码,添加代码到 偏好(Preference) 。
ShopBase/PlusBase 店铺,前往 产品展示(Products) > 所有产品(All products) ,点击需要编辑的产品。
PrintBase 店铺,前往 广告活动(Campaigns) > 所有广告活动(All campaigns) 点击需要编辑的产品。
如果您要编辑的专辑,前往 产品展示(Products) > 专辑(Collection),点击需要编辑的专辑。
描述(Description) 里点击 Source code(源代码) </> 打开 Source Code 编辑页面。
Source Code 里找到下面代码。
<p><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>
将以下代码替代。
<p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/example-video-link" width="xxx" height="xxx" allowfullscreen="allowfullscreen"></iframe></p>
代码里的视频大小可能不一样。
例如,您代码是 <p><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p> ,改成 <p class="custom-description-mobile-video"><iframe src="https://www.youtube.com/embed/Sk1y14kX9sc?ab_channel=YUMMY" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
点击 Save 保存。
点击 保存更改(Save changes) 完成。
前往 线上店铺(Online store) > 偏好(Preferences)。
其他脚本(Additional scripts)> 头文件(Head) 模块里,添加这个代码。
<style>
@media (max-width: 768px) {
.custom-description-mobile-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}
.custom-description-mobile-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
</style>
点击 Save 完成。
关联页面
产品概述
PrintBase和ShopBase的POD产品概述
更新于: 13/09/2022
谢谢!