How to Troubleshoot Out of the Sandbox Shopify Themes?

As you set out on your journey to create a successful e-Shopify store, it’s important to know how to fix common problems and make your website work better. In this guide, we’ll show you simple ways to Troubleshoot Out of the Sandbox Shopify theme. Step-by-step we’ll explain how to resolve errors from Google’s tools like Structured Data and Search Console. Further, we’ll talk about fixing favicon issues and pagespeed insights errors.

How to Troubleshoot Favicon Issue?

A favicon, often referred to as a website icon, tab icon, or bookmark icon, serves as a visual representation of your online store. It not only enhances the aesthetics of your website but also contributes to brand recognition. However, encountering issues with favicon display can impede the desired user experience. Here’s a methodical approach to troubleshooting such issues on your Out of the Sandbox Shopify theme:

The Challenge: Before delving into solutions, it’s essential to grasp the nature of the problem. Favicon issues can manifest in various forms, such as improper display or outdated representation in search engine results.

Step-by-Step Troubleshooting Process

1. Cache Clearance: Begin by clearing the cache on your browser. Cached data might conflict with the updated favicon, leading to display inconsistencies. Alternatively, testing your website in an incognito window can provide insights into whether caching is the culprit.
2. File Format Verification: Confirm that your favicon adheres to the recommended specifications: a PNG format with dimensions preferably set at 32×32 pixels, though 16×16 pixels are also acceptable. Ensure that the file format and dimensions are correctly aligned to avoid compatibility issues.
3. Recrawl Request: If the favicon persists in failing to display correctly, particularly in search engine results, consider requesting a recrawl from Google. This action prompts Google’s indexing system to revisit your website, potentially resolving the display discrepancy.
4. Third-Party App Evaluation: In cases where the issue persists despite the aforementioned measures, consider the influence of third-party applications. Scripts embedded within such applications may inadvertently interfere with the theme’s code, thereby obstructing favicon display.

Resolution Protocol

To address potential script conflicts, navigate to the theme.liquid file within your Shopify dashboard (Online Store > Themes > Actions > Edit code > Layout > theme.liquid). Evaluate the placement of scripts from installed applications, ensuring they are correctly positioned. Scripts should ideally reside near the bottom of the file, immediately preceding the closing tag. In the end, if nothing works, get help from Out of the Sandbox customer support.

How to Troubleshoot Pagespeed Insights Errors?

When it comes to optimizing your Shopify site’s performance, Google PageSpeed Insights (PSI) is a commonly used tool. However, it’s important to recognize its limitations, especially in the context of Shopify sites. Here’s a breakdown of key considerations regarding PageSpeed Insights and how to address common warnings:

1. Google PSI’s Generalized Nature: Google PSI isn’t tailor-made for Shopify sites specifically; it’s designed to evaluate websites across the board. Consequently, its recommendations may not always align perfectly with the intricacies of Shopify’s structure and functionality.
2. Impact of Third-Party Apps: The inclusion of third-party apps in your Shopify store can negatively impact your PageSpeed score. These apps often introduce additional JavaScript and CSS resources, which can slow down page loading times.
3. Discrepancy Between PSI Score & Actual Site Speed: It’s crucial to understand that a high or low PageSpeed score doesn’t necessarily reflect the actual loading speed of your Shopify site. Various factors, including server configurations and external dependencies, contribute to the overall performance.
4. Challenges in Addressing Certain Warnings: Some warnings flagged by PageSpeed Insights may not be easily fixable or may not warrant immediate attention. For instance, modifying CSS files or addressing above-the-fold content issues in Shopify templates requires extensive customization and testing, with minimal benefits in terms of performance improvement.

Optimizing Page Rendering

Addressing Render-Blocking CSS Resource

This issue is related to render-blocking JavaScript and CSS in above-the-fold content. Specifically, the tool has detected one CSS resource that is causing a delay in rendering the page. This means that crucial content visible without scrolling (above-the-fold content) cannot be displayed until this CSS resource is fully loaded.

While it’s possible to make custom code modifications to address these issues, it’s a complex and labor-intensive process due to Shopify’s framework. Out of the Sandbox doesn’t provide support for such advanced customizations, and hiring a third-party developer is recommended if you choose to pursue these changes.

Improving Site Performance

Leveraging Browser Caching for Static Resources

This issue flagged by PageSpeed Insights is about leveraging browser caching for static resources. Specifically, it recommends setting expiry dates or maximum ages in the HTTP headers of these resources. By doing so, the browser is instructed to retrieve previously downloaded resources from the local disk instead of fetching them over the network each time, thereby improving loading times and overall site performance.

Unfortunately, the configuration of Shopify servers, which impacts third-party app performance, cannot be altered. Shopify doesn’t have control over server configurations. You can check out our guide on best practices to improve load time performance of the Out of the Sandbox theme.

Optimizing Image Files

Improving Website Performance

This issue indicates that there are opportunities to optimize the images on your website. Properly formatting and compressing images can significantly reduce their file sizes, resulting in faster loading times and reduced data usage for visitors.

By optimizing images through techniques such as resizing, compressing, and choosing appropriate file formats, you can ensure that your website loads quickly and efficiently, providing a better user experience for your visitors. Sqoosh.app and kraken.io are really good tools you can use.

Enhancing Page Interactivity

Implementing Lazy-Loading for Offscreen Images

This issue pertains to the concept of lazy loading offscreen and hidden images on your website. When a web page loads, all images, including those that are offscreen or hidden from view, are typically loaded simultaneously with other critical resources. This can increase the time it takes for the page to become interactive and fully functional for the user.

PageSpeed Insights may suggest generic solutions like lazy-loading without verifying whether they’re already implemented. While implementing lazy loading can enhance load times, it’s important to note that PageSpeed Insights doesn’t confirm its presence.

How to Troubleshoot Errors from Google Search Console & Google Structured Data?

Google Search Console is an essential suite of tools that provides insights into website search traffic, helps optimize content for better visibility on Google, and alerts about issues needing attention, offering a comprehensive understanding of how Google perceives web pages. On the other hand, the Structured Data Testing Tool validates structured data code, checking for errors and ensuring correct formatting, thereby aiding in enhanced search result display through rich snippets and other formats.

Here are common errors detected in Google Structured Data and how to troubleshoot them:

• Parsing Error: Remove quotation marks from product, article, and collection titles or update your theme to the latest version.
• Availability Error: Update your theme to the latest version to rectify invalid enum values in the availability field.
• priceValidUntil Error: Ignore this warning as Shopify doesn’t support defining price validity periods.
• Description Error: Enter descriptions for products, collections, or blog posts to resolve this warning.
• aggregateRating Error: Ignore this warning as Shopify lacks an integrated rating or review system.
• Review Error: Disregard this warning as Shopify doesn’t include an integrated review system.
• dateModified Error: Update your theme to the latest version to address empty dateModified fields.
• Brand Error: Add vendors to products and enable the “Show vendor” theme option.
• Image Error: Add product images to resolve this warning.
• SKU Error: Add SKUs to products and enable the “Show SKU” theme option.
• itemListElement Error: Update your theme to the latest version to fix empty position fields.
• Missing Global Identifier Error: Currently unsupported; await future support for Global identifiers.