https://www.shareloapp.com/_next/static/chunks/pages/product/shoppable-video-3ff2962915d67f95.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[190],{6685:function(e,s,t){(window.__NEXT_P=window.__NEXT_P||[]).push(["/product/shoppable-video",function(){return t(7199)}])},5785:function(e,s,t){"use strict";t.d(s,{v:function(){return g}});var a=t(5893),l=t(7294),i=t(7410),n=t(4697),o=t(6010),r=t(5675),d=t.n(r),c=t(1798);let x=()=>[{name:"carousel",i18nKey:"product.shoppable-video-page.displays.items.carousel",description:"カルーセル形式で縦型のサムネイルを表示します。例えば一つの商品の複数のバージョンを紹介するなど様々な方法で利用いただけます。",imageUrl:"/images/shoppable-video/shoppable-video-carousel.png"},{name:"grid",i18nKey:"product.shoppable-video-page.displays.items.grid",description:"グリッド形式でショッパブル動画のサムネイルを表示します。カルーセルと似ていますが、より多くのスペースをとって商品を紹介したいっ場合に適しています。",imageUrl:"/images/shoppable-video/shoppable-video-grid.png"},{name:"popup",i18nKey:"product.shoppable-video-page.displays.items.popup",description:"イトの右下や左下に固定でショッパブル動画を表示します。例えば、個別の商品ページで一番見てほしい動画やレビュー動画のフィードを表示する、トップページで最もアピールしたい商品を紹介するなどの目的に適しています。",imageUrl:"/images/shoppable-video/shoppable-video-widget.png"},{name:"lp",i18nKey:"product.shoppable-video-page.displays.items.lp",description:"文字、写真ベースのコンテンツに比べて、よりエンゲージメントの高い動画を利用して、広告のROIを最大化しましょう。",imageUrl:"/images/shoppable-video/shoppable-video-landing-page.png"},{name:"interactive-video",i18nKey:"product.shoppable-video-page.displays.items.interactive-video",description:"こだわりのある商品はストーリーを伝えることで、よりお客様に強く訴求ができます。インタラクティブ動画を作成することでストーリーを伝えながら商品を販売することができます。",imageUrl:"/images/shoppable-video/shoppable-video-quiz.png"},{name:"stories",i18nKey:"product.shoppable-video-page.displays.items.stories",description:"サイト内に小さめのサムネイルで動画フィードを埋め込むタイプの表示方法です。スペースを取らないので、例えば、お客様からのレビュー動画を商品ページに埋め込むなどの利用方法に最適です。",imageUrl:"/images/shoppable-video/shoppable-video-stories.png"}];function m(){let{t:e}=(0,c.$G)(),s=(0,l.useMemo)(()=>x(),[]),[t,o]=(0,l.useState)(0),[r,m]=(0,l.useState)(0),p=(0,n.y1)(e=>{m(e),o(e=>e+1)},100,{leading:!0});return(0,a.jsxs)(i.OK.Group,{as:"div",className:"grid grid-cols-12 items-center gap-8 lg:gap-16 xl:gap-24",selectedIndex:r,onChange:p,children:[(0,a.jsx)(i.OK.List,{className:"relative z-10 order-last col-span-8 grid grid-cols-2 gap-5",children:s.map((s,t)=>(0,a.jsxs)("div",{className:"relative rounded-2xl transition-colors",children:[t===r?(0,a.jsx)("div",{className:"absolute inset-0 border-2 border-indigo-600 rounded-2xl bg-white shadow-sm"}):(0,a.jsx)("div",{className:"absolute inset-0 border-2 border-transparent rounded-2xl bg-white shadow-sm"}),(0,a.jsxs)("div",{className:"relative z-10 p-8",children:[(0,a.jsx)("h3",{className:"text-xl font-semibold text-gray-800",children:(0,a.jsxs)(i.OK,{className:"text-left [&:not(:focus-visible)]:focus:outline-none",children:[(0,a.jsx)("span",{className:"absolute inset-0 rounded-2xl"}),(0,a.jsxs)("span",{className:"inline-flex items-center",children:[e("".concat(s.i18nKey,".title")),"stories"===s.name&&(0,a.jsx)("span",{className:"ml-3",children:(0,a.jsx)("span",{className:"inline-flex items-center rounded-3xl bg-indigo-50 px-2 py-1 text-xs sm:text-sm font-bold text-indigo-600",children:"Coming soon"})})]})]})}),(0,a.jsx)("p",{className:"mt-2 text-sm text-gray-600",children:e("".concat(s.i18nKey,".description"))})]})]},s.name))}),(0,a.jsx)("div",{className:"relative col-span-4",children:(0,a.jsx)(i.OK.Panels,{as:l.Fragment,children:s.map((e,s)=>r===s?(0,a.jsx)(i.OK.Panel,{static:!0,className:"col-start-1 row-start-1 flex focus:outline-offset-[32px] [&:not(:focus-visible)]:focus:outline-none",children:(0,a.jsx)(d(),{src:e.imageUrl,className:"rounded-xl",alt:"".concat(e.name),width:675,height:1200,style:{width:"100%",height:"100%",objectFit:"contain"}})},e.name+t):null)})})]})}function p(){let{t:e}=(0,c.$G)(),[s,t]=(0,l.useState)(0),i=(0,l.useRef)(),n=(0,l.useRef)([]),r=(0,l.useMemo)(()=>x(),[]);return(0,l.useEffect)(()=>{let e=new window.IntersectionObserver(e=>{for(let s of e)if(s.isIntersecting){t(n.current.indexOf(s.target));break}},{root:i.current,threshold:.6});for(let s of n.current)s&&e.observe(s);return()=>{e.disconnect()}},[i,n]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("div",{ref:i,className:"-mb-4 flex snap-x snap-mandatory -space-x-4 overflow-x-auto overscroll-x-contain scroll-smooth pb-4 [scrollbar-width:none] sm:-space-x-6 [&::-webkit-scrollbar]:hidden",children:r.map((s,t)=>(0,a.jsx)("div",{ref:e=>{n.current[t]=e},className:"w-full flex-none snap-center px-4 sm:px-6",children:(0,a.jsxs)("div",{className:"relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6",children:[(0,a.jsx)(d(),{src:s.imageUrl,className:"rounded-xl",alt:"".concat(s.name),width:675,height:1200,style:{width:"100%",height:"100%",objectFit:"contain"}}),(0,a.jsxs)("div",{className:"bg-gray-800/95 p-4 backdrop-blur sm:p-6",children:["stories"===s.name&&(0,a.jsx)("div",{className:"mb-3",children:(0,a.jsx)("span",{className:"inline-flex items-center rounded-3xl bg-indigo-50 px-2 py-1 text-xs sm:text-sm font-bold text-indigo-600",children:"Coming soon"})}),(0,a.jsx)("h3",{className:"mt-2 text-sm font-semibold text-white sm:text-lg",children:e("".concat(s.i18nKey,".title"))}),(0,a.jsx)("p",{className:"mt-2 text-sm text-gray-400",children:e("".concat(s.i18nKey,".description"))})]})]})},t))}),(0,a.jsx)("div",{className:"mt-6 flex justify-center gap-3",children:r.map((e,t)=>(0,a.jsx)("button",{type:"button",className:(0,o.Z)("relative h-0.5 w-4 roun

