Widget

Widget translations

This is where you can fully customise the text within your widget. To access the translations feature, click the Edit translations button in the top-right corner. Leaving a text field blank will use the default text. Non logged in Logged in Global

Widget not showing on my website

After you’ve finished the onboarding process we will give you an option to enable the program and widget at the same time. If however, you decide not to you might need to enable it manually once you are ready. Enabling our site widget is done within the Shopify theme customiser as we use a Shopify App Embed to put our widget on your site. We do this because it is highly compatible with most themes as it does not need any theme code changes. Check your program is enabled. The most common reason the widget is not displaying is because the stamp program from inside the app is deactivated. Head to our app on your store and go into Stamp Program and then check that your stamp program is active. It is the first setting on this page and will tell you the current status. Check the theme customiser setting Log into your Shopify admin and head to Online Store. From here you want to click on Edit theme on the main theme that is currently live. From there you will be taken to the Shopify theme editor, and you can select the App Embed blocks which is found on the left hand side of the page. From here you should see our embed and you might see more if you have other apps installed that also use them. Make sure that our embed block is marked as active. You can see from our image above what that state looks like. It is a toggle, so you might just need to click it and turn it on. Last but importantly. If you enable our embed block from it being off, you need to remember to save the theme edits at the top of the page. That’s it you should be done and the widget should show up on your store. Check for any javascript errors on your website If you have multiple apps installed, there is likely to be a lot of different code that is being run. If an error happens with any code, sometimes it can stop the execution of more code and this can sometimes affect the loading on our widget and other functions on your site. To check for errors, you can open up your browsers developer tools, usually by pressing F12 and then goiing to console on the tab in the tool window. The dev tool window will show you any errors and other information that the browser has. If you see any red errors in here, then you can send them to your developer to have a look. If you are unsure, then you can also get in touch with us. We won’t be able to make any changes on your site, but our team can help you to try and diagnose the issue.

Widget settings page

This is the main page where you can set up your store-facing Loyalty & Rewards app. The ability to fully customise the look and feel of your Loyalty & Rewards app can give your customers a more welcoming and inclusive experience when it aligns with your store branding. Note that the widget preview on the right-hand side will show an updated version of your settings once they have been applied. Non logged in This is the setup for when a customer or guest visits your store and is either not logged in or not yet a member. Account: Here you can choose whether to link to the login or registration page. Layout: This is where you can customise the layout and position of the categories. Simply drag the boxes up and down to the desired layout, click Save, and the widget will update. Logged in Stamp overview This is where you can choose to: - Show the stamp overview (displaying the customer’s current balance) - Move the customer details to the body. When enabled, the customer name and summary will move into the card body. Stamp card Here you can customise the appearance of the stamp card, including whether it appears in the widget, how many stamps are shown per row, and which icon is used. You can also upload your own custom icon by selecting Upload custom icon and uploading a file in the box that appears. Icon styling Here you can customise the filled icon background colour, unfilled icon background colour, and icon text colour. Layout This is where you can customise the layout and position of the categories. Simply drag the boxes up and down to the desired layout, click Save, and the widget will update. Global The Global page is where you can adjust the overall look of the storefront Loyalty & Rewards app. Header image The header image appears at the top of the widget. If no image is uploaded, a colour banner will appear at the top by default. Header styling Here you can choose the header background colour, header text colour, and whether you want a solid or graduated banner. Primary buttons This is where you choose the button background colour and button text colour. Launcher layout This is where you choose where the widget sits on your website either on the left- or right hand side and fine-tune the side and bottom spacing. Activator This is where you choose how the activator button appears on your site when the widget is closed.

Logged-in customer widget settings

