产品详情页
好那我们产品的分类页面
都做完了之后呢
我们接下来来
去做产品的单个的详情页
我们依然还是来到网站的后台
我们要创建一个模板
那么我们刚刚为产品分类页面
创建的模板呢
是一个叫做products ARCHIVE
就是产品分类的这个模板
那现在
我们来创建单个产品详情页的模板
这个的话呢
同样是可以你做一个
或者是你可以做多个
然后呢分别套用在不同的产品上面
你也可以使用一个统一的
将所有的产品都套用在这个模板上面
也是非常方便的
我们点击add new templates
然后这里我们选择一个
有一个叫single product
我们给它命名一下啊
就product好了
product page
点击创建模板
那我们这里会看到呃
其实elemental呢
也给我们内置了一些模板
我们可以去用呃
但是看了一下这些模板呢
也都比较平平
比较普通一点
所以我们就关掉直接创建新的
啊我
为了确保我的这个产品详情页的模板
跟我这个分类页模板呢
有一个统一性
所以我也打算在产品详情页的上方呢
加一个这样的
一个矮矮的一个横幅条
所以我可以啊
从我的这个产品分类页的模板
这这里呢
我可以直接复制粘贴过来啊
我来到后台之后呢
还是进入
刚刚我们创建的这个产品分类的模板
在已经发布的published的这里
这里有一个products are cap templates
我点击add it with elemental
然后我就直接选中这个容器然
后把它呃复制
然后在空白
就是在这个地方
空白地方我粘贴就可以了
粘贴完之后呢
然后我们要调整什么
调整一下
一个是背景图片
我选中这个容器之后
在左边style background这里我换一个图片
但是格式这里不用调了
因为我是直接将这个模板粘贴过来的
所以实际上我这里面的图片
它的格式啊position啊啊repeat
display size这里都是一致的
所以我就不用调
这个就是用复制粘贴的好处
然后另外一个呢
就是我的产品标题要改掉
可以看原先这里呢
它是一个叫做ARCHIVE title对吧
那么我们现在是要改成一个啊
我们产品的这个标题
好我们要把这个删掉
把这个删掉
然后呢我要增加一个呃
首先其实在这里左侧
这里
是直接可以看到有一个product title的
因为
我们这个是编辑产品详情页的模板
所以elemental呢它在控件里面
它主动的就把产品有关的一些空间
给我们往前推了
我可以直接将这个product title
我给拖过来
然后拖过来之后呢
我们实际上呃
我们可以点击publish
我可以预览一下啊
我先点击publish
然后我这边增加一个显示条件
用在所有的产品上面
点击save
然后我们来到前端来看一下
我们任意的选择一个产品
好
我们现在看到这个上面是没有标题
那么这里面标题应该设置还有点问题
好录一个产品标题过来
然后啊
我们这里好像看到有一点小小的问题
他这里无法显示
我们刚刚已经试了一下预览
他无法显示
呃那么这个也没关系
我们不用这个product抬头空间
因为呃你还可以用其他空间
我们可以直接选择拖拽一个heading
就是headings标题嘛
然后呢
我首先把这个标题的html的标签
我改成H1
好然后呢
我在标题这里呢
我先将字体改一下
改成白色
并且呢
让它居中显示在左侧alignment这里
居中好
然后呢
接下来我们来调整一个Dynamic tag
也就是动态标签
在你的这个标题右边
有一个这个呃小的按钮
Dynamic text我点击一下
在这里呢
我可以选择
就是你希望它显示的动态显示的内容
也就是说呃
你希望它在哪个页面
那它就显示哪个页面的标题
那么我们这里就选择产品
这里有一个product title
好我们选择之后呢
然后他这里显示tent
那这样子就对了
我点击publish
点发布一下
然后呢我们前端再看一下
好它现在已经显示出来了
但是我们现在是不是还发现一个问题
那它就是呃这个横幅
它不是全宽的
它只是呃在我们的内容宽度
对吧呃
还记得怎么设置吗
这个其实跟我们刚刚设置呃
产品分类的一样的
我们是要去到customize外观
这里有一个customize这里
然后我们选择Woocommerce
有一个single product
前面
我们设置这个产品分类的这个横幅
啊我们用的是什么
用的是呃
product cat catalog这里
对吧我们选择了container layout
容器的布局我们选择了全宽
那我们现在是做的是产品的详情页
也就是所以我们是要选择single product
这里可以看到contain the layout
它同样是默认的
那我们要改成
要改成这个full with
好我们改好之后点击publish
在前端我们刷新一下
好了它已经呈现全宽的这个显示了
好然后我们为了确保视觉统一性呢
我们可以再点击一下一个分类
然后呢我们跟这个啊
分类页跟详情页
我们啊大家留意看一下
这块的显示有没有什么不一样的啊
格式就是我们要确保格式统一好
它的格式是一样的啊
字体的大小等等都是一致的
没问题啊
好的我们继续来编辑产品详情页
那么呃这个banner做完了
我们接下来要加一个什么啊
还是跟这个产品分类页一样嘛
其实还是要加一个面包屑导航
那么我们最简单的方式
其实也是直接复制再粘贴过来
因为这样其实可以确保
你的格式是完全一致的
就不会左边移一点
右边移一点
上下不一致
等等你再点击publish
你同样的
我们来点击一个产品类目
然后呢
我们再点击一个单个产品看一下
好
可以看这个地方是完全位置是一样的
这样的话
其实为了可以让你的网页啊
这个呃样式一致啊
好我们再往下的话
就添加不一样的东西了
我们再往下呢
我们就用比较传统的一个布局
来去做我们的产品详情页啊
我们首先添加一个容器
选择这个
两列的这个容器把宽度调整一下
调整为1,200
好然后呢
我们左边放什么
左边放图片
右边放产品的标题介绍
呃询盘按钮等等
包括如果你是B2B的啊如
如果你是b ToC的
我们就放价格等等
那么我们呃两者都会演示一下
首先我们加一个图片
图片的话呢
我们在我们选中这个容器里面
我们点击加号
在左侧控件里面
可以看到有一个product images
这里这个image
这个product image呢
跟跟这个image的控件有个区别
这个是image控件
然后呢这个是product image
product image它是动态的
就是你点击在哪个产品
它相应的就会显示那个产品
我们上传的产品图片
所以我们要用的是product Images
好
可以看这里面就是我针对这个产品
当然它这个是一个预览啊
那么我比如说针对这款产品
我的第一张是我的主图
然后是我的gallery
就是我第二第三第四张图这里都有
但是如果你这里选择image的空键
它是跳不出来的啊啊
当然也可以跳出来
我教大家个方法
比如说你这里我就放一个image的空键
它这里显示默认对吧
好那我们选择什么
又是这个Dynamic text
然后呢你可以在下面你看看
这里同样也有product image
它依然是显示的
但是呢它这里只显示主图
它没有这个相册
就是product gallery啊
所以这就是使用image控件的一个问题
它这张图它是动态调整的
但是它没有这个gallery了
所以我们还是不能用这个image控件
我们还是要用product image控件
好加完之后呢
我们接下
接下来在右边加内容
内容的话我加一个什么
product product title对吧
产品的标题
啊标题
这里呢我们看到有个小问题
这个标题呢
默认的格式是H1
但是实际上我们这个页面
我已经放了一个H1的标题
就是我的这个产品名称标题
所以这里面这个产品标题的名称
我应该是H2了
因为我你可以理解为这是一个大标题
这是一个二级标题
这个大标题是针对
是整这整个一个页面的
而这个呃product的title呢
是它是针对这个产品
就是右边这个图片的
所以就是啊
我们要将层次
就是要区分一下
确保一个页面上只有一个H1
但是你可以有多个H2
H3 H4都没问题
好然后product title我们添加好了
接下来我们再增加控件
看看啊
这里有什么有用的控件
有必要的
这里有一个short description
我们加过来看一下是什么内容
就是这一段
那么我们在后台之前上传了一些产品
给大家看一下
哪里是short description短描述
我们任意点击一个产品
在最下方
这里大家看到product short description
它有一个产品短描述的
这一部分的内容就会显示在我们
产品详情页
我们添加到这个空间里面
这个空间我们点击instruction
叫做short description
好
然后我们接下来就是再可以增加什么
我们可以加一个产品的评级段rating
rating这里呢有两个
一个是这个就直接是rating
第二个呢是product rating
product rating我加过来呢这里是呃
我们前端是不显示的
因为这个product rating呢
是要建立在有浏览的用户在网站上
针对我们这个产品
它产生了真实的评分
那这个地方它会有这个product rating的
那么我们
为了避免麻烦对吧
我直接加我自己自定义的rating
不就好了嘛
我可以直接加这个空间
rating的空间给它加过来
那这里我就自己可以去设置
有几颗星啊啊
大家可以看这里
就是这里有5颗星对吧
那么比如说rating
这里我可以都都可以调的
4.5
那可以看4星半对吧
那我就调为5星
好然后呃接下来呢
是要区分一下B2B跟b ToC
如果你是B2B的企业
那么你可以这里加一个比较常用的
下一个button
按钮
这个按钮你可以是比如说get a quote
然后呢你这个按钮
你就加一个循盘表单的一个链接
就可以了
然后我们呃先隐藏这个panel
仙女隐藏左边面板
我们来大致预览一下
呃两两个内容的间距有点窄
我给他宽一点
那么我们选中大的容器
选中这个上一第一层的大容器
它在布局这里下方有个gaps
就是column gap
就是两列之间的间距
我给它设置为50
好然后我点击publish
然后我们再到前端来
看一下效果
我任意的选择一个产品
来view预览一下好
那他就是这样的一
个布局那么呃左边是图片
右边是相应的文字啊
然后如果我希望说
这个面包屑导航
跟这个图片这里能够对齐
那么是在这里设置
因为我呃我
我们先选中这个product image
所在这个容器
我们可以看
它周边还是有留了一些间隙的
如果你想去掉这些间隙
那么你在选中容器之后呢
再advanced高级
这里大家看到padding这里
padding这里就是我们默认情况下
他是没有任何数字
但是他是
其实这里预预设了一个一些间隙的
如果你想要去掉这些间隙
呃然后呢
确保
让这个容器跟面包屑导航完全对齐
那么你就只要这里输入0就可以了
然后我们再点击publish再来看一下
刷新一下
好那么我们现在可以看到
它跟我们的这个面包区导航
就完全对齐了
看着可能会舒服一点
呃
相应的就是左边这个呃右边这个容器
你要不要也把它这个内间距给去掉
那么啊
如果你想去掉
那么也可以去掉
那但是实际上从视觉上
右边的文字好像没有什么影响
那么我们可以不去掉
当然你也可以调整这两个容器
它的这个比例
比如说你想要这个容器稍微窄一点啊
或者说你想要这个容器宽一点
那么都是可以的
好我这里就呢就设定为50
在我们添加了这个呃呃
循环按钮之后呢
如果你be to be的呃企业
你可能这里
你可以再增加一些别的内容
比如说你可以使用这个啊
这里有一个叫icon list
这个控件就是图标列表
icon list呢
你可以拖过来看一下
你可以这里面哎
他这里你可以设置什么
一个小图标
然后一个标题
那就是如果你这个产品有一些特色
比如说啊
他的材质是什么
什么特色
他啊
他的这个
呃你们用的呃
生产技术是什么
什么特色
就是如果你有那种简短的一些卖点
就是你可能一小句话就能总结的卖点
那这个地方你就可以用icon list
对吧然后你可以把图标换一下
比如说图标换成这个呃
图标换成这个
嗯换这个来
我看一下换什么
比如说换成这个啊
钻石对吧
然后呢你这里可以把这个话改掉啊
比如对呃
比如说这个啊啊in
environmental
an environment friendly a friendly
materials
对啊就是对环境友好的
环保的材料等等
就是你可以加1234
就是一些小卖点嗯
然后你也可以加其他的
就是你认为
可能对你的这个产品销售有帮助的
一些小小小的一些卖点
那我给他刷新一下
然后在前端啊
再看一下效果
你可以加这样的一些文字
可以让你的右边这块内容呢啊
不要那么空
可以让他填的满一点
当然你也可以在里面
再用文本去增加一些啊
比如说你们的参数选项啊等等都可以
好然后呢
在呃然后如果你是b ToC的企业
你是电商的企业
那这个地方呢
其实加的内容就不太一样
你这里呃
不太会用到按钮的这个空间
我先把这个按钮去掉
你要用到的是呃这个
是这个product price
就产品价格
你需要用到它
还有是什么
还有就是呃这里add to cut
添加购物车
你需要用到它
好我们加完这两个之后呢
我们在前端预览一下效果
先刷新一下
会看到这里什么都没有
为什么呢
因为我的产品
没有去给他加任何的价格
我们现在给他加一个价格
就是这个
tent t t帐篷
好然后呢
产品在哪里加
就是在产品下面
这里有一个product data
产品数据这里
那么假如你这个产品是呃
单个产品的
那么你就选择single product
假如你产品是有变体的
这里你要选择variable product
好我们现在先演示单个产品
我们就演示单个产品
呃regular price就是你常规定价
那么比如说我可以这样子设置
呃regular price 500
然后呢sale price 423
然后价格加添加
好了我们再添加一下库存
库存呢这里有一个呃stock status
就是库存账状态
呃你可以这里啊
就有库存
然后无库存
啊然后你也可以有增加一个库存
自动管理的
你可以点击这个stock management
你勾一下
勾一下这
这勾一下之后呢
你可以这里添加一个库存
比如说这个添加啊100
然后呢
它这里下面有一个low stock stress hold
就是呃它这里是2啊
你就是添加数字几
就是这个代表什么
就是呃当你的
比如说我
我当我的库存啊
我我每卖掉一个
我这边库存会减少一个
当我的库存成为呃
减少到5 第呃
5个的时候呢
它会自动的有一个低库存的
一个呃一个警戒线
就是会提示我们低库存
然后我们价格跟库存都添加好之后呢
这样子你就可以在前端看到它的价格
以及看到加购物车的这个按钮了
我们来看一下
好现在可以看到啊
他有一个
这个就是我们设置的regular price
这个就是我们设置的sale price
然后呢availability对吧
有100个库存
然后我可以加啊
我可以然后我可以加购物车等等
那这就是我们如果b ToC的
那么你在单产品模板这里呢
你是需要加这个
加这个东西
啊加什么加
是要要加这个控件是product price
product呃add to cut
然后其他的呃
你也可以根据情况
你可以去添加来看一下它会显示什么
比如说这里有一个product stock
stock我们可以添加来看一下啊
其实这里已经啊
我们的前端已经显示有了啊
因为我们的有一个库存管理
我们进行了勾选
所以它的前端会有这个availability 100的
这个提示
那如果你不勾这个
如果你把这个啊库存管理关掉
你只是让它显示有库存
那么我们再看一下前端啊
它是不会显示那个availability 100的
所以我在前端我勾选了库存管理
那么我在空呃做模板的时候呢
我就不需要加这个呃
stock的这个空间了
然后这里呢
呃还有一个up sales
这个up sales是什么意思呢
就是呃你可能呃
就是你可能这款产品其实你你也有
其他同类似的
同款的产品可以作为替代品
就是如果客户不喜欢这款
你可能希望他可以选择其他的
但同类的
同同同类
同样类型的款式的产品
你可以放一个up sales
这里就是
其实是一个促销手段
那么这个up sales想显示的产品呢
是来自于我product
这里可以看到有一个linked PRODUCTS
这里有一个up sales
就是你这里可以up sales
你可以增加其他的产品
比如tent a
那你增加了这个tent a之后呢
就是啊我的控件里面
我前面加了这个Upsell的
Upsell的这个控件
我先我先publish一下
然后大家看一下这个它是怎么显示的
然后我在后端产品这个tent t上面呢
我增加了一个up sale的
这个tent a啊
我想作为一个交叉啊
这个也不能说交叉销售嘛
其实就作为一个呃
客户选购时
另外其他的一些选项
好我现在再来刷新一下前端
可以看到呢
它这里会有一个up sale
you may also like
对吧什么什么什么
然后呢呃
在产品后台
大家可以看到link PRODUCTS
这里有一个up sales
下面还有一个cross sales
这两个有点区别
up sales应该是作为就是你这
你可以作为你的这款产品的替代品
让用户去多一个选择
因为有时候呃
客户比如说要买一件啊
比如说我要买个帽子
要买个棒球帽
但是如果你的店里面只有一款棒球帽
那么其实我的选择的
余地是特别有限的
但是如果你有十几款的棒球帽
而且可能他们都是差不多类型的款式
那么我可能就会从10款里面去选一个
这个时候呢
你就应该用到upsels
就是呃
这几些产品
它属于差不多类型的
都可以作为用户的选择之一
然后下面有一个cross sales
就是交叉销售的产品
比如说我这个帐篷
那么帐篷你可以再交叉销售一个啊
比如说登山帐啊
登山靴
那么就是用户他选完帐篷之后呢
他可能对于其他的啊
可能跟帐篷有关的其他产品
他也会有兴趣
那么这里你可以加一个cross sales
那我这里也没有加cross sales
因为我产品里面没有上传
除了帐篷以外
其他的产品
好但是我们可以在产品的空间啊
在产品的详情页里面
我们可以加这个cross sales的啊
不过在加那个之前
我们下面再加一个空间
先添加一个容器
然后呢
宽度调整一下
我先往里面加一个标题
啊确保它是H2的这个标签
标题什么标题
是叫做是products
product details
产品的详情的介绍
对吧然后这个details下方
然后呢我再增加一个空间
这个控件的名称叫做PRODUCTS content
就是产品的详情的描述
大家可以看这段文字
其实就是我的这部分
product product description
这部分就是它
这里我们可以加长的描述
而且我也可以啊
加图片啊
加视频等等
就是这段描述
我是放长的内容
长的内容对应的就是我呃
详情页模板制作
控件里面的这个product content
product content然后呢
我刷新一下
再来看一下这款
再来看下这款产品
好它下面出现了product details
好然后我们接下来再往下加什么
加前面我提到的这个
想要交叉销售的这些产品
这两个原先设计的初衷呢
其实是有点区别的
原先无呃无Commas设计的初衷是这样的
up sales用来呃用在那些
就是同样的产品
然后但
但是他可能是不同类型的选择啊
怎么说举个例子啊
比如说我要去买个棒球帽
那么啊
我如果店铺里面只有一款棒球帽产品
那么用户他只能选
他只有一个选项嘛
但是我有10款棒球帽
那他们可能是属于款式差不多
但是不同的品牌
但他们都是棒球帽
那么用户选择的余地
可能就会更广一点
所以up sales呢
Wacom设计的初衷是用来那些
就是啊假如a啊
用户他可能觉得这款式不喜欢
那可能我们就可以放b
放c他都是
但他都属于这个同一个产品的
然后cross sales呢
它就是给那些啊
比如说我买了一个帐篷之后呢
可能我会对登山帐也有兴趣
可能我会对于登山靴也会有兴趣
那这个时候呢
可能我们就会用到这个呃
cross sales交叉小说
但实际上我们在用的时候呢
我们就发现好像啊
其实也可以灵活用嘛
因为我们发现cross sales它会有点点嗯
不太灵活啊
为什么
就是因为前面up sales已经演示过了
我们接下来演示一下cross sales
它到底是怎么样的
我在这个模板里面
我在这个下方我增加一个
我增加一个容
增加一个容器
然后呢容器的宽度设置一下1200
然后呢我在这里加一个空间
比如说我加一个呃
我我这里其实也能加related products
我
我想加就是还是加交叉销售的产品嘛
那么除了我们上面增加的
这个叫做up sales的这个产品之外呢
啊我还可以在这里面
我加一个叫做related product
这里可以看到一个是这个是product related
这个product related呢
它会自动的给你推
推荐你的这个类目里面的其他的产品
但是它只能是自动的给你加
类目里面的其他产品
然后当然你可以排序
你可以根据标题价格欢迎程度评分啊
当然也可以随机排序
然后另外一个呢
我们如果这个控件
我们加的是products的这个控件
这里面呢
我们啊我先把行数设置为一行
4列一行
大家可以看啊
就是第一个产品
就是我们前面设置了常规定价500元
跟一个促销定价43元的这个产品
它自动的会在产品的图标上
加一个sale的
一个呃
促销的一个徽标
那么关键是我们要看这个叫query carry
这里我可以去设置
我的这些产品的来源
这里呢我可以有呃最新发布的
然后呢或者是带sale
这个
会标的就是我设置的促销价的产品
也可以是手动的选择manual selection
这里你可以直接输入产品的名称
或者就是
最下面有一个cross sales
交叉销售
但是呢这个cross sales的这个空间呢
它有一点啊
它有个呃
逻辑跟我们直接加产品不太一样
这里有一个提示
note就是这个交叉销售的产品
只会是在用户添加了购物车之后
去显示也就是说
当用户选择好了一款产品
加入购物车之后
然后他再自动跳出来
其他的一些交叉销售的产品
那他逻辑上呢
也有合理性
嗯就是
就看你是怎么去运用了
那我们来看一下
它这个效果是怎么样的
我先点击这个publish
然后呢我在这个产品这里面
我cross sales
我也增加几个产品啊tent b
tent c
tent d
tent e
好我加了4个cross sales的产品
点击更新一下
然后我们前端刷新一下
现在看到这里呢
已经出现了4个cross sales的产品
但是正常情况下你是看不到的啊
为什么这里会出现
因为我已经将这个产品添加了购物车
我点击这个view card
然后呢
我可以把这个购物车之内的东西
我先删掉啊
好目前购物车是空的
然后我再刷新一下这个页面
这里看到还是出现在呃
这个Crosstyle产品还是有
那应该是缓存的问题
然后我用我用无痕模式下
我打开一个新的网页
用无痕模式来看一下
好这是一个无痕模式
那么大家可以看到这里面呢
就没有这个cross sales的这个产品了
那我刚刚前面这个
因为我之前添加了购物车啊
所以它这里可能是
因为缓存或者什么原因
它这里面依然会显示
这个cross sales交叉销售的产品
但是我们在无痕模式下
就是
我这里面是没有添加任何购物车的
一些就是一些记录的
所以这里面你是看不到Pro sales的产品
那我们来演示一下我添加购物车之后
它怎么显示
我点击比如说我数量2
就数量一吧
添加购物车上方
它这里会出现呃
这个帐篷已经添加到我的购物车了
然后呢我们看下面自动的就会跳
显示出来
这个四个我们设置的BCDE的帐篷的呃
交叉销售的项目
然后我们再来浏览一下购物车
可以看到在购物车界面
它同样会有you may be interested in什么
什么什么
就这他
这个其实也是一个很好的促销工具
就是呃你可以用来
对于
那些增加完购物车之后的一些用户
然后你再去推荐一些
他可能有兴趣的相关的产品
这就是cross sales
它跟这个up sales的逻辑呢还不太一样
就是这个up sales呢
你是link product
这里up sales呢
你是可以直接去控制你想要显示哪些
那么所以这里面
其实我们的产品详情页呢
其实我们就可以做的灵活一点
比如说啊我可以在这个下方呢
我就呃
就是我可以把那个cross sales
交叉销售的产品
比如说我放在最下方
但是呢我可能我我这里可以放一个呃
我们作为这个就是用户
其他选项的一些产品
当然你也可以自定义一些其他
的产品去显示对吧
在无痕模式下
我们来看这里面我加的控件是up sales
这个控件
就是就是这个up sales的这个控件
所以我在前端呢啊
我看到的是
我这里可以比如说我放两个
放两个可能呃
这个系列帐篷的其他的一些选项
同时呢我下面我再放几个RE up across sales
交叉销售的产品
然后呢我这个设置完之后
在用户点加完呃
点击添加购物车之后呢
在购物车界面上
它也会显示这些
交叉销售的这些产品
那这个其实也是比较呃
可取的一些促销的方式
啊当然
你这里面你也可以是呃去增加别的
比如说就是增加同一个类目
下面的其他的产品
你就增加这个related products的这个空间
好然后我们现在这个促销的产品
增加完之后
我们再增加一个什么
我们可以再增加一个客户的review对吧
就是首页上我们其实已经添加好的
我只要在首页上面我就复制粘贴过来
当然啊为了Su考虑的话呢
其实你可以增加一些不一样的
让你的这个客户的review啊更丰富一点
那我们现在就呃
因为给大家演示嘛
所以
我就直接从首页复制粘贴一个过来
好然后我打开我的首页
home这里
首页的最下方这里
我直接将这个容器复制黏贴过来
然后呢我直接在这里点击粘贴好
我们的这个产客户的review也添加好了
当然你可以加个标题对吧
呃呃what our customers
say对吧
啊那
那这个标题就不加了
那你们可以自己加
然后再往下可以加个什么
可以加个FAQ
产品页面嘛
那么我们加个FAQ
其实也是比较合理的
FAQ在我产品的这个
产品分类的模板已经有了
我只要将这个容器复制粘贴过来
就是省得你再手动添加了嘛
啊把这关掉
我直接粘贴
好所以呢
我们现在产品详情页就是图片
标题评分
呃我直接发布一下
然后我们在前端来看
前端可以看到该有的内容都会有
来看一下啊
OK好
都有了好
现在这个产品页面上有了
呃图片
那当然它上面
它上面还有一个sale的徽标
因为我这个是有促销价的
然后呢增加购物车
然后产品的短描述
一些卖点总结
然后呢啊
我们可以用来给客户作为备选方案的
其他产品
然后产品的长描述
然后这里呢
放上几个交叉销售的产品
并且这几个产品
当用户添加完购物车之后呢
在购物车页面上也会显示
然后用户的评价
对吧然后最后是一个FAQ
好那么这样的话
其实这个产品详情页的元素呢
就已经相对来说比较丰富饱满了
只是这个样式呢
就是可能还没那么好看对吧
因为需要时间去调整一下
好那么这样的话呢
其实这个产品详情页就做好了