1ded-full",t===s?"bg-gray-300":"bg-gray-500"),"aria-label":"Go to slide ".concat(t+1),onClick:()=>{n.current[t].scrollIntoView({block:"nearest",inline:"nearest"})},children:(0,a.jsx)("span",{className:"absolute -inset-x-1.5 -inset-y-3"})},t))})]})}function g(){let{t:e}=(0,c.$G)();return(0,a.jsxs)("section",{id:"features","aria-label":"Features for investing all your money",className:"bg-indigo-100 py-20 sm:py-32",children:[(0,a.jsx)("div",{className:"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8",children:(0,a.jsxs)("div",{className:"mx-auto max-w-2xl lg:mx-0 lg:max-w-4xl",children:[(0,a.jsx)("h2",{className:"text-3xl font-bold tracking-tight text-gray-800",children:e("product.shoppable-video-page.displays.heading")}),(0,a.jsx)("p",{className:"mt-2 text-lg text-gray-500",children:e("product.shoppable-video-page.displays.description")})]})}),(0,a.jsx)("div",{className:"mt-16 md:hidden",children:(0,a.jsx)(p,{})}),(0,a.jsx)("div",{className:"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 hidden md:mt-20 md:block",children:(0,a.jsx)(m,{})})]})}},8102:function(e,s,t){"use strict";var a=t(5893),l=t(6806),i=t(8115),n=t(7294);s.Z=e=>{let{children:s}=e;return(0,a.jsxs)(n.Fragment,{children:[(0,a.jsx)(i.Z,{}),s,(0,a.jsx)(l.$,{})]})}},7199:function(e,s,t){"use strict";t.r(s),t.d(s,{ProductShoppableVideo:function(){return K},__N_SSG:function(){return k},default:function(){return _}});var a=t(5893),l=t(7294),i=t(5681),n=t(1798),o=t(5017),r=t(1163);let d=()=>{let{locale:e}=(0,r.useRouter)(),{t:s}=(0,n.$G)(),t=(0,o.wW)(),l=(0,i.i_)(e);return(0,a.jsx)("div",{className:"px-3 lg:px-0 mx-auto max-w-7xl block",children:(0,a.jsx)("div",{className:"my-12 relative rounded-3xl px-6 py-10 bg-zinc-900 overflow-hidden shadow-xl sm:px-12 sm:py-20",children:(0,a.jsxs)("div",{className:"max-w-4xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8",children:[(0,a.jsxs)("h2",{className:"text-3xl font-bold text-white sm:text-5xl",children:[(0,a.jsx)("span",{className:"block mb-4",children:s("solutions-ecomm-page.call-to-action.heading.part-one")}),(0,a.jsx)("span",{className:"block",children:s("solutions-ecomm-page.call-to-action.heading.part-two")})]}),(0,a.jsx)("div",{className:"mt-8 sm:mt-12 text-center lg:mx-0",children:(0,a.jsx)("a",{onClick:()=>t("signupClicked"),href:l,className:"mt-3 w-full px-6 lg:px-8 py-3 lb:py-4 border border-transparent text-base lg:text-xl font-bold rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto",children:s("buttons.try_for_free")})})]})})})};var c=t(4475),x=t(4727),m=t(7796);let p=()=>[{name:"コード埋め込みだけで簡単設置",i18nKey:"product.shoppable-video-page.features.items.embed",description:"シェアロの発行する埋め込みコードを活用すれば、ShopifyやStudio、Webflowなどご利用中のECサイトに簡単にショッパブル動画を簡単に設置できます。",icon:(0,a.jsx)(m.Z,{className:"h-6 w-6 text-gray-600"})},{name:"高速な動画表示",i18nKey:"product.shoppable-video-page.features.items.blazing_fast",description:"シェアロの動画は、モバイルに最適化された形で提供しています。またShareloの埋め込みは、Shopifyストアの読み込み時間に影響しません。",icon:(0,a.jsx)(x.Z,{className:"h-6 w-6 text-gray-600"})},{name:"アナリティクス",i18nKey:"product.shoppable-video-page.features.items.analytics",description:"シェアロに組み込まれた解析機能を利用すれば、動画の閲覧数や滞在時間、売上など様々な情報をトラックし動画の改善に役立てることができます。",icon:(0,a.jsx)(c.Z,{className:"h-6 w-6 text-gray-600"})}];function g(){let{t:e}=(0,n.$G)(),s=(0,l.useMemo)(()=>p(),[]);return(0,a.jsx)("section",{id:"secondary-features","aria-label":"Features for building a portfolio",className:"py-20 sm:py-32",children:(0,a.jsxs)("div",{className:"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8",children:[(0,a.jsxs)("div",{className:"max-w-3xl",children:[(0,a.jsx)("h2",{className:"text-3xl font-bold tracking-tight text-gray-800 mb

1-4",children:e("product.shoppable-video-page.features.heading")}),(0,a.jsx)("p",{className:"mt-2 text-lg text-gray-600",children:e("product.shoppable-video-page.features.subheading")})]}),(0,a.jsx)("ul",{role:"list",className:"mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-3",children:s.map(s=>(0,a.jsxs)("li",{className:"rounded-2xl border-2 border-gray-300 p-8",children:[s.icon,(0,a.jsx)("h3",{className:"mt-6 font-semibold text-gray-800 text-lg",children:e("".concat(s.i18nKey,".title"))}),(0,a.jsx)("p",{className:"mt-2 text-gray-700",children:e("".concat(s.i18nKey,".description"))})]},s.name))})]})})}var h=t(5152),u=t.n(h);let b=u()(()=>t.e(4).then(t.bind(t,2004)),{loadableGenerated:{webpack:()=>[2004]},ssr:!1});var f=()=>{let{t:e}=(0,n.$G)(),{locale:s}=(0,r.useRouter)(),t=(0,o.wW)(),l=(0,i.i_)(s);return(0,a.jsxs)("div",{className:"lg:grid lg:grid-cols-12 lg:gap-16",children:[(0,a.jsxs)("div",{className:"text-left sm:text-left md:max-w-3xl md:mx-auto lg:col-span-7 lg:text-left lg:flex lg:flex-col lg:justify-center",children:[(0,a.jsx)("div",{className:"mb-4 text-lg text-indigo-500 font-bold",children:e("product.shoppable-video-page.hero.title")}),(0,a.jsx)("h1",{className:"leading-loose tracking-wide",children:(0,a.jsxs)("span",{className:"mt-1 tracking-wide font-bold text-3xl sm:text-4xl flex flex-col space-y-4",children:[(0,a.jsx)("span",{className:"block text-white",children:e("product.shoppable-video-page.hero.heading.paragraph1")}),(0,a.jsx)("span",{className:"block text-white",children:e("product.shoppable-video-page.hero.heading.paragraph2")})]})}),(0,a.jsx)("p",{className:"mt-4 sm:mt-6 lg:mt-8 text-base text-gray-300 sm:text-base md:text-lg lg:text-xl lg:leading-normal leading-loose",children:e("product.shoppable-video-page.hero.subheading")}),(0,a.jsx)("div",{className:"mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0",children:(0,a.jsx)("a",{onClick:()=>t("signupClicked"),href:l,className:"mt-3 w-full px-6 py-3 border border-transparent text-base font-bold rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:flex-shrink-0 sm:inline-flex sm:items-center sm:w-auto",children:e("buttons.try_for_free")})})]}),(0,a.jsx)("div",{className:"mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-5 lg:flex lg:items-center justify-center drop-shadow-xl",children:(0,a.jsx)(b,{playing:!0,muted:!0,loop:!0,playsinline:!0,url:"/videos/shoppable-video-sample.mp4",width:"270px",height:"480px",style:{borderRadius:"1rem",overflow:"hidden",alignItems:"center",margin:"0 auto"}})})]})},v=t(5785);let j=()=>{let{locale:e}=(0,r.useRouter)(),{t:s}=(0,n.$G)();return(0,a.jsx)("section",{id:"secondary-features","aria-label":"Features for building a portfolio",className:"py-20 sm:py-32",children:(0,a.jsxs)("div",{className:"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8",children:[(0,a.jsxs)("div",{className:"max-w-3xl",children:[(0,a.jsx)("h2",{className:"text-3xl font-bold tracking-tight text-gray-800 mb-4",children:s("product.shoppable-video-page.examples.heading")}),(0,a.jsx)("p",{className:"mt-2 text-lg text-gray-600",children:s("product.shoppable-video-page.examples.description")})]}),(0,a.jsx)("div",{className:"mt-16 max-w-7xl",children:(0,a.jsx)("sharelo-carousel",{"data-storyId":"en"===e?"ooeFNK9xcJ9KRpsp7Nsvq":"PhXY7CeA0821E4BsPfhY6"})})]})})};var y=()=>(0,a.jsxs)("main",{className:"w-full",children:[(0,a.jsx)("div",{className:"w-full block relative",children:(0,a.jsx)("div",{className:"bg-zinc-900 w-full py-8 px-4 sm:py-16 sm:px-6 lg:py-12 xl:py-16 relative",children:(0,a.jsx)("div",{className:"mx-auto max-w-6xl block",children:(0,a.jsx)(f,{})})})}),(0,a.jsx)(j,{}),(0,a.jsx)(v.v,{}),(0,a.jsx)(g,{}),(0,a.jsx)(d,{})]}),N=t(5867),w=t(8102),k=!0;let K=()=>{let{t:e}=(0,n.$G)();return(0,a.jsxs)("div",{className:"flex flex-col items-center justify-center min-h-screen",children:[(0,a.jsx)(N.Z,{title:e("seo.product.shoppable-video-page.title"),desc:e("seo.product.shoppable-video-page.description")}),(0,a.jsx)(w.Z,{children:(0,a.jsx)(y,{})})]})};var _=K}},function(e){e.O(0,[342,673,186,136,774,888,179],function(){return e(e.s=6685)}),_N_E=e.O()}]);