Overview The Logged In settings on the Widget Settings page allow you to customise the experience your customers see when they are logged into their account on your store. This section controls what information and options are displayed in the loyalty widget for returning and registered customers, helping you create a personalised and engaging loyalty experience. Features and configuration From the dashboard go to > on-site content > Widget >Logged-in tab Stamp Overview - Show stamp overview: Display the customer’s current and completed stamp cards. - Move customer details to body: When enabled, customer name and summary move into the card body. Stamp Card - Show stamp card: Toggle the visibility of the stamp card showing how many stamps the customer has collected and how many are needed for the next reward. - Icons per row: Set how many stamps are shown per row on the card for optimal appearance. - Stamp card icon: Choose from default icons or upload a custom icon to represent the stamps visually. Icon Styling - Filled Icon background colour: Select the colour for stamps that have been earned (filled stamps). - Icon text colour: Set the colour for any text or numbers within the icons. - Unfilled Icon background colour: Choose the colour for stamps yet to be earned. - Unfilled text colour: Set the colour for any text or numbers within the icons. Layout - Member panel order: You can rearrange the different categories by simply dragging and dropping each tile into the desired position. Member stamp section order: You can change the order in which these sections appear by dragging and dropping them. You can also choose to hide any of these sections from the widget if you do not want them to be displayed. - Save Layout: Click Save to apply your changes and update the widget preview. Tips for optimising logged In settings - Use custom icons and colours that match your brand to create a cohesive look. - Keep the layout intuitive and straightforward to help customers easily understand their loyalty progress. - Regularly review the widgets appearance on different devices to ensure a consistent experience.

Non-logged-in customer widget settings

Overview The Non-Logged In settings on the Widget Settings page allow you to customise the experience for visitors who are not logged into their account on your store. This section controls what information and options are displayed in the loyalty widget for new or returning customers who have not yet logged in, helping you engage and encourage them to join the loyalty program. Features and configuration From the dashboard head over to > On-site Content > Widget > non-logged in Account - Choose whether the account link directs customers to the Login page or the Create Account page. Layout - Guest panel order: You can rearrange the different categories by simply dragging and dropping each tile into the desired position. Guest stamp section order: You can change the order in which these sections appear by dragging and dropping them. You can also choose to hide any of these sections from the widget if you do not want them to be displayed. - Use the widget preview pane to see your changes in real time. - Save Layout: Click Save to apply your changes and update the widget preview. Tips for optimising Non-logged In settings - Create clear and inviting welcome messages that encourage visitors to join your loyalty program. - Use compelling calls to action to increase sign-ups and engagement. - Match the widget styling to your brand for a consistent customer experience. - Test the widget appearance on various devices to ensure it looks great everywhere

Global settings in widget settings page

The Global Settings tab on the Widget Settings page allows you to configure settings that apply to the loyalty widget universally, regardless of your customers' logged-in status. These settings control the overall behaviour, appearance, and functionality of the widget, ensuring a consistent experience for all visitors. Features and Configuration Within the Global Settings, you can customise the following components: Header image - Header image: Upload an image to the header of the widget. - Widget Position: Choose where the widget appears on your site (e.g., bottom right, bottom left). - Display Rules: Set conditions for when and where the widget should be visible (e.g., specific pages or devices). Header styling - Header styling: Pick the header background colour. - header text colour: select from the dropdown menu what colour you wan the header text to be. - Use solid header color: Enforce a solid header background (no gradient/transparency). Primary buttons - Primary button background: Choose the background color behind the button. - Primary button text color: Text color for primary buttons (restricted). Launcher layout - Launcher layout: Choose which side of the screen the launcher button appears. - Side spacing: Distance from the screen edge to the launcher (in px). - Bottom spacing: Distance from the bottom edge to the launcher (in px). Activator 1. In your Appy Stamp dashboard, navigate to the Widget Settings page. 2. Select the Global Settings tab. 3. Adjust the settings as described above to configure the widget’s global behaviour and appearance. 4. Use the widget preview pane to see your changes in real time. 5. Click Save to apply your updates. Tips for Optimising Global Settings - Position the widget where it is visible but does not obstruct essential site content. - Use brand colours and themes to maintain a cohesive look across your store and loyalty widget. - Review display rules regularly to ensure the widget is shown appropriately across different pages and devices. - Test the widget on multiple devices to confirm consistent behaviour and appearance.