在线商店

 
    在线商店销售渠道是您企业的在线之家。您可以使用 Pisell 在线商店来创建网页并销售您的产品。您的商店需要使用 Basic Pisell 或更高版本才能通过在线商店进行销售。如果您是 Pisell 的新手,请了解如何开始试用
 
在线商店很灵活,因此您可以通过以下自定义来建立您的业务:
  • 构建自定义菜单以帮助客户浏览您的产品和内容
  • 使用响应式主题设计您的在线商店
     要快速入门,请按照在线商店设置指南进行操作。
 

店铺主页

包含以下内容:

 

选择一个推荐的店铺主题主页

主页通常是人们在线找到您的商店时访问的第一个页面。此页面应包括您的品牌、显示的产品、特别优惠以及您客户需要了解的任何重要信息。您可以选择一个推荐的店铺主题主页设计您的在线商店;

登录商家后台,在左侧导航栏在线店铺-店铺装修进入店铺主页装修页面。

mceclip0.png

点击店铺装修后,系统会自动根据您注册店铺时所填写的行业进行推荐主题;

例如下图,商家注册时选择的行业是零售商超,则点击店铺装修后关于商超的主题模板会自动弹出;商家可以根据推荐选择一款属于自己的主题装修店铺主页;

mceclip1.png

选择需要的主题后,您的店铺页面就会自动应用您选择的主题;例如选择了商超模板1则此主题就会应用到商家的店铺主页;您也可以在此模板主题基础上进行修改;

mceclip3.png

当然如果推荐的主题都不符合您的预期,您也可以点击“我想自己试试”进入商家自己创建店铺主页页面;详情参考创建店铺主页;

mceclip2.png

 

创建店铺主页

主页通常是人们在线找到您的商店时访问的第一个页面。此页面应包括您的品牌、显示的产品、特别优惠以及您客户需要了解的任何重要信息。

创建主页有两种方式;

方式1选择选择一个推荐的店铺主题

登录商家后台,在左侧导航栏在线店铺-店铺装修进入店铺主页装修页面。

mceclip0.png

在店铺装修页面填写页面标题(必填)、页面描述(选填),并为店铺首页添加组件后点击发布,即可创建店铺主页页面。

mceclip1.png

店铺装修页面组成部分mceclip2.png

基础组件:点击基础组件中任意组件,可在右侧编辑页面进行相应编辑

营销组件:点击营销组件-店铺信息,可在右侧编辑页面进行相应编辑

基础设置:点击后,进入店铺装修基础设置页面

mceclip3.png

切换页面:点击后,可切换至不同页面进行编辑。

mceclip4.png

页面编辑:对页面设置的基础信息进行编辑

mceclip5.png

组件管理:显示页面中展示的组件列表,可拖动调整组件显示顺序

mceclip6.png

页面链接:位于页面顶部,通过此链接可以进入商家店铺H5主页

店铺主页基础组件

包括基础组件和营销组件。直接点击任意组件(会被加入到预览区域当前定位的组件的下方),或将组件拖拽到布局预览区域对应的位置,则组件会被加入到该主页。如果添加组件后未设置任何内容,将不显示该组件。

包含以下内容:

标题(Title)

mceclip0.jpg

即标题文本,基础组件。可作为一个分区的标题(比如推荐商品分区的标题);包括如下可配置内容:

(1)标题:最多50个字符;必填。另外可针对组件的显示位置、以及标题的字号、是否加粗、字色、是否要加分割线等进行设置;

(2)显示跳转按钮:选择是否要跟随标题展示“跳转按钮”的显示,并选择跳转的页面,在用户端点击该按钮可以跳转到设置的页面;

文本(Text)

mceclip1.jpg

即一段文本描述,配置内容包括:
(1)文本内容:必填;可设置对齐方式、文本的字号、以及文字颜色等。
(2)背景颜色;

公告(Notice)

mceclip2.jpg

(1)公告内容:必填。最多设置100个字符,当内容过长时,手机或者pad上会滚动显示;另可以设置公告的背景颜色以及文字颜色;

(2)跳转链接:可以设置针对该条公告,添加跳转链接;
mceclip3.jpg

轮播图(Slideshow)

mceclip4.jpg
 

最多添加10个轮播图,添加完轮播图以后,可以给轮播图添加标题或跳转链接;

(1)布局:

① 模板1:是最常见的,如上图的布局,一次显示整张轮播图;

② 模板2:左右会留一些上一张/下一张图的边缘;
(2)内容:用于上传轮播图,以及标题、跳转链接:点击添加图片,右侧设置区域会跳转到新增图片的页面:
(3)图片倒角:有直角mceclip5.jpg及圆角mceclip6.jpg两种显示方式;
(4)页面边距:该组件离页面的左右边距;
(5)图片高度:组件图片在页面上所占的高度,默认为按第一张的轮播图的高度;也可以选择高度为小、中、大;
(6) 自助播放时长:默认开启,需要设置系统自动播放轮播图的时间间隔;如果不开启,用户也可以通过左右互动图片切换轮播图。

