The FAQ section shows a list of questions and answers on your loyalty landing page. Customers click a question to open the answer. It is a simple way to explain your program and cut down on repeat support questions.
To edit it, go to Loyalty Pages in Mage Loyalty. Under Storefront, find Landing Page and click Customise. Then select FAQ in the Sections list on the left.
This section lives on your loyalty landing page. If you have not set that page up yet, follow the loyalty page step in the Quick Start Guide first.
Section Title
The Section Title is the heading shown above your questions, for example Frequently Asked Questions or Rewards Help. If you leave it blank, the heading Frequently Asked Questions is shown.
Questions and answers
Under Questions & Answers you build your list. You can add up to 20 questions. New stores start with three sample questions that use your store name, so check and edit them before you go live.
Field | What it does |
Question box | The question customers see and click. Shows Enter a question when empty. |
Answer box | The answer shown when the question is opened. Shows Enter an answer when empty. |
Answers are plain text. Bold, bullet points and links are not supported.
To manage your questions:
Add: click Add Question at the bottom of the list. A new empty question is added to the end. At 20 questions the button changes to Max questions reached.
Edit: click into a question or answer and type.
Remove: click Remove next to the question number.
Questions show on your page in the same order as the editor. New questions are always added at the end, and there is no drag to reorder. To move a question, remove it and add it again.
Below the main card is an Advanced Settings card. Click View to open it and add Custom CSS for this section. The editor suggests the FAQ class names as you type, and a counter shows how close you are to the 64 KB limit. Your CSS is saved with the rest of the section.
How it looks to customers
Customers see your title and the list of questions, each with a plus icon. Clicking a question opens its answer and the icon changes to a minus. Opening one question closes any other that was open. If your list has no questions, the section is hidden.
Theme editor settings
Colours and spacing are set on the Mage FAQ block in your Shopify theme editor.
Setting | What it does |
Background Color | Transparent by default, so the section uses your theme background. Pick a colour to change it. |
Title Color | The colour of the section title. |
Chevron Icon Color | The colour of the plus and minus icons. |
Answer Color | The colour of the answers. |
Custom vertical padding | Turn on to set your own Top padding and Bottom padding. |
Disable Customizer Styles | Removes the colours above so the block is styled only by your own CSS. |
Saving and going live
Save your changes. As soon as you edit a field, a save bar appears at the top of the screen. Click Save in the save bar.
Check the confirmation. A message saying FAQ saved successfully appears once the save is done.
Discard if needed. Click Discard in the save bar to go back to your last saved version.
Make sure the block is on the page. Click Customise page in Shopify Theme Editor at the top right of the Landing Page editor. Check that the Mage FAQ block is on your loyalty page. If it is not, add it, then click Save in the theme editor.
The save bar saves the title, the questions and any custom CSS together.
Common Mistakes to Avoid
Saving an empty question. An empty question box still shows on your page as a blank row. Remove any questions you are not using before you save.
Leaving the sample questions unchanged. New stores start with three sample questions. Edit them so they match how your program actually works.