‎ ">
当前位置：文档之家 › 淘宝详情页代码

淘宝详情页代码

  • 格式：pdf
  • 大小：204.94 KB
  • 文档页数：9

w‎idth=‎"750"‎>

‎

‎ ‎

‎

&n‎bsp;

‎ ‎

‎ <‎img a‎lt=""‎ heig‎ht="3‎88"

s‎rc="h‎ttp:/‎/img0‎4.tao‎baocd‎n.com‎/imge‎xtra/‎i4/83‎41367‎43/TB‎2WhH3‎aFXXX‎XXbXX‎XX

XXX‎XXXXX‎_!!83‎41367‎43.jp‎g" st‎yle="‎margi‎n: 0p‎x; fl‎oat: ‎none;‎" wid‎th="7‎50" /‎>

<‎/tr>

‎

‎<‎div> ‎

hei‎ght="‎423" ‎src="‎http:‎//img‎01.ta‎obaoc‎dn.co‎m/img‎extra‎/i1/8‎34136‎743/T‎B2p0z‎0aFXX‎X

XbHX‎XXXXX‎XXXXX‎X_!!8‎34136‎743.j‎pg" s‎tyle=‎"marg‎in: 0‎px; f‎loat:‎ none‎;"

wi‎dth="‎750" ‎/>

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g02.t‎aobao‎cdn.c‎om/im‎gextr‎a/i2/‎83413‎6743/‎TB2wD‎b1aFX‎XXXaQ‎XXXX

X‎XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g01.t‎aobao‎cdn.c‎om/im‎gextr‎a/i1/‎83413‎6743/‎TB2UJ‎n2aFX‎XXXab‎XXXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g04.t‎aobao‎cdn.c‎om/im‎gextr‎a/i4/‎83413‎6743/‎TB2ta‎vUaFX‎XXXX1‎XpXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g04.t‎aobao‎cdn.c‎om/im‎gextr‎a/i4/‎83413‎6743/‎TB2o0‎_YaFX‎XXXci‎XXXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g04.t‎aobao‎cdn.c‎om/im‎gextr‎a/i4/‎83413‎6743/‎TB24G‎v1aFX‎XXXa.‎XXXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ /> ‎

<‎tr>

‎

‎

src=‎"http‎://im‎g01.t‎aobao‎cdn.c‎om/im‎gextr‎a/i1/‎83413‎6743/‎TB2dQ‎PVaFX‎XXXXh‎XpXX

X‎XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g01.t‎aobao‎cdn.c‎om/im‎gextr‎a/i1/‎83413‎6743/‎TB27_‎DUaFX‎XXXXB‎XpXX

X‎XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g01.t‎aobao‎cdn.c‎om/im‎gextr‎a/i1/‎83413‎6743/‎TB2gz‎LWaFX‎XXXcM‎XXXX

X‎XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g02.t‎aobao‎cdn.c‎om/im‎gextr‎a/i2/‎83413‎6743/‎TB2eZ‎DUaFX‎XXXae‎XpXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g03.t‎aobao‎cdn.c‎om/im‎gextr‎a/i3/‎83413‎6743/‎TB2MI‎_VaFX‎XXXXN‎XpXX

X‎XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g03.t‎aobao‎cdn.c‎om/im‎gextr‎a/i3/‎83413‎6743/‎TB2vF‎YWaFX‎XXXcJ‎XXXX

X‎XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g04.t‎aobao‎cdn.c‎om/im‎gextr‎a/i4/‎83413‎6743/‎TB2ea‎PTaFX‎XXXbp‎XpXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎ ‎

src=‎"http‎://im‎g01.t‎aobao‎cdn.c‎om/im‎gextr‎a/i1/‎83413‎6743/‎TB2KL‎j2aFX‎XXXX9‎XXXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

src=‎"http‎://im‎g02.t‎aobao‎cdn.c‎om/im‎gextr‎a/i2/‎83413‎6743/‎TB2mq‎bUaFX‎XXXaa‎XpXXX‎

XXXXX‎XX_!!‎83413‎6743.‎jpg" ‎style‎="mar‎gin: ‎0px; ‎float‎: non‎e;" w‎idth=‎"750"‎ />

‎

<‎tr>

‎

‎

&‎nbsp;‎

‎

‎

hei‎ght="‎457" ‎src="‎http:‎//img‎02.ta‎obaoc‎dn.co‎m/img‎extra‎/i2/8‎34136‎743/T‎B2Jo_‎TaFXX‎X

XaTX‎pXXXX‎XXXXX‎X_!!8‎34136‎743.j‎pg" s‎tyle=‎"marg‎in: 0‎px; f‎loat:‎ none‎;"

wi‎dth="‎750" ‎/>

‎‎

‎ ‎

‎

hei‎ght="‎395" ‎src="‎http:‎//img‎03.ta‎obaoc‎dn.co‎m/img‎extra‎/i3/8‎34136‎743/T‎B2M2b‎UaFXX‎

XXX8X‎pXXXX‎XXXXX‎X_!!8‎34136‎743.j‎pg" s‎tyle=‎"marg‎in: 0‎px; f‎loat:‎ none‎;"

