店铺设计的基本功能有哪些
收藏课程
取消收藏
3mins / By SHOPLAZZA Learn
收藏课程
取消收藏

店铺的设计至关重要，往往能决定消费者是否认可我们的商品和独立站，但是建立一个功能齐全且具备主题设计感的独立站却需要专业的技术能力和设计审美能力，这会让很多小伙伴望而却步，那是否有这样一个平台能提供一站式的服务呢？

Shoplazza就是这样一个平台，它可以提供简单易懂的模块，不需要具备任何代码和编程类的知识，依靠可视化模块化的编辑器，任何人都可以轻易的拥有一个属于自己的独立站。

本课程将会通过录屏与讲解的方式，让你快速了解shoplazza的后台功能操作与相应前端页面展示，相信我，建立一个属于你自己独立站并不困难。

  • 0:00:10 店铺的设计至关重要，它往往能决定消费者是否认可我们的商品和独立站。Shoplazza就是这样一个平台，它可以提供简单易懂的模块，不需要具备任何代码和编程类的知识，依靠可视化模块化的编辑器，任何人都可以轻易的拥有一个属于自己的独立站。
  • 0:00:32 进入“店铺装修”标签，点击主题装修按钮，我们就可以看到当前正在使用的主体模板，点击右上角的编辑按钮，对它进行编辑吧
  • 0:00:44 我们可以把自己的网站想象成一个巨大的盒子，对它的设计，就是在用一个个更小的盒子将它逐渐填满。Shoplazza提供了各种各样的小盒子供大家选择。
  • 0:00:57 我们首先会看到我们的网站首页，它往往是顾客第一眼看到的页面。我们能看到的每一个部位几乎都是可以编辑的，不喜欢这个小盒子的话，我们可以随时删掉他，如果希望在页面的底部增加一个博客展示的话，轻点一下，它就出现了。我们甚至可以调整这些内容的上下位置，就好像积木一样。我们可以选择在主页就展示商品，让它看起来更像一个高级的橱窗，恩。。或者像一本杂志也不错。
  • 0:01:31 Shoplazza可以编辑的，远远不只是首页，一个网站内部的商品和其他页面也很重要。我们可以编辑的分为了“首页”“商品详情”“专辑详情”“搜索”“404”“结账页”以及我们自由创建的新页面等等。比如我们进入了商品详情页，既可以针对商品展示的具体形态进行编辑。跟主页一样，我们也可以在这个大盒子里，装上各种各样的小盒子，我们有充足的机会来向顾客展示我们的商品有多棒。
  • 0:02:12 除了这些丰富的功能，我个人也有一些小建议可以供大家参考： 在制作我们的网站时，尽量的让它保持风格统一且简洁， 第二，合适的图片会让我们的网站增色不少 第三，在上传图片时，一定要注意文件的大小，文件容量过大，会让网站的加载速度过慢。没有人会喜欢访问一个两分钟才能完全在打开的网页。现在就赶快动手，定制属于自己的网站吧

店铺设计的基本功能有哪些

2m 54s / By SHOPLAZZA Learn

你觉得这个课程怎么样

评分
5/5
你一定有很多想说的

0/1500

课程评论

看看学员怎么说

发表评论
顾客评论
已到底部
最新评价时间
按点赞数从大到小
按评分从高到低
按评分从低到高
×
class SpzCustomFileUpload extends SPZ.BaseElement { constructor(element) { super(element); this.uploadCount_ = 0; this.fileList_ = []; } buildCallback() { this.action = SPZServices.actionServiceForDoc(this.element); this.registerAction('upload', (data) => { this.handleFileUpload_(data.event?.detail?.data || []); }); this.registerAction('delete', (data) => { this.handleFileDelete_(data?.args?.data); }); this.registerAction('preview', (data) => { this.handleFilePreview_(data?.args?.data); }); this.registerAction('limit', (data) => { this.handleFileLimit_(); }); this.registerAction('sizeLimit', (data) => { this.handleFileSizeLimit_(); }); } isLayoutSupported(layout) { return layout == SPZCore.Layout.LOGIC; } setData_(count, file) { this.uploadCount_ = count; this.fileList_ = file; } handleFileUpload_(data) { data.forEach(i => { if(this.fileList_.some(j => j.url === i.url)) return; this.fileList_.push(i); }) this.uploadCount_++; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleFileUpload", { count: this.uploadCount_, files: this.fileList_}); if(this.fileList_.length >= 5){ document.querySelector('#review_upload').style.display = 'none'; } if(this.fileList_.length > 0){ document.querySelector('.apps-reviews-write-anonymous-box').style.marginTop = '8px'; } } handleFileDelete_(index) { this.fileList_.splice(index, 1); this.uploadCount_--; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleFileDelete", { count: this.uploadCount_, files: this.fileList_}); document.querySelector('#review_upload').style.display = 'block'; if(this.fileList_?.length === 0){ document.querySelector('.apps-reviews-write-anonymous-box').style.marginTop = '132px'; } } handleFilePreview_(index) { const finalPreviewData = this.fileList_[index]; const filePreviewModal = document.getElementById('filePreviewModal'); const fullScreenVideo = document.getElementById('fullScreenVideo'); const fullScreenImage = document.getElementById('fullScreenImage'); const previewModalClose = document.getElementById('previewModalClose'); const previewLoading = document.getElementById('previewLoading'); filePreviewModal.style.display = 'block'; previewLoading.style.display = 'flex'; if(finalPreviewData?.type === 'video'){ const media = this.mediaParse_(this.fileList_[index]?.url); fullScreenVideo.addEventListener('canplaythrough', function() { previewLoading.style.display = 'none'; }); fullScreenImage.src = ''; fullScreenImage.style.display = 'none'; fullScreenVideo.style.display = 'block'; fullScreenVideo.src = media.mp4 || ''; } else { fullScreenImage.onload = function() { previewLoading.style.display = 'none'; }; fullScreenVideo.src = ''; fullScreenVideo.style.display = 'none'; fullScreenImage.style.display = 'block'; fullScreenImage.src = finalPreviewData.url; } previewModalClose.addEventListener('click', function() { filePreviewModal.style.display = 'none'; }); } handleFileLimit_() { alert(window.AppReviewsLocale.comment_file_limit || 'please do not upload files more than 5'); this.triggerEvent_("handleFileLimit"); } handleFileSizeLimit_() { alert(window.AppReviewsLocale.comment_file_size_limit || 'File size does not exceed 10M'); } clear(){ this.fileList_ = []; this.uploadCount_ = 0; sessionStorage.setItem('fileList', JSON.stringify(this.fileList_)); this.triggerEvent_("handleClear", { count: this.uploadCount_, files: this.fileList_}); document.querySelector('#review_upload').style.display = 'block'; } mediaParse_(url) { var result = {}; try { url.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) { try { result[key] = decodeURIComponent(value); } catch (e) { result[key] = value; } }); result.preview_image = url.split('?')[0]; } catch (e) {}; return result; } triggerEvent_(name, data) { const event = SPZUtils.Event.create(this.win, name, data); this.action.trigger(this.element, name, event); } } SPZ.defineElement('spz-custom-file-upload', SpzCustomFileUpload);
The review would not show in product details on storefront since it does not support to.