IntroductionCreating a dedicated on-site page for your loyalty programme is the best way to explain how your rewards programme works. It will be the place where both your current customers and potential customers can sign up and understand the benefits of your loyalty program. In this guide we will learn how to use our in-app page block section to create a landing page for your loyalty, rewards and referral program on your website.BenefitsExplain how the Loyalty program works.Clearly outline the benefits of the program on a dedicated page.Motivate both current and potential customers to earn points and redeem rewards.Enable members to easily track their accumulated points and rewards.OverviewCreate a Loyalty pageAccess the landing page template sectionsAdd page contentEdit page contentChange SEO detailsAdding a page to the store navigationTo disable or delete a pageCreate a Loyalty page1. Navigate to Loloyal Admin → Brand Style → Loyalty page.2. Click "Generate page" button.After creating the page, you can click the "edit in theme editor" button to open the Shopify theme editor.If you have already created the page you want to add, you can skip this step.Access the landing page template sectionsPlease follow the instructions below to add landing page template sections. To add, edit or remove page sections, follow these steps1. Go to: Shopify Admin → Online Store → Themes → *your theme* → Customise → Pages → Select the page you want to edit → Add section → APP.2. Search for "Loloyal" in the template selector3. Select the different sections you wish to add. Loyalty landing page sections include Hello Banner, Ways to Earn, Ways to Redeem and Referrals.Add page contentOpen the landing page template in Shopify's theme editorIn the editor sidebar, click "+ Add section" Click "Apps" tabClick any Loloyal section to add on pageClick SaveEdit page contentOpen the landing page template in Shopify's theme editorIn the editor sidebar, click on the section you'd like to editEdit the page content using the controls providedClick SaveNote: Developers can use custom CSS in their theme to further enhance the layout.Change SEO detailsNavigate to: Shopify Admin → Online Store → Pages → *your landing page*Click Edit website SEOChange the values accordinglyClick SaveAdding a page to the store navigation1. Navigate to: Shopify Admin → Online Store → Navigation2. Add the landing page to the menu of your choiceTo disable or delete a page1. Navigate to: Shopify Admin → Online Store → Pages → *your landing page*.2. Change the settings in the Visibility section 3. Click Delete Page or SaveQuestions and AnswersQ: How can I edit the translation text on the rewards page? A: The Rewards page and widgets share the same multi-language translation. To update the text, please go to your translation settings and modify the specific translations there.

For a better reading experience, please click here. Thank you!IntroductionThe Launcher acts as the primary interface through which your customers engage with your rewards program. Ensuring its prominent visibility on your website is crucial. Concealing the Launcher may pose difficulties for customers to discover, join, and interact with your program, ultimately undermining its purpose. Maintaining visibility and accessibility of your Launcher is essential to maximizing customer engagement and cultivating a robust and loyal customer base for your business.Placement of the LauncherWithin the Widget Display settings, you possess the flexibility to designate the specific device where you prefer your Launcher to appear. Various options are available for selection, allowing you to position the Launcher optimally according to your needs.📝Tips: To expand the outreach of your rewards program, it's vital to enhance the visibility of your Launcher for customers browsing on desktop and mobile devices. This approach ensures every customer, irrespective of their preferred browsing platform, has an equal opportunity to discover and engage with your loyalty program. Consequently, this strategy can boost customer retention and foster brand loyalty. Therefore, optimizing your Launcher's visibility across all devices is strongly recommended.Managing Launcher Visibility on Specific PagesWhen constructing a website, there might be occasions when you need to regulate the display of the Launcher on particular pages. For example, you may wish to hide or reveal it on pages containing legal or administrative content, such as Terms and Conditions or Contact Us. This capability can be attained through the utilization of specific settings or URL Paths.To showcase the launcher widget on particular pages of your website, you have the option to specify the URL path within the Page Visibility section. For example, if you intend to display the widget specifically on blog pages, you can input the path "/blog" in this section. This configuration will ensure that visitors can view the launcher when navigating to the specified URL path.Note: This setting is only supported when the Custom URL option is selected. Additionally, after selecting this option, the field cannot remain empty. If you only input "/" (forward slash), it will display the launcher throughout the entire store for all pages.📝Tips: It's not recommended to hide the Loyalty Program launcher on primary and high-traffic pages as this action might restrict your customers' opportunities to discover, join, and engage with the program. Ensure that rewards remain easily accessible throughout the shopping journey to maintain their prominence in customers' minds.

Style your Loloyal widget with custom CSS code.Loloyal empowers users to design their widget without writing a single line of code. However, a tiny sprinkle of code can add that extra finishing touch to your loyalty widget.Injecting custom CSS allows you to style your loyalty widget in ways that are not available in the default design options.How to inject custom CSSCSS classesHow to import Google FontsCode snippets Custom CSS not working?How to inject custom CSSYou can copy the changes you made and paste them into the CSS editor. To use the Custom CSS on your widget:From your dashboard, click Brand Style > Widget theme  on the left sidebar.Click the CSS option.Add your CSS styles to override the Widget defaults.Click Save. Custom CSS requires coding skills and falls outside the scope of our support. However, if there is any doubt, our technical team does provide some technical support and we are happy to help.This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Loloyal. This includes how it functions with our responsive design or with future updates to our platform.CSS classesThese CSS classes can be overridden with custom CSS.Custom styles may not always work seamlessly in the widget theme builder because the HTML structure of blocks may differ in the editor. To ensure that your custom styles are correctly applied, it is recommended to test them in Preview mode, which replicates the same HTML structure as published widget.Avoid using class names that are not listed in the table below. For instance, class names such as sc-a3e5684a-0, styled__ContentH3-sc-aw1rsf-4, cwaPRn, etc., are automatically generated and subject to change, potentially causing your CSS rules to break.DescriptionCSS ClassApp.loloyal-appApp Banner.loloyal-bannerNavbar.loloyal-navbarNavbar Text.loloyal-navbar-textNavbar Back button.loloyal-navbar-backCard Block.loloyal-cardCard Item Block.loloyal-card-itemList Item Block.loloyal-list-itemClose button.loloyal-close💌 Didn’t find the class you’re looking for? Let us know by chat!How to import Google Fonts1. visit https://fonts.google.com/, Search for your favorite fonts2. PIck you favorite font-style.3. Check the CSS code about importing styles and copy the corresponding section.4. Combine into the correct CSS according to the rules below to populate the input area of the custom CSS.Example: Add a Google font to the Widget/** * @import Must be on the first line! */@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');/** * font-family: 'Your Font' !important */.loloyal-primary-font { font-family: 'IBM Plex Sans' !important;}.loloyal-secondary-font { font-family: 'IBM Plex Sans' !important;}Example: Add a Google font to the Launcher/** * @import Must be on the first line! */@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap'); .loloyal-launcher-text { font-family: 'IBM Plex Sans' !important; } Code snippetsNot familiar with Custom CSS? We prepared a set of pre-made code snippets for you, which you can simply copy and paste in the CSS or code injection box.Change the breadcrumb arrow, back, and close button colors.loloyal-close use { fill: #1246FF !important; color: #1246FF !important;}.loloyal-navbar-back use { fill: #1246FF !important; color: #1246FF !important;} Add a browser safe font to the Widget.loloyal-primary-font { font-family: Arial !important;}.loloyal-secondary-font { font-family: Arial !important;}Changing the size of the Join now Button.loloyal-join-btn { width: 240px; }Adjusting the size of the Panel.Tip: This function cannot be preview in this window..loloyal-iframe-page { width: 500px; }Hiding specific areas of the Widget (Example: Limited-Time Offers).loloyal-limited-time-offers { display: none;}Changing colors and styles of elements.loloyal-card { box-shadow: none; border: 2px solid black; }Changing colors of system icons..loloyal-svg-icon use { fill: pink; color:pink;}Custom CSS not working?Try to add !important on every line before ;Some CSS rules only work in Preview and published mode. You will not see the changes in the widget theme editor.