Help Needed: Enhancing My Rewards Program Page in Shopify Dawn Theme

Topic summary

Enhancing a Rewards program page in Shopify’s Dawn theme without a page builder, focusing on background color, fonts, and layout improvements to reduce visitor drop-off. Request includes making this style reusable for About, Contact, and Policies pages.

Key guidance provided:

  • Styling: Add page-specific CSS (Cascading Style Sheets) in theme assets to set a custom background (e.g., dark blue #334FB4) with white/light gray text and gold/yellow CTA (call-to-action) accents; consider gradients/patterns.
  • Fonts: Use Theme settings options (e.g., Montserrat, Lato); for non-default fonts, use an app like Fontify. Apply font weights for hierarchy.
  • Content structure: Add “How It Works,” “Member Benefits,” testimonials, icons, and collapsible FAQs; break text with images/dividers.
  • Policies: Due to default limitations, create custom policy pages for design flexibility and link them in the footer.

Progress and issues:

  • About/Contact revamped with images; icons added; FAQ color adjusted successfully.
  • Couldn’t find suggested fonts in editor; site-wide color changes affected all pages; Policies remain default; collapsible section pulled entire pages instead of only FAQ content.

Next steps requested:

  • How to isolate font/color to the Rewards page only via targeted CSS.
  • Step-by-step to create a collapsible FAQ for just part of the Rewards page content.

Status: Ongoing; app suggestions for loyalty/retargeting were provided but not adopted yet.

Summarized with AI on December 14. AI used: gpt-5.

Hi Shopify Community,

I hope you’re all doing well! I’m currently working on my rewards program page using the default template in the Dawn theme, but I’d like to enhance its appearance to make it look more professional, similar to other brands.

Unfortunately, I can’t use a page builder since I’ve exceeded the number of pages I can publish on my current plan.

I’m specifically looking for guidance on:

  1. Background Color: How can I change the background color to better align with my brand?
  2. Fonts: What are the best practices for selecting fonts that will make the page more visually appealing?
  3. Sections: Are there any suggestions for sections I could add or modify to improve the overall layout?

If anyone has tips or resources that could help me achieve a polished look, I’d greatly appreciate it! I’ve also attached a picture of how the background might look as an example. For reference, my theme colors for the header and footer are #334FB4.

Thank you in advance for your assistance!

Not particularly good with Design but if you need any help making custom sections or custom coding for theme customizations or modifications, I could be of help

Hey @EagleHunted , happy to help! Here are a few tips to make your rewards program page look more polished in the Dawn theme:

  1. Since you’re aiming to align the page with your brand colors, you can try adding custom CSS to your theme file to adjust the background color. Go to Online Store > Themes > Edit code, and under Assets, open your theme.css (or base.css). Add a snippet like this:

    css

    Copy code

    .rewards-page { background-color: #334FB4; /* Replace with your desired color */ }

    You can adjust the color code as needed for different sections if you want some variety.

  2. To make the page visually appealing, go with clean, easy-to-read fonts like Lato or Open Sans, which work well on digital screens. If you can’t access custom fonts due to plan limitations, try using Shopify’s built-in font options. You can also play around with font weights (like bold for headings) to add some hierarchy and guide readers’ attention.

Adding “How It Works” and “Member Benefits” sections can be super engaging. For example, briefly outline how customers can earn and redeem points, and highlight exclusive perks they get as members. If possible, you could also add a customer testimonial section to show social proof.

If you’re looking for a tool to streamline your rewards program and make it more effective, I’d suggest checking out our app Akohub. Our app offers a complete loyalty program solution with customizable designs, so you can achieve a professional look without needing custom code. Plus, it integrates with retargeting to help you re-engage customers and keep them coming back. Let me know if you need more detailed steps on any of the points! :blush:

1 Like

Hi @Akohub

Thank you for your insights! The Eagle Rewards Club page, like all our other pages (About Us, Contact Us, Policies, etc.), currently has a white background. I’ve attached a picture of how it looks with a dark blue background.

I’ve noticed that many customers drop off after visiting these pages, so I’m looking to make it more appealing, with the goal of using it as a default design for our other pages (like About Us, Contact Us, and Policies) and I’ve noticed that many customers drop off after viewing them.

Do you have any suggestions for colors that would improve the visual appeal?

Additionally, regarding fonts, which options should I consider from the editor? If I want to add specific fonts, will that require coding, or is there an easier way to implement them?

This is the link for the page if you’ve more suggestions https://www.shopeaglestore.com/pages/eagle-rewards-club

Thanks for your help!

Hey there! @EagleHunted ,

Your idea to give the page a fresh look sounds great, especially if it helps keep customers engaged. Here are a few tips for color, font, and design changes that can help make the page more visually appealing and encourage visitors to stay on the page longer.

For colors, since you’re considering a dark blue background, try pairing it with lighter, contrasting colors for the text (like white or light gray) to ensure readability. You could also add a few accent colors (like gold or yellow) that match your brand to highlight key areas, such as buttons or headings. These accent colors can make your CTAs (like “Join Now” or “Learn More”) stand out and grab attention. Using a gradient or subtle pattern in the background instead of a solid dark blue could also add a modern touch while maintaining brand cohesion.

For the fonts, Shopify’s editor offers several font options you can explore under “Theme settings.” For a professional look, try using a bold, sans-serif font for headings (like Montserrat or Lato) and a clean, readable serif or sans-serif font for the body text. Keeping the font consistent across all pages (About Us, Contact Us, Policies) will create a cohesive look for the site. If you want more custom font options without coding, you can use a Shopify app like Fontify to easily add specific fonts to your store without messing with code.

As for the structure, we recommend you to break up large text blocks with images, icons, or even dividers can help make the page feel less overwhelming and easier to scan. Consider adding icons next to benefits like “Earn Points” or “Unlock Rewards” to visually represent each feature of your loyalty program. A structured layout with clear headings, subheadings, and bullet points can help customers quickly find what they’re interested in. You could also use collapsible sections or FAQs for more details about the program, so visitors can explore as much or as little as they like.

Finally, adding a few customer testimonials about the rewards program or images showing the rewards could add social proof, which often makes visitors more interested in joining. This would add some personality and credibility to the page.

Now, if you’re finding that people drop off this page frequently, it might be worth using our app Akohub to increase conversion rates. Our retargeting feature helps to bring back visitors who didn’t convert the first time around. You can show potential customers the products they viewed along with a small discount as this can be super effective for turning “maybe” into “yes!” If you’re looking for an all-in-one solution, our app, Ako Retargeting, combines retargeting with loyalty and CRM features, helping you bring in new customers and keep them coming back. If you want to take it further, check out our blog on combining retargeting with loyalty programs to maximize customer retention. Let us know if you need any more tips, and best of luck with your store! :blush:

1 Like

Hi @Akohub

Thank you for your insights, and I apologize for the delayed response. I’ve been quite busy and just now got the chance to review your message.

Regarding the font changes, I think it’s a great idea! However, I couldn’t locate the specific font names you mentioned in the editor. I also tried adjusting the layout text color, but unfortunately, it affected the entire site. So, I reverted it back to the default black color. I did manage to change the FAQ section color without any issues, though.

As for the Contact Us and About Us pages, I’ve revamped the designs by adding new sections and images to make them more engaging and visually appealing.

For the Policies pages, they still have the default white background and standard text. I reached out to Shopify support, and they confirmed that the current design is part of the default setup for policies, so customization options are limited. I’ve left the pages as they are for now because I’m unsure how to proceed?

Regarding the Rewards Page, I attempted to use a collapsible section, but it didn’t work as expected. It prompted me to choose a “page” in each row instead of just a section or part of the page (like FAQs). When I selected the Rewards page, it added the entire page to the collapsible section. I’m unsure how to add just the FAQ part—do you have any suggestions?

On a positive note, I did add icons to the text sections as discussed!

Thanks again for your feedback, and I appreciate any additional suggestions you might have.

Best regards,

Hey @EagleHunted Thanks for the detailed update, and no worries at all about the delay. Great job on making those adjustments, and it sounds like you’ve done some fantastic work so far with the Contact Us and About Us pages!

For the font color and layout, it’s tricky when changing one element affects the entire site. One option you could explore is using custom CSS if your theme supports it. That way, you might be able to target specific sections without impacting the whole site.

As for the Policies pages, it’s true that Shopify’s default settings can be limiting. If you’re open to it, one workaround could be to create custom pages for your policies with a bit more flexibility in design. Then, you can link these custom pages to your footer or wherever your current policies are located.

Regarding the Rewards Page and the collapsible sections, I get that it’s frustrating when it doesn’t work as expected. One approach you might try is breaking up the Rewards content into separate pages or sections, then linking each one in the collapsible FAQ format. If you’re trying to add just the FAQ part, consider creating a standalone FAQ for rewards and linking it within the Rewards page instead.

To make the most out of your Rewards program, you might also want to explore integrating Ako Loyalty. It can help drive customer engagement and retention by rewarding customers for different actions, like purchases, social shares, and referrals. This can add a layer of interactivity and encourage repeat visits to your store.

On the retargeting side, since you’ve put so much effort into the design and content, Ako Retargeting could help bring back visitors who might not have converted initially. It’s a subtle way to keep your brand top-of-mind for customers who showed interest but may need an extra nudge to return and make a purchase.

Glad to hear the icons worked out!

Let me know if you’d like more ideas on these sections, and feel free to reach out if you have any other questions. I’m here to help!

1 Like

Hi @Akohub

Thanks so much for your detailed insights! I really appreciate the suggestions you’ve given regarding the font color, layout, and policies pages.

For the Rewards page, I’ve already created a separate page for it, as you suggested. However, I’m still trying to figure out the best way to break the content into separate sections and add a collapsible FAQ part. Could you share a bit more on how I might go about doing this? I’ve encountered some challenges with keeping the sections distinct, so any advice would be very helpful.

Also, regarding the font color changes on the Rewards page—do you have any tips on how I can target only that page without affecting the rest of the site? I want to make sure the change is isolated to the Rewards page specifically.

Once again, thanks so much for your help and for all the thoughtful suggestions. Looking forward to hearing your thoughts!

Best regards,