Loyalty Page

<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><!-- ========================================================================= Extra JavaScript code required only for demo purposes. You should NOT include this in your final explainer page. ------------------------------------------------------------------------- --><script type="text/javascript" src="assets/js/demo.js"></script><!-- ========================================================================= --> <!-- ========================================================================= Referencing stylesheet and assets. * Currently configured to load assets you've downloaded on your machine. This is useful while you're customizing, or if you plan to host the assets on your server. * Replace href value with the following, to serve the assets from Sweet Tooth CDN server: "//cdn.sweettoothrewards.com/assets/themes/minimal/v1.0/css/styles.min.css" Use this if you only want to host the html page and not the assets. Your HTML document must be on a server for this option to work. * Omit `.min` portion to get a commented stylesheet copy (slower to load) --------------------------------------------------------------------------------- --> <link rel="stylesheet" type="text/css" href="assets/css/styles.min.css?ver=1.0" /> <!-- ===================================================================== --> <!-- =========================================================================================== Support for fontello Icon Font for Internet Explorer 7. * Similar to stylesheet above, use the following href value to serve assets from Sweet Tooth CDN server: "//cdn.sweettoothrewards.com/assets/themes/minimal/v1.0/css/fontello-ie7.min.css" * Omit `.min` portion to get a commented stylesheet copy (slower to load) -------------------------------------------------------------------------------------------- --> <!-- [if IE 7]><link rel="stylesheet" href="assets/css/fontello-ie7.min.css?ver=1.0"><![endif]--> <!-- ===================================================================== --> <!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> <title>Minimal - Loyalty Explainer Page</title></head><body><!-- =========================================================================== Warning message that will show up if you haven't configured the stylesheet paths correctly. You don't need to include this in your final revision. =========================================================================== --> <div id="sweettooth-explainer-stylesheet-warning" style="background: darkred; color: white; padding: 20px;">Your stylesheet file is not loading correctly.<br /> Edit this HTML file and look for comments about how to configure the assets correctly.</div> <!-- =========================================================================== Loyalty Page Explainer content starts here. You'll need to copy everything below into your CMS editor or HTML file. * Available theme colors are: golden, green, blue =========================================================================== --> <div class="sweettooth-explainer blue"> <div class="background program-summary-bg"> <section class="program-summary"><!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> <h1>Welcome to the Loyalty Program</h1> <!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> <div class="program-description">For our most devoted customers, we've introduced our new loyalty program to thank you for your commitment to our business. Now every time you shop with us, you can earn reward points which can be exchanged for future discounts and savings. But spending alone isn't the only way you'll be rewarded for your support, as you can earn extra points in simple ways such as referring friends to our site.</div> <!-- =========================== Call to Action Button * Update URL in "href" =========================== --> <a class="cta-button" href="http://youstore.com/customer/account/create/">Join the Loyalty Program</a></section> </div> <div class="background points-worth-box-bg"> <section class="points-worth-box"><!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> <span class="label">Earn Points</span> <span class="worth">$1 = 1 Point</span> <span class="points-icon"></span> <!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> <span class="label">Spend Points</span> <span class="worth">100 Points = $1</span></section> </div> <div class="no-background earning-legend-bg"> <section class="earning-legend"> <h2>Ways to Earn Points</h2> <div class="section-description"><!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> To demonstrate how much we cherish our loyal customers, you can gain reward points in more ways than purchasing your favorite products.</div> <div class="earning-options"><!-- ============================================================ Ways to earn points. * Copy, paste and modify as needed. * Icon options: st-icon-music, st-icon-search, st-icon-mail, st-icon-heart, st-icon-star, st-icon-user, st-icon-videocam, st-icon-camera, st-icon-photo, st-icon-attach, st-icon-lock, st-icon-eye, st-icon-tag, st-icon-thumbs-up, st-icon-pencil, st-icon-comment, st-icon-location, st-icon-cup, st-icon-trash, st-icon-doc, st-icon-note, st-icon-cog, st-icon-params, st-icon-calendar, st-icon-sound, st-icon-clock, st-icon-lightbulb, st-icon-tv, st-icon-desktop, st-icon-mobile, st-icon-cd, st-icon-inbox, st-icon-globe, st-icon-cloud, st-icon-paper-plane, st-icon-fire, st-icon-graduation-cap, st-icon-megaphone, st-icon-database, st-icon-key, st-icon-beaker, st-icon-truck, st-icon-money, st-icon-food, st-icon-shop, st-icon-diamond, st-icon-t-shirt, st-icon-wallet, * For a full list of icon options, see fontello-demo.html ============================================================ --> <!-- Example 1 --> <div class="earning-box"> <div class="earning-icon st-icon-key"></div> <div class="earning-amount"><span class="points-value">100</span> <span class="points-label">Points</span></div> <div class="earning-description">For creating an account.</div> </div> <!-- Example 2 --> <div class="earning-box"> <div class="earning-icon st-icon-thumbs-up"></div> <div class="earning-amount"><span class="points-value">10</span> <span class="points-label">Points</span></div> <div class="earning-description">For Sharing on Social Media.</div> </div> <!-- Example 3 --> <div class="earning-box"> <div class="earning-icon st-icon-comment"></div> <div class="earning-amount"><span class="points-value">10</span> <span class="points-label">Points</span></div> <div class="earning-description">For writing a review.</div> </div> <!-- Example 4 --> <div class="earning-box"> <div class="earning-icon st-icon-doc"></div> <div class="earning-amount"><span class="points-value">50</span> <span class="points-label">Points</span></div> <div class="earning-description">For signing up to our newsletter.</div> </div> <!-- Example 5 --> <div class="earning-box"> <div class="earning-icon st-icon-heart"></div> <div class="earning-amount"><span class="points-value">200</span> <span class="points-label">Points</span></div> <div class="earning-description">On Your Birthday</div> </div> <!-- Example 6 --> <div class="earning-box "> <div class="earning-icon st-icon-calendar"></div> <div class="earning-amount"><span class="points-value">200</span> <span class="points-label">Points</span></div> <div class="earning-description">For every year you have an account.</div> </div> </div> </section> </div> <div class="no-background referral-summary-bg"> <section class="referral-summary"> <h2>Invite a Friend</h2> <!-- ~~~~~~~~~~~~~ Change Me: ~~~~~~~~~ --> <div class="section-description">Here at our store, we firmly believe that sharing is caring. So now you've discovered our plant-powered products, it's time to get social. Invite your friends to our store and be instantly rewarded with reward points. And if they love them just as much as you do, you will continue to be rewarded again and again!</div> <!-- =========================================================== Ways to earn referral points. * Copy, paste and modify as needed. * Icon options: st-icon-music, st-icon-search, st-icon-mail, st-icon-heart, st-icon-star, st-icon-user, st-icon-videocam, st-icon-camera, st-icon-photo, st-icon-attach, st-icon-lock, st-icon-eye, st-icon-tag, st-icon-thumbs-up, st-icon-pencil, st-icon-comment, st-icon-location, st-icon-cup, st-icon-trash, st-icon-doc, st-icon-note, st-icon-cog, st-icon-params, st-icon-calendar, st-icon-sound, st-icon-clock, st-icon-lightbulb, st-icon-tv, st-icon-desktop, st-icon-mobile, st-icon-cd, st-icon-inbox, st-icon-globe, st-icon-cloud, st-icon-paper-plane, st-icon-fire, st-icon-graduation-cap, st-icon-megaphone, st-icon-database, st-icon-key, st-icon-beaker, st-icon-truck, st-icon-money, st-icon-food, st-icon-shop, st-icon-diamond, st-icon-t-shirt, st-icon-wallet, * For a full list of icon options, see fontello-demo.html ============================================================ --> <!-- Example 1 --> <div class="referral-box"> <div class="earning-box"> <div class="earning-icon st-icon-megaphone"></div> <div class="earning-amount"><span class="points-value">300</span> <span class="points-label">Points</span></div> <div class="earning-description">When friend makes first purchase</div> </div> </div> </section> </div> <div class="background faq-bg"> <section class="faq"> <h3>Frequently Asked Questions</h3> <ul class="question-list"><!-- =========================================================== FAQ Questions and Answers. * Copy,Paste and modify as needed. ============================================================ --> <!-- Example 1 --> <li class="question"><span>How to Earn Bonus Points?</span> <span class="answer"> To earn reward points, you first need to have an account on our store. Please sign up for an account. Once you have an account you can then earn reward points by placing orders and completing any of the actions in our earning section for bonus points. </span></li> <!-- Example 2 --> <li class="question"><span>How to Spend Points?</span> <span class="answer"> You can spend your points on any order you place through our store. At the cart and at the checkout please adjust the slider to spend your points on that order. Please make sure you are logged in first! </span></li> <!-- Example 3 --> <li class="question"><span>How are Review Points Rewarded?</span> <span class="answer"> We reward you reward points for placing reviews on any of our products in our store. Once you have submitted a review please wait for us to check the review so we can approve it. Once approved you will be rewarded points. You can earn points at a rate of 1 review per week. </span></li> <!-- Example 4 --> <li class="question"><span>How many times can I share on Social Media?</span> <span class="answer"> You can share on social media our products or pages as many times as you would like. However we can only offer rewards for the first 10 times you share on social media. </span></li> <!-- Example 5 --> <li class="question"><span>How does the yearly reward work?</span> <span class="answer"> We will reward you for every 365 days you are a customer for the first three years of your account with us. </span></li> </ul> </section> </div> </div> <!-- =========================================================================== Loyalty Page Explainer content ends here. =========================================================================== --></body></html>
Get $5 + our seven quick tips on detoxing your life