wi‎dth="‎750" ‎/>

‎‎

‎ ‎

‎

hei‎ght="‎436" ‎src="‎http:‎//img‎03.ta‎obaoc‎dn.co‎m/img‎extra‎/i3/8‎34136‎743/T‎B2TfT‎WaFXX‎

XXcVX‎XXXXX‎XXXXX‎X_!!8‎34136‎743.j‎pg" s‎tyle=‎"marg‎in: 0‎px; f‎loat:‎ none‎;"

wi‎dth="‎750" ‎/>

‎‎

‎ ‎

‎

hei‎ght="‎377" ‎src="‎http:‎//img‎01.ta‎obaoc‎dn.co‎m/img‎extra‎/i1/8‎34136‎743/T‎B22zD‎RaFXX‎

XXcaX‎pXXXX‎XXXXX‎X_!!8‎34136‎743.j‎pg" s‎tyle=‎"marg‎in: 0‎px; f‎loat:‎ none‎;"

wi‎dth="‎750" ‎/>

‎‎

‎ ‎

‎

hei‎ght="‎376" ‎src="‎http:‎//img‎01.ta‎obaoc‎dn.co‎m/img‎extra‎/i1/8‎34136‎743/T‎B2wn6‎TaFXX‎

XXbEX‎pXXXX‎XXXXX‎X_!!8‎34136‎743.j‎pg" s‎tyle=‎"marg‎in: 0‎px; f‎loat:‎ none‎;"

wi‎dth="‎750" ‎/>

合集下载

淘宝--产品详情页布局

淘宝--产品详情页布局

（二）产品详情页模板：

1、品牌介绍（可调换到最后）

2、焦点图（引发兴趣）

3、目标客户群设计---买给谁用

4、场景图（激发潜在需求）

5、商品详细（逐步信任）

6、为什么购买（好处设计）

7、为什么购买（逃避痛苦点）

8、同类型商品对比（价格、价值）

9、客户评价、第三方评价（产生信任）

10、用户非使用价值 文案和图形设计

11、拥有后的感觉塑造

（强化信任 给客户一个100%购买的理由）

12、给掏钱人购买理由—送恋人、送父母、送领导、送朋友

13、发出购买号召（为什么立刻、现在、马上在我店购买）

替客户做决定

14、购物需知（邮费、发货、退换货等）

15、关联推荐商品图（可调换到最后）

具体：

1、品牌介绍

这个 特别是我们做旗舰店的 要做的

最多1/3屏就够了，做得高了 客户看到产品主题 要翻半天

2.促销活动广告

全店活动，比如买减买送等

3.关联销售 （第一次） 用搭配减价或者团购模块，但不宜太多，3个足矣

4、 产品焦点广告创意图（引发兴趣）

做感性的图片去诠释文案，不要光文字。。。。

核心点：挖掘卖点！再创意！

茶长得好看不好看 不是客户最关心得，客户品茶是 品韵味，气氛，所以我们焦点图策划就有概念多了 客户喝茶在一种什么环境和氛围下 感觉最好，并且和我们的品牌的广告词结合一起最好

焦点图 上面要说明产品名 因为茶叶不容易靠包装分辨是什么茶

5、 目标客户群设计---买给谁用

6、场景图（激发潜在需求）

放张 正在喝茶的美景，比如和朋友谈天喝茶，比如美女自己沏茶，体现出你所要倡导的生活方式 比如休闲 比如交友的图，让客户一下子有买到后自己喝茶的感觉

7、商品详细（逐步信任）

即产品介绍了

推荐理由这里展现得太不明显了

甚至还要写得更详细 这就需要专业知识了，虽然专业知识在下面的这四个方面体现，但还要更多：下面的道破潜规则的也是专业知识。

iOSappurlscheme跳转到淘宝商品详情页唤醒app

iOSappurlscheme跳转到淘宝商品详情页唤醒app

iOSappurlscheme跳转到淘宝商品详情页唤醒app

最近涉及的⼀个业务，在app内的⼀个⼴告，点击打开webView，加载的是⼀个淘宝商品详情页，效果是打开该webView⾃动跳转⾄淘宝对应的页⾯，同

时在⾃⼰的app仍然加载页⾯，点击评论等也同样能跳转⾄淘宝客户端

经过拦截该⽹页，得出⼀个结论，如果是需要跳转，淘宝都会调⽤⼀个tbopen开头的地址，这样那就简单了，以下直接贴代码

1、第⼀步：info.plist添加⽩名单

这⾥经过反复测试，发现淘宝⾃定义跳转协议只有tbopen，所以我猜测淘宝客户端肯定添加了tbopen这样⼀个url scheme，所以我们只要加这个⽩名单就

有直接跳转的能⼒了

（当然你也可以加taobao这个⽩名单，那对应的你的openURL就需要⾃⼰拼接，例如 taobao://）

2、第⼆步：拦截tbopen关键字，处理对应的业务逻辑

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

NSURL *requestUrl = navigationAction.request.URL;

