Embedding Contest Box on Shopify

This document covers the complete integration of embedding your KickoffLabs Contest Box onto your Shopify site. The steps may vary, depending on what theme/builder you’re using in Shopify. If you’d like to instead have the Contest Box function as a widget that pops up on the bottom corner of your website, check out our step by step guide here.

Getting Started Embedding Contest Box

If you haven’t already, first you will need to customize your Contest Box.
After you’ve edited your Contest Box, select the “Installation/Embed” tab in your Contest Box settings.
Copy the base Contest Box script. You’ll be needing this in a future step.

When you first navigate to your Shopify page you are greeted by your dashboard. Within your dashboard, navigate to your online store and select “themes”
Select the “actions” button on the theme you’d like to work on and choose “edit code” from the drop-down menu
Next, navigate to the “theme.liquid” file and find an empty space before the closing </head> tag to paste your script (from step 3 above). Save your changes and view your online store.

Navigate back to your KickoffLabs Contest Box settings and copy the HTML embed script.
Open your Shopify page in the Shopify page editor
In the editor add a custom HTML block from the left menu. In this example, we’re using the default Debut theme. This step can vary theme to theme.
Paste the KickoffLabs HTML snippet into the HTML field and save your changes! You should now see your embedded Contest Box on the page.

There are two options in the settings of the HTML. “embedHeight” supports either “full” or “custom”.

Full: will make the embed always have the full height of the contest box.

Custom: will use the second property embedHeightPixels to determine a fixed height with a scroll bar.

contestbox-embed

As always, if you have any questions please reach out to our support team at support@kickofflabs.com