Our Contest Box embed feature now allows for you to directly embed the Contest Box onto a page of any website! (aslong as you have access to add HTML to your website).
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.
Preparing Your Shopify Platform for KickoffLabs Contest Box
- 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.
Embedding the Contest Box in Shopify
- 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.
Customizing the Embed Script
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.
Interested in starting a customer loyalty program? Check out our Shopify Rewards integration!
As always, if you have any questions please reach out to our support team at firstname.lastname@example.org