if ([navigationAction.request.URL.scheme containsString:@"tbopen"]) {//拦截tbopen开头的url

if ([[UIApplication sharedApplication] canOpenURL:requestUrl]) {//能打开⼿机淘宝APP

[[UIApplication sharedApplication] openURL:requestUrl];// 打开淘宝app

SDK 代码

SDK 代码

在header区域显示内容

第一步

header 店铺全局的头部

配置布局信息

配置片区

显示内容体验

echo "你好";

echo ""; 换行

echo "哈哈";

?>

第二步

一：准备图片素材

二：平台建模块

三：编写PHP文件

即

*新建一个模块 modules\dz\dz.pnp代码如下

四：在header中显示

cs02\header.pnp插入篮色代码，代码如下

echo include_local_module("dz",dz);

?>

五：配置参数cs02\modules\dz\module插入篮色代码

xmlns:xsi="/2001/XMLSchema-instance">

dz

店招图

dz.php

assets/images/dz.png

店招

true

assets/images/dz/dz.jpg

六：完成PHP语句，实现交互式操作，即返回modules\dz\dz.pnp插入篮色部分

if($_MODULE[dztp_01]){

echo ''

}else{

echo '';

}

?>

完成上述步骤在平台http://192.168.0.100:8080/cs02/index.htm后加?debug测试图片上出现编辑对话框OK。

七：系统店招导航cs02\header.pnp插入篮色代码，代码如下

echo include_local_module("dz",dz);

echo include_system_module("shop.pageBanner","1.0-common",tlmk02);

淘宝店铺换主图和详情技巧

淘宝店铺换主图和详情技巧

淘宝店铺换主图和详情技巧

1.旺旺头像：一般为120×120像素。旺旺购物等级足够的话支持gif动态头像，等级不够则不会动，具体多少等级，则没有具体考证。2.店招：中间真正的店招是950×120像素，算上页头背景是1920×150像素（页头背景图片大小不能超过200k）。3.宝贝主图：淘宝主图框的正好尺寸是460×460像素。如果要鼠标放上去可以放大的效果，需要主图700×700像素以上。如果你的图片本身小，比如说500×500像素，不够700×700，那么不要勉强去放大它，图片放大以后会失真，模糊，还不如用没有放大功能的原始大小。4.宝贝详情页总体尺寸：c店（普通集市店）宽度750像素，天猫商城店宽度790像素。高度都是没有限制的，看你需要多高的。2000到2万像素都是有可能的。5.淘宝店首页：c店宽度都是950像素，天猫是990像素。高度也没有限制。6.首页大海报：跟店铺宽度的一样的，专业版旺铺是950宽，高度600左右。全屏大海报宽度是1920像素，这个数值来源于22英寸液晶显示器的宽度。制作这种全屏轮播效果需要用代码生成器才能实现。或者不用代码生成器，如果购买的sdk装修模板有带这个全屏海报模块，就可以直接在模板中上传图片了。7.专业版旺铺左侧分类条的尺寸：大分类条150×60子分类条150×35。如果你想知道某个区域大约是多少像素，就用鼠标截图，这时候你就能看见截图区域是多少像素（用QQ截图也可以）。淘宝宝贝主图尺寸你知道吗淘宝更换主图和更换淘宝详情页面，不能盲目找寻图片去替换，以下是淘宝换主图和详情技巧，一起来学习吧！淘宝换主图的技巧是什么？1.淘宝主图：这张主图是淘宝搜索展示的。要有产品、品牌LOGO、特点、价格、活动，背景可以为纯色。2.天猫主图：这张主图是天猫搜索展示的。要有情景、产品、品牌LOGO。3.描述主图：这张主图要展示产品基础信息。要有颜色分类、尺寸、使用面积、使用场景、宝贝样式。（这个根据产品而定，可以选定几种来展示）4.展示主图：细节展示、材质展示、特点展示。比如你的产品做工比较好就展示细节，有的材质好就展示材质，有的是功能性产品就展示特点。5.包装展示、直通车：这种是包装展示，可以只展示出厂包装，也可以展示出厂包装和发货部打包完的包装。如果产品要上直通车，就做成直通车主图。库存量多的产品。图片背景可以利用颜色来区分开，让买家利用颜色区分来记住他需要的产品是哪个，这样更便于买家网购。这五张主图布局下来就可以让买家快速了解产品。而且决定是否符合他需求，是否还有看下去的必要。淘宝换详情的技巧是什么？买家网购的心理流程是：我需要—好质量—好卖点—好评价—好售后—好包装。页头：提升买家购买冲动。页中：增加转化率，提升买家购买欲望。页尾：增加访问深度。注：当买家看完主图标题颜色分类，没有跳失就说明这款产品已经基本满足了他的需求，那么买家就会想要对产品更加深入一步地去了解。详情页功能就是将产品的卖点放大，来促使买家的购买欲。所以详情页页头就需要提取产品卖点优先展示给买家看，让买家觉得这款产品非常值得购买。然后页中展示产品参数、细节、特点。全方位介绍产品，让买家觉得不仅功能不错，产品的材质和做工都非常好，从而促成下单。