Elevate Your Ghost Blog with Personalized Recommendations

In this guide, we'll walk through the process of effortlessly adding recommendations to your Ghost theme. Plus, we're excited to share that our premium Ghost themes come pre-equipped with a tailored recommendation system, ensuring a seamless and engaging experience for your readers.

Step 1: Unleashing the Magic of {{recommendations}} Helper

Uncover the potential of the {{recommendations}} helper, a dynamic tool empowering you to effortlessly display a curated list of recommended sites as configured in your Ghost Admin. Ghost provides a clean default template, but the real magic lies in customizing it to suit your theme's unique aesthetic.

{{#if recommendations}}
    <ul class="recommendations">
        {{#each recommendations as |rec|}}
            <li class="recommendation">
            <a href="{{rec.url}}" data-recommendation="{{rec.id}}" target="_blank" rel="noopener">
                <div class="recommendation-favicon">
                    {{#if rec.favicon}}
                        <img src="{{rec.favicon}}" alt="{{rec.title}}" loading="lazy" onerror="this.style.display='none';">
                    {{/if}}
                </div>
                <h5 class="recommendation-title">{{rec.title}}</h5>
                <span class="recommendation-url">{{readable_url rec.url}}</span>
                <p class="recommendation-description">{{rec.description}}</p>
            </a>
        </li>
        {{/each}}
    </ul>
{{/if}}

Step 2: Tailoring Recommendations for Your Audience

Tailor the recommendations display with finesse using a variety of attributes:

• Limit: Define the maximum number of recommendations to showcase, with a default set of 5.

{{recommendations limit="10"}}

• Order: Arrange recommendations based on any valid resource field, whether in ascending (asc) or descending (desc) order.

{{recommendations order="title asc"}}

• Page: Enable pagination effortlessly when the recommendations surpass the defined limit.

{{recommendations limit="5" page="2"}}

• Filter: Infuse logic-based queries to filter recommendations, adding a touch of personalization.

{{recommendations filter="favicon:-null"}}

Step 3: Advanced Customization for a Personal Touch

Empower your Ghost theme with advanced customization options to control when recommendations take center stage:

• Show Recommendations Only When Enabled:

{{#match @site.recommendations_enabled}}
    <h2>Handpicked Recommendations</h2>
    {{recommendations}}
{{/match}}

• Open Recommendations with a modal via the portal:

{{recommendations limit="5"}}
<button data-portal="recommendations">Discover More</button>

Step 4: Seamless Integration into Your Ghost Theme

With a solid grasp of the {{recommendations}} helper and its flexible attributes, seamlessly integrate recommendations into your Ghost theme.

Override the default template by creating a new file named recommendations.hbs in your theme’s partials folder, allowing you to infuse recommendations with your unique style.

Premium Themes from Visioun: Elevate Your Blogging Experience

Embark on a journey of elevated blogging with our premium Ghost themes, thoughtfully designed to seamlessly incorporate recommendations.

By selecting our premium ghost themes, you'll receive not only an aesthetically pleasing website but also a seamlessly integrated recommendation system that boosts reader engagement on your site.

Aether

Aether is a sleek, modern, and easy-to-use ghost theme that elevates your blog or magazine site to new heights.

Visioun

Transform your Ghost blog into a personalized haven for readers by effortlessly integrating recommendations. Customize the display, fine-tune filtering options, and explore advanced features for a truly unique user experience.

And for those seeking a premium Ghost theme, our offerings come pre-loaded with a tailored recommendation system, taking your blogging journey to new heights.

Happy Holidays!