https://docs.n7.io/avo/integration/Recent content in Server-Side Integration on N7 DocsHugoenhttps://docs.n7.io/avo/integration/shopify/Mon, 01 Jan 0001 00:00:00 +0000https://docs.n7.io/avo/integration/shopify/<p>This documentation explains how to update Shopify end configuration to proxy video requests to N7 AVO.<br/></p> <h2 id="prerequisites">Prerequisites<a class="heading-anchor" href="#prerequisites" aria-label="Link to this section">#</a></h2> <ol> <li>You should have access to Shopify admin portal (<a href="https://admin.shopify.com/" target="_blank" rel="noreferrer">admin.shopify.com</a> )</li> <li>You should have a Nitrogen AVO endpoint available. If you have not received it - check with the Nitrogen POC person in contact with you, OR mail to <a href="mailto:support@n7.io" target="_blank" rel="noreferrer">support@n7.io</a> .</li> </ol> <h2 id="steps">Steps<a class="heading-anchor" href="#steps" aria-label="Link to this section">#</a></h2> <ol> <li> <h3 id="creating-avo-settings">Creating AVO settings<a class="heading-anchor" href="#creating-avo-settings" aria-label="Link to this section">#</a></h3> <ol> <li>Open <a href="https://admin.shopify.com/" target="_blank" rel="noreferrer">https://admin.shopify.com/</a> </li> <li>Go to <code>Sales channels &gt; Online store themes &gt; Themes</code> menu from left side.</br> Edit code for your <em>current theme</em> by clicking on <code>...</code> menu and then clicking <code>Edit code</code> menu.</br> <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/1.png" alt="Step" > </br></li> <li>Select <code>config</code> folder and then open <code>settings_schema.json</code> file.</br> Then add our AVO setting from <a href="https://docs.n7.io/avo/integration/avo_setting.json" >this file</a> </br> <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/2.png" alt="Step" > </br></li> <li>Now select <code>Snippets</code> folder, and copy <a href="https://docs.n7.io/avo/integration/avo-video.liquid" >avo-video.liquid</a> file to it. <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/3.png" alt="Step" > </br></li> </ol> </li> <li> <h3 id="configuring-avo">Configuring AVO<a class="heading-anchor" href="#configuring-avo" aria-label="Link to this section">#</a></h3> <ol> <li>Open <a href="https://admin.shopify.com/" target="_blank" rel="noreferrer">https://admin.shopify.com/</a> </li> <li>Go to <code>Sales channels &gt; Online store themes &gt; Themes</code> menu from left side.</br> Click on <code>Edit theme</code> button next to your <code>Current theme</code> mentioned there. <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/4.png" alt="Step" > </br></li> <li>Click on <code>settings</code> menu at top</br> <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/5.png" alt="Step" > </br></li> <li>Go to <code>AVO</code> menu, and enable it. Then add the AVO endpoint shared with you, and your current video domain name. <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/6.png" alt="Step" > </br></li> </ol> </li> <li> <h3 id="using-avo">Using AVO<a class="heading-anchor" href="#using-avo" aria-label="Link to this section">#</a></h3> <ol> <li>Open <a href="https://admin.shopify.com/" target="_blank" rel="noreferrer">https://admin.shopify.com/</a> </li> <li>Go to <code>Sales channels &gt; Online store themes &gt; Themes</code> menu from left side.</br> Edit code for your <em>current theme</em> by clicking on <code>...</code> menu and then clicking <code>Edit code</code> menu.</br> <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/1.png" alt="Step" > </br></li> <li>Now, in all the liquid files where you have added videos, you need to replace the current <code>video</code> tags with <code>avo-video</code> tags with respective settings.</br> You can find example in <a href="https://docs.n7.io/avo/integration/avo-video.liquid" >this file</a> </br> <img src="https://docs.n7.io/assets/images/AVO/integration/shopify/7.png" alt="Step" > </li> </ol> </li> </ol>