This guide provides the step-by-step process to create a campaign that can be integrated with your Shopify opt-in and share pages.
After going through this guide you will be able to:
Set-up a campaign or giveaway using UpViral.
Create an opt-in page and share page in Shopify.
Integrate the opt-in page and share page codes
(Note: feel free to skip steps 1-5 if you already have an UpViral campaign created and you have an opt-in and share pages created on Shopify already as well.)
Step 1 - Make sure you have your Shopify pages created on Shopify first. You would usually need two pages: an opt-in page and a share page.
To start off, Login to your Shopify store Dashboard and from the Online Store menu, select Pages.
When you are inside, click Add Page. You can give this page any name such as Opt-in Page. Add another page called Share Page for example and you're now ready to create an UpViral campaign thereafter.
Step 2 - Make sure you create an UpViral campaign first by clicking on "Create New Campaign" at the top of your dashboard.
Step 3 - You can head straight to the Design Pages section so you can create an opt-in and share widget design first (it's important that you have these two created before installing UpViral into your own website or else you wouldn't be able to launch the campaign).
Step 4 - When editing either your opt-in page or share page templates, make sure you click on the third button (widget view) at the topmost portion of the page so that you can see how the UpViral widget looks like in widget view.
(Note: for HTML form setups, you don't necessarily need to design your opt-in form since you'll be using your own page's form which usually already has its own design; you just need to make sure the fields on UpViral are similar to the fields you have on your page's form. So if you have a phone field on your page's form, make sure you also have a phone field for example on your UpViral form. For other setups such as a standard embedded widget, popup widget, or popover widget, the design you create on the opt-in form would be the design that will be shown on your live page).
Step 5 - After making sure you have opt-in and share designs created, you can now launch your campaign by clicking on the Launch Campaign buttons.
Step 6 - Installation
First, click on the "Embed campaign" button once you're on the Publish tab of your campaign.
This will then open four steps, in which the first one is to choose how you want to embed your campaign as.
- Standard - if you want to embed UpViral as a widget directly displayed on your website
- Pop-up - if you want to use a text/button before the UpViral widget is displayed as a pop-up on your website
- Popover - if you want to use a popover button before the UpViral widget is displayed on the corner of your website
- HTML form - if you already have an existing form with name and email fields (usually for ClickFunnels setups or setups where you're using your own autoresponder form design on a page)
The second step is to choose where you want the share widget to be displayed. If it's on the same page, choose the first option. If you have a second page, which can be your Shopify share page URL (usually the page after your opt-in page), then paste the URL of your Shopify share page on the second option.
The third step is to choose where you want referral traffic to go to. Usually this is the same URL as your opt-in page if you want the loop of opt-in - share - opt-in to continue as people refer their friends back to the page they signed up from. If you want to use UpViral's page for the opt-in, then choose the first option. However, since you're using your own Shopify page to capture leads, it's best if you choose the second option and paste the URL of your opt-in page on the field provided.
Finally, the fourth step will show you what codes you need to copy and paste into your website's editor. If you're not sure how to add codes onto your specific webpage, you may need to contact your webhost.
The codes displayed in this final step also vary per widget type that you chose, sometimes this just shows 1-2 codes (ex. Standard embedded widget, Pop-up, and Popover setups) but sometimes it shows 3 codes (ex. HTML form setups), so be sure to copy all of the codes in their respective places depending on the widget type you choose.
Step 7 - Finishing your opt-in page.
Now go back to your Shopify opt-in page and click the <> icon from the page editor.
This will open the HTML editor for that page. Note: In the example screenshots below, we are using the code for HTML Form:
Copy the codes from these two boxes below on UpViral.
Go back to Shopify and paste these two in the HTML editor of your Shopify opt-in page. (The first box of code goes in the <body> tag while the second box of code goes in the footer section).
The codes save automatically.
This concludes setting up of the opt-in page on Shopify.
Step 8 - Finishing your share page.
Similarly, go back again to your Shopify share page this time and click the <> icon from the page editor.
This will open the HTML editor for that page.
Copy the share widget code from UpViral.
Go back to Shopify and paste this in the <body> tag of your share page similarly. Once done, save and publish the pages.
At this stage, the Campaign has been set up successfully using the integration between UpViral and Shopify!
How to get your support tickets resolved faster
Statistics have shown us that the more you tell us when you report an issue, the faster we solve that ticket. So...
1 - If you have screengrabs, please include them. A picture is worth a thousand words.
2 - If you have recorded a video showing the issue you're having, please include that as well. A video is worth a million words.
We recommend a free service called Loom for creating these videos. (this is a link to useloom.com)
3 - To speed up ticket resolution, follow these useful tips How to Write the Perfect Support Ticket (That Gets Results Fast)