Home » Support Center » How to ensure that BlingRush correctly identifies the product page checkout buttons?

How to ensure that BlingRush correctly identifies the product page checkout buttons?

Before reading this article, we suggest that you read the following:

Improve loading time, usability, and design of the contests storefront plugin

BlingRush app widget enables the shoppers to buy a ticket for a contest in the exact same way they buy any other product on the store.

The registration flow is as follow:

  1. Customer Browse the contests section at the store
  2. The customer navigates to one of the contest pages (which are actually Shopify product pages)
  3. In case the customer is not logged in, he/she will need to first login using their store account to buy a ticket to the contest
  4. The customer acknowledges that he/she accepts the terms of the contest (optional)
  5. The customer clicks on the participation button and is redirected to the Shopify checkout page.

When a contest page is loaded, the widget identifies that it is a contest page and not a regular product page. The widget then renders the relevant panels and depending on the store’s settings, either hide the normal checkout/add-to-cart and show a new participation button instead or keeps the existing checkout buttons and uses them for contest registration.

Since the store theme can be developed in many ways, there could be a scenario in which the widget will not correctly identify the buttons and will require the store to point out where the buttons are located manually.

Locating the existing checkout buttons by changing the store’s theme template

  1. Login to Shopify admin
  2. goto Online Store > Themes
  3. Under the Current Theme section, click on the Customize button
  4. In the theme menu, click Theme actions > Edit Code
  5. Open the product template (usually named product-template.liquid ).
  6. Locate in the template, the checkout button elements and add the following attribute to the element data-blingrush-curr-checkout.
  7. Click on the Save button

Locating the existing checkout buttons from the app customizations pages

  1. In BlingRush app portal navigation. Goto Customizations > Product page
  2. Set the Existing checkout buttons selectors field with a comma-separated list of all the selectors that point out to the checkout buttons
  3. Click on the Save button