Overview
In the Lootly platform, you can design and create a beautiful, branded, interactive rewards page that can be deployed on your Bigcommerce store in a few simple steps. This guide explains how to do this.
Step 1: Create the rewards page in the editor in Lootly
Add images, change text, choose your preferred fonts - customize everything through a simple add or choose and save method.
Save your changes.
Step 2: Create a new dedicated rewards page in Bigcommerce
Navigate to Storefront
Click Web Pages from the dropdown menu
Click Add a new Web Page and save this page
Step 3: Add the iframe code to the new webpage
Bigcommerce stripes a lot of elements from iframe codes, which may cause the page to not render correctly if added through the embed function in a web page text editor.
To avoid this, add the iframe by customizing your theme:
Navigate to Storefront -> Themes
Click Customize Theme
Once in the Theme Editor, from the top menu, choose the new Rewards web page you created in step 2.
The editor will open different options in the Page Builder menu on the left side of the screen.
Choose HTML and drag this to the editor canvas:
Once you click the HTML option from the builder, a small code editor will show on the left side of the screen where you can add your iframe code. Make sure to remove the placeholder text from the code editor before pasting the iframe:
When you add the iframe code, click Save HTML. This will push the code to the canvas and you can see your page.
Click Save on the right top corner.
Step 4 : Publish your page on Bigcommerce
Your page is ready to go live!
You can click the Preview button on the top of the editor screen to see how your page will render.
If you're happy with the result, click Publish from the right top corner and the new web page with the rewards iframe will show on your site.
Few things to note:
In Lootly, you can deploy custom CSS code in the dedicated CSS editor to achieve a specific look for your rewards page. We always recommend having the iframe embedded on the site (but keeping the page hidden from the general public before it's ready to go live) so you can see how your changes will render.
If your theme has restrictions on how it handles iframe code, please consult your developer when adding the Lootly iframe.
Please be mindful of where you'll add the HTML block on the page. The very top section, depending on your theme, may say "Section 1 - Global" which means, anything you add here will display globally, on all pages of your website:
Do not add the HTML tool there. Aim for the second section or the third.