How to use the existing checkout buttons for contest registration?

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.

It is common for the store to want to use the existing checkout buttons and not to render a new button instead.

There are a few ways to accomplish this behavior.

First, the store will have to make sure that the widget can successfully locate the existing checkout buttons. 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

Once you made sure that the app correctly identifies the existing checkout buttons, you can perform the following steps to use these buttons as the contest registration buttons

Using 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-participation-btn.
7. Click on the Save button

using existing checkout buttons from the app customizations pages

1. In BlingRush app portal navigation. Goto Customizations > Product page
2. Check the Use the existing checkout buttons as the participation payment buttons field.
3. Click on the Save button