(7)指示器样式:

 

mceclip7.jpg

图片导航(Navigation)

mceclip8.jpg
(1)图文导航的布局为系统固定样式,页面显示5个,超过5个可以滑动;

(2)添加图文列时:可以选择图片不进行展示,仅展示文字;其中“标题”是必填项;

魔方(Ad Cube)

mceclip9.jpg

(1)标题:选填;

(2)布局:包括左一右二、对称的四个、上一下二、左右各一等8个模板样式;

(2)内容:

      ① 图片:需要先选择图片位置,然后再添加图片与链接;图片是必须选的;

mceclip10.jpg
       ② 跳转链接:选填;
(3)图片间距:魔方内图片之间的间距;

(4)页面间距:魔方组件与页面左右的间距。

分割线(Divider)

mceclip11.jpg

分割线,可设置空白分割、虚线/实线/点线分割,并设置线条的颜色、上下与左右间距;

如果选的是“空白”,则仅需要设置上下间距。

搜索(Search)

mceclip12.jpg

商品搜索,主要是对搜索框的设置。可设置框体内的背景,边框,提示文本的对齐方式、以及颜色;

指定位置,是允许拖拽到页面任意位置的。

商品列表(List)

mceclip13.jpg

(1)标题:选填;

(2)布局:可选择一行一个商品、一行两个商品、一个三个商品、瀑布流(目前一行两个,具体功能优化中),或仅显示一行;

(3)添加商品:点击会弹出一个弹窗,可选择所有商品;

(4)显示个数:默认展示所有已选商品;如果选择指定个数,则商品页仅展示指定个数的商品。其他已选但未展示的商品,可以通过设置的“跳转按钮”的“按钮文本”跳到全部商品的页面去查看;

(5)图片倒角:有直角及圆角两种显示方式;

(6)页面边距与商品间距也可调整

(7)商品信息对齐:指列表中展示的除商品图片以外的其他的信息的对齐方式,默认为左对齐;

(8)展示信息:包括商品名称、价格、原价、购买按钮以及优惠折扣的标签(可选择显示或者不显示);

mceclip14.jpg

视频(Video)

mceclip15.jpg

可以上传本地视频,或粘贴在线视频的url,另可设置视频封面与视频的页面边距。

弹窗广告

mceclip16.jpg

即进入到店铺前端主页后,弹出的广告。

该组件只能添加一次,添加后,可以设置展示哪些图片,登录首页后n秒弹出广告以及广告播放时长。

相册

mceclip17.jpg

类似图文导航的组件设置样式,可上传图片,设置图片标题(标题不在用户端显示),无需设置跳转链接;

① 在店铺介绍主页,最多支持横向滑动查看5张图片,

② 点击图片,则查看图片详情页面;

③ 在店铺介绍页最后一张图片后是个view all的按钮,无论上传几张图片,都会有这个按钮,点击该按钮跳转到商家相册页

播客短视频

播客短视频组件适用终端: H5、微信小程序、APP、PC展示短视频直播应用中已发布的短视频内容。

(1)标题文本,为选填项,对应图中位置

mceclip0.png

(2)展示视频,点击选择短视频,可选择在短视频直播APP上传的短视频

(3)展示分类,勾选即为展示分类,如勾选系统默认展示推荐分类,此分类下展示所有在组件中上传的短视频

(4)展示点赞数,勾选即为展示

店铺主页营销组件

营销组件可完善店铺信息,包括店铺名称、营业时间、联系电话、店铺地址。客户端显示如图,点击时间按钮可查看营业时间,点击电话按钮可拨打店铺电话。
mceclip37.png

店铺主页的组件管理

mceclip19.png

 
预览页面右侧可对已添加组件进行统一管理:

(1)调整顺序,可以点击组件名称前方的拖动按钮调整组件的顺序,通过预览页面进行查看

(2)删除组件,点击组件名称后面的删除按钮可进行删除组件操作

店铺主页基础设置

 进入基础设置页面有以下两个渠道:

(1)点击店铺装修页面下方基础设置按钮

mceclip20.png

(2)点击店铺装修页面上方的页面切换按钮,选择基础设置

mceclip21.png

进入基础设置页面包含以下内容:

颜色

mceclip23.png

(1)颜色:即页面色调设置,包括全局颜色(背景颜色、主题色、辅助色)、菜单颜色(背景颜色、文字颜色、选中颜色)

(2)选择颜色,点击需要调整颜色后侧色块,选择需要的颜色进行调整

(3)恢复/重置颜色,点击重置,调整过的颜色将恢复至最初设置

(4)颜色项目名称后侧显示对应选中颜色的代码

通用

(1)设置自定义登录页logo:对应顾客登录账号页面展示的商家logo,需要上传至少为1024*1024px,最大为2M的png或jpg格式的图片

mceclip24.png

mceclip25.png

 
(2)订单备注推荐词
点击添加推荐词,按下回车完成创建。mceclip26.png
 

商品

mceclip27.png
(1)商品详情页,显示导航对应用户端商品详情页的导航部分,如图所示部分
mceclip28.png
(2)在详情页展示推荐商品,对应商品详情页下方的推荐商品栏,如下图所示,可单独选择商品,或选择商品组
 
mceclip29.png

顶部栏

mceclip30.png

顶部栏可设置

(1)展示"语言切换",对应图中标注位置

(2)自定义顶部logo,对应图中标注位置,logo至少为128*128px,最大为2M的png或jpg格式的图片
 

菜单

mceclip31.png

mceclip32.png

(1)设置底部导航,对应店铺主页底部,可选择是否勾选,勾选代表在店铺主页展示。拖动导航名称右侧按钮调整底部导航栏的顺序。

(2)设置个人中心,对应个人中心页面显示项目,可选择是否勾选,勾选代表在个人中心页面展示。拖动名称右侧按钮调整在个人中心的显示顺序。

mceclip33.png

mceclip34.png

店铺主页链接

mceclip35.png

(1)店铺主页链接,显示在店铺主页设置页面顶部,是客户端查看店铺主页的链接。

(2)点击店铺主页右侧第一个按钮,复制按钮进行复制店铺主页链接操作。

(3)点击店铺主页右侧第二个按钮,二维码按钮可以查看当前店铺主页页面的客户端二维码。

店铺主页的店铺信息

mceclip36.png

(1)店铺名称:必填。直接文本框输入;

(2)营业时间

      ① 营业时间:点击“编辑”,可以跳转到店铺营业时间的设置。可设置为一天内不同的时间段;点击“确定”或“取消”返回到店铺介绍的设置页;

     ② 用户端点击时间icon,从底部会弹出营业时间的弹窗。

     ③ 后台没有设置营业时间,则前端不展示营业时间的icon。

(3)联系电话

    ① 选填。只能输入数字;

    ② 在前端,点击该“电话”的icon,会调用手机拨号键盘,并自动输入联系电话,但不进行自动拨号;

    ③ 不填联系电话,则前端不展示“电话”的icon;

(4)店铺地址

   ① 地址是选填,如果没有填地址,则前端隐藏地址。

   ② 在组件设置里,店铺地址的填写,需要通过“编辑”按钮,跳转到地址编辑页面进行维护。

   ③ 默认支持填写一个地址。

 

商品分类列表

mceclip38.png

(1)添加分类:点击左侧页面设置下方的添加分类按钮,输入分类名称,如果是二级分类则需要选择一级分类,进行分类创建操作。

(2)设置分类显示,默认为显示于顶部。

(3)显示范围:商品分类显示范围,可选择全部分类或指定分类。

(4)启用“排序”:勾选为启用排序功能,对应图中标注位置。

 

自定义页面

添加自定义页面应用

添加自定义页面应用可以通过Pisell应用商店,和安装Pisell其他应用流程相同,点击此处进行查看

 

创建自定义页面

登录Pisell商家后台后点击应用进入应用列表页。

mceclip1.png

点击自定义页面按钮,进入自定义页面列表页。

mceclip2.png

点击上图创建页面按钮后,进入下图页面,商家可以对自定义页面进行创建,创建方法详情见店铺装修设置mceclip41.jpg

自定义页面相关按扭介绍

(1)返回:返回到自定义列表页面,如果未保存页面,点返回,则需要“未保存的更改”的弹窗提示;

 

mceclip39.jpg

 

(2)保存:保存当前页面内容,状态为“未发布”,页面停留在当前页面;

(3)发布:保存当前页面内容并正式发布,状态为“已发布”,页面跳转到自定义页面列表页;

(4)编辑:当自定义页面发布成功后,会显示在自定义页面列表页;如果需要再次修改或编辑已发布的自定义页面,点击自定义页面标题即可;

mceclip0.png

(5)删除:如果需要删除已发布的自定义页面,进入自定义页面列表页;点击需要删除页面前面的白色小框;点击删除页面;

mceclip1.png

(6)进到创建自定义页面,默认定位到“页面设置”,页面左侧可以设置页面名称(必填)与页面描述;

mceclip42.jpg

 

完善自定义页面

自定义页面相关组件及设置流程和店铺装修一致,请参考店铺装修设置

 

店铺主页和自定义页面的区别

(1)必须添加了”自定义页面”的应用后,才能使用此应用;此应用为订阅制,能够快速制作出商家需要的任何页面。

mceclip0.png

(2)自定义页面作为单独的页面可作为链接插入至店铺主页;

(3)自定义页面设置页面仅能对当前页面进行编辑。

 

其他信息

关于自定义页面的其他信息,请参阅自定义页面FAQ

 

这篇文章有帮助吗?
0 人中有 0 人觉得有帮助
分享