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.

Read this section to test if the context is already available on a page

Read this section to add the context and enable Discount Ninja on a page

Advanced tips for using Discount Ninja on PageFly pages

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 enter

  • The type discountNinjaContext.Cart (case sensitive) and hit enter

  • Both 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-productprice

  • Optionally 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-handle

  • Leave 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

Did this answer your question?