PageFly
PageFly can be used to create custom pages on a Shopify store.
Integration
By default, a custom page will not load some of the "context" required by Discount Ninja.
Test
To test if Discount Ninja has all the information it needs:
Open the custom page in a browser
Open the console of the browser
In the console, type
discountNinja.Core.Version(case sensitive) and hit enterThe type
discountNinjaContext.Cart(case sensitive) and hit enterBoth these tests should pass without issues
If you see an error message, the app does not have the context it needs:
Enable Discount Ninja
Step 1: Edit your custom page
Step 2: Add an HTML/Liquid widget
Note: This should only be required on regular pages, not on home/collection or product pages.
On the regular page:
Click + (Add Element)
Select HTML/Liquid
Drag an "HTML5 / Liquid" element on your page (can be anywhere, recommended to put at the bottom)
Step 3: Edit the widget
Select the widget:
Then, on the right, click "Open Code Editor":
Replace the content of the editor with:
{% include 'limoniapps-discountninja-body' %}
It should look as follows:
Optionally, select the section and set the visibility to hidden, to avoid white space:
Step 4: Publish the page
Then save and publish the page.
Advanced tips for using Discount Ninja on PageFly pages
Tip 1: previewing an unpublished page is not supported
Discount Ninja expects a custom page to be published under the /pages/ section of your app. When a page is not published this is not the case and promotions will not work as expected.
Tip 2: using a sticky bar
When using a sticky bar on a PageFly page, the sticky bar should automatically push down the content.
If this is not supported by your theme, the bar may overlap content. To avoid this:
Edit the topmost section of the page
Find the "Attributes" settings in the panel on the right
Set the following class (if one or more classes are already present, make sure to add a space between those classes and the new one you're adding):
limoniapps-discountninja-topmargin
Tip 3: support Dynamic Pricing on Product List
To show discounted prices in a "Product List" using Dynamic Pricing, you'll need to add two classes and one attribute:
Step 1: add class attribute for price section
Select the price section of the first product
Find the "Attributes" settings in the panel on the right
Set the following class (if one or more classes are already present, make sure to add a space between those classes and the new one you're adding):
limoniapps-discountninja-productpriceOptionally add another class (always separate classes with a space) to horizontally center the content:
limoniapps-discountninja-align-center
Step 2: add custom attribute for product card section
Select the entire card of the first product (typically includes image, title, price and a button)
Find the "Attributes" settings in the panel on the right
Next, click the "More Settings" button and add an entry by clicking "Add New Item".
Set the key to:
data-limoniapps-discountninja-product-handleLeave the value empty
Screenshot of configuration:
Step 3: add class attribute for image
Select the image section of the first product
Find the "Attributes" settings in the panel on the right
Set the following class (if one or more classes are already present, make sure to add a space between those classes and the new one you're adding):
limoniapps-discountninja-collectionbadge