Adding real-time availability to my website, design/dev updates and vlogging

New Features Shipped on My Shopify Website

Last week, I had a busy Sunday shipping some exciting new features on my Shopify site! I started with an 'Available Now' indicator, which shows a green icon flashing when I’m online and turns red when I’m offline. This feature makes it super clear when I’m open for business and ready to chat, and you can see it by visiting my homepage.

I built this as a section within Shopify, meaning it can be added to multiple pages and toggled on/off with just one click! Along with this, I also added a few new features to my website!

New Additions:

• Available Now feature
• Updated taglines and shout-outs
• Added FAQs to the landing page for better clarity on services
• Animated showcases of my work

I’m a designer, Shopify developer, and passionate about empowering businesses through UX, E-Commerce, Marketing, and business coaching. With over ten years in the industry, I’m here to bring fresh ideas and growth opportunities to your business. Watch the video below for more.

If you’d like to chat about adding any features to your website, give me a shout today!

P.S. While writing this blog post, I jumped into the code and updated the blog posts to display related posts. This aims to increase engagement and awareness as users navigate through blog posts.

    <!-- Display Random Shopify Blog Posts -->
    <section class="related-posts">
      <h2>Read more blog posts</h2>
      <div class="related-posts-grid">
        {% raw %}{% assign blog_handle = 'your-blog-handle' %}
        {% assign all_posts = blogs[blog_handle].articles | sort: "random" %}
        {% assign displayed_posts = 0 %}{% endraw %}
        
        {% raw %}{% if all_posts.size > 0 %}
          {% for post in all_posts %}
            {% if post.id != article.id and displayed_posts < 6 %}
              <div class="related-post-item">
                <a href="{{ post.url }}">
                  <img src="{{ post.image | img_url: '200x200' }}" alt="{{ post.title }} Thumbnail" />
                  <h3>{{ post.title }}</h3>
                </a>
              </div>
              {% assign displayed_posts = displayed_posts | plus: 1 %}
            {% endif %}
          {% endfor %}
        {% else %}
          <p>No related posts available.</p>
        {% endif %}{% endraw %}
      </div>
      <a href="/blogs/{{ blog_handle }}" class="view-all-button">View All</a>
    </section>

Copy and paste this code snippet into your Shopify theme/template if you want to display random blog posts to encourage engagement and improve navigation!

P.P.S I totally just added this copy and paste the code snippet feature so whenever I add code to blog posts like the above you, your dev team or anyone can just copy and paste the code if they want it! :)