Shopify themes, liquid, logos, and UX
Hi all. I would like to embed the code provided by the Viral Loops app on my Dawn homepage. I’ve followed their instructions and successfully (easily) added it to a new page, but I can’t figure out how to add it to the homepage.
Here’s the response from the app developers:
I searched a little bit more about the Shopify home page installation and it seems that Shopify doesn't allow for an easy installation of a custom script. You will have to go to the edit theme option of your store and then write code in liquide.info. I am afraid this is something we cannot support.
I am comfortable adding it to the liquid code if someone is able to provide some direction. I’ve tried placing it in a few places but it’s been unsuccessful.
I’m good with these elements just being stacked. Here’s the code they’ve provided…
Campaign JavaScript
Start by adding the campaign javascript snippet in your website. You need this in the landing page of your website (where referral links will direct people) and also in every page where you will add the widgets for this campaign.
In the HTML of the page, add the following snippet of code right before the closing </body>
tag:
<script>!function(){var a=window.VL=window.VL||{};return a.instances=a.instances||{},a.invoked?void(window.console&&console.error&&console.error("VL snippet loaded twice.")):(a.invoked=!0,void(a.load=function(b,c,d){var e={};e.publicToken=b,e.config=c||{};var f=document.createElement("script");f.type="text/javascript",f.id="vrlps-js",f.defer=!0,f.src="https://app.viral-loops.com/client/vl/vl.min.js";var g=document.getElementsByTagName("script")[0];return g.parentNode.insertBefore(f,g),f.onload=function(){a.setup(e),a.instances[b]=e},e.identify=e.identify||function(a,b){e.afterLoad={identify:{userData:a,cb:b}}},e.pendingEvents=[],e.track=e.track||function(a,b){e.pendingEvents.push({event:a,cb:b})},e.pendingHooks=[],e.addHook=e.addHook||function(a,b){e.pendingHooks.push({name:a,cb:b})},e.$=e.$||function(a){e.pendingHooks.push({name:"ready",cb:a})},e}))}();var campaign=VL.load("kH1s1WjMSYcfV4jgkqrwVU8hLWg",{autoLoadWidgets:!0});</script>
Form html:
To add the Form Widget in your page, add the following HTML where you want it to appear:
<div data-vl-widget="embedForm"></div>
Milestone widget html:
It has two forms: expanded and compressed.
You just need to install it once and it will adapt to fit in the page around it. This is useful for showing the widget in smaller screens or just adding in it in a small part of your page, eg. in a sidebar.
To add the Milestone Widget in your page, add the following HTML where you want it to appear:
<div data-vl-widget="milestoneWidget"></div>
I’m working on a fresh copy of Dawn with no modifications. Any direction you can provide on which files to place this in and where would be much appreciated! For context, I’m building a pre-launch page and this is going to take up the entire homepage (plus a logo at the top and a footer).
Thanks in advance!
Solved! Go to the solution
This is an accepted solution.
I figured it out, just had to find the right place within theme.liquid.
This is an accepted solution.
I figured it out, just had to find the right place within theme.liquid.
Hey, where exactly did you paste the code within theme.liquid?
Find Global Growth Opportunities For Your Business with Shopify AcademyLearn how to exp...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025