Setting Up the Rewards Page on Shopify

Step 1: Creating the rewards page template

• In the live theme, under the “templates” folder, create a new template of type "page" and give it a name. As a convention - “rewards”  for the rewards page, and "refer" for the referral page. This is the only time you should be editing the live theme.

• In the Pages section on Shopify, create a new page and call it “rewards” for the rewards page, and in the Template dropdown, select the name of the template you created in the theme.

• Duplicate the theme and name it “yotpo loyalty dev”. 

Step 2: Setting up the rewards page layout

In the Snippets folder, create a separate snippet for each section of the page (header, referral, vip tiers etc). 

In the Templates folder, in the template of the rewards page we created in Step 1, set up the main layout of the page, and use {% include ‘snippet-name’ %} to add each component to the rewards page. 

In most builds, the order of the sections will change depending on whether or not the customer is logged in or out. Use Liquid to set up both options:

{% if customer %} <!-- code for logged in customer --> {% else %} <!-- code for logged out customer --> {% endif %}

After we create each module in the Yotpo Admin, we either get 1 or 2 lines of code to publish it (depending on the version). 

If we see 2 lines - the first is the loader, which we only need to use once in each page that contains modules (it is identical across modules).

The second line will show the module itself wherever you paste it. We paste this in the appropriate liquid file we created in the Snippets folder. 

Note that the module will display on-site only if it's published. 

Setting Up Referral Page

• Create the template and page in the same way we created the Rewards Page.
• In the Templates folder, in the Referral Page Template, use {% include ‘snippet-name’ %} to include the referral snippet (same snippet included in the rewards page). If needed, use the loader for modules as well, as this is a separate page.

Setting Up Account Page

Go to the Templates folder → Customers folder → account.liquid file. Usually we will place our code at the end of the file, below whatever code the customer has. We do not replace any code that is already on the page.

Differentiate Your Code

It is considered best practice to wrap your code in an appropriate comment when editing a file that has code that's unrelated to Yotpo. This will make it easier to identify in the future both for you and for the customer (something along the lines of "<!-- YOTPO LOYALTY-->")

If needed, paste the loader for the modules and include the snippets according to the mockup. 

Setting Up Checkout

Shopify Plus - Redemption module

Important!

In order to implement the redemption modules at checkout, we need to make sure we have access to the checkout.liquid file (under the Layout folder). If we do not see this file, we need to tag the IM so they can contact the customer and get us the access we need.

In the snippets folder, create a liquid snippet for the loyalty checkout modules, and include it in the checkout.liquid file at the bottom of the file (the module will be injected in the correct location automatically).

In the snippet you created, include the code snippet for the correct module, and the snippet for the module loader - in the checkout we always have to include the loader, it will not be included automatically. 

Shopify Plus - Module Pop-up

The module itself, overlay, and logic for closing already exist as part of the module, we just need to create the trigger for the module to appear (or be "unhidden") so that it doesn't appear straight away when the customer reaches the checkout page, but only after they've completed the checkout process. 

Shopify Plus - Custom Pop-up

If you want the layout of the regular referral module (for example - if you want an image included), we can use the regular referral module, and we just need to build the overlay, popup, closing button and trigger for the popup ourselves. 

To preview the popup on Shopify Plus

we can simply add a random product to our cart, go to the checkout page and add &thank_you to the URL

Shopify Regular - Module Pop-up

Important!

Customers on Shopify regular (or anything that's not Plus) do not get access to the checkout.liquid file.

In this case we will need to set up the popup under Checkout Scripts. As this affects the live store we will use a dummy trigger until the customer goes live.

• Go to Settings → Checkout and scroll down to Additional Scripts:

In the Additional Scripts, add this code for the module popup and this code for a custom popup.

Very Important!

When adding the popup code to Additional Scripts, we are affecting the live store, so make sure to use a dummy trigger ("loyalty_thank_you") and only change it once the customer is ready to go live with the entire program. 

In order to preview the referral modal when not on Shopify plus, we need to do it through an Order Status Page.

Go to Orders → click on a fulfilled order → click the More Actions dropdown → pick View Order Status Page → add the dummy trigger to the URL.

Testing the Program

Mobile Responsiveness

When using Chrome dev tools, once we enter the responsive mode the modules will be rendered in mobile layout regardless of screen width. If we want to see the desktop layout in this situation, we need to add the following parameter to the URL: 

1
?is-mobile=false

Custom CSS

If we want to see the modules without the custom CSS we added in the overrides file, we need to add the following parameter to the URL:

1
?yotpo_skip_custom_css=true

Locking Campaigns Overlay

In case there's CSS "leakage" from the customer's site to the birthday campaign dropdowns, we can use the following URL param to "lock" the overlays and inspect the CSS.

1
?selected-extension-state=hover

VIP Tiers - Entering test customer into a tier

Go to customer’s Yotpo Loyalty Admin → customers → click specific customer email (your test user email)

If it’s just points we can use “adjust points balance” to add points to the customer and move them to the desired tier.

If it’s money, open dev-tools and write the following command in the console:

1
localStorage.setItem("swell-admin", "SWE11admin")

Refresh the page, and find the button labeled “add test purchase”. Then we add the desired amount of money (in cents). Note that it might take a few minutes to update.