Author: admin

Optimizing Shopify Image Sizes: A Complete Guide

What’s the number one thing a customer instantly notices when they visit your Shopify store? 

It’s the product’s images! 

Thus, creating quality product images is extremely important to increase your sales. But did you know? Your product images don’t only require looking good. They must also be of the right image size as well! 

That’s what most retailers miss out on while optimizing their Shopify stores!

Remember that if you make the same mistake, you lose your potential customers. 

Using the wrong Shopify image size makes a terrible impression on your Shopify store. It also negatively impacts your website’s SEO, loading speed, and user experience.

So stop making this blunder right away and optimize your Shopify image sizes firsthand. 

This guide lets you know every detail of how to change product image size in Shopify.

What Do We Mean by “Image Size” in Shopify Store? 

Choosing the wrong image sizes creates an unfavourable experience for customers when they visit your Shopify store. Two types of image sizes mean business when we talk about optimizing Shopify image sizes.

• Dimension and Pixels of An Image: The max image size supported by Shopify is 4472 by 4472 pixels. Also, different dimensions are required for different image types on your Shopify store. 

You must choose the right ones. If you fail to do so, your images might appear blurry and stretchy to your buyers. 

• Image File Size: Shopify allows uploading file sizes up to 20 MB. When your total image file size is too large, your website’s speed is affected. 

Thus file sizes are critical to optimization. You need to choose images that are compressed in size but without image quality being lost. 

Why Is Image Size Important for Your Shopify Website?

Put yourself in your client’s shoes, and you’ll know how unoptimized image sizes negatively impact your Shopify store.  

If you don’t upload the best product image size for your Shopify store, your viewers might find themselves looking at randomly cropped or overstretched images. This will backfire on your product’s conversions and sales. 

If you have heavy image file sizes uploaded on your Shopify store, your website will take ages to load, and your customers won’t wait that long. 

To grow your business, you should know how to change your product image sizes for Shopify. Well-optimized Shopify image sizes can improve your Shopify store in various ways.  

1. Zooming: When your visitors check out your product images using smaller screens like mobiles, optimized images would zoom in easily without much time. Thus images won’t look unclear and enlarged.
2. Faster Load Speed: Optimized image file sizes on your Shopify store make your store load faster within a few seconds. .

It also aids in improving user experience. Customers would bounce less from your store and would enjoy time exploring your site. You’ll get to display your Shopify website effectively to your clients.

3. Overall SEO Enhancement: Optimized image sizes aid in the better visual representation of your Shopify products, potentially enhancing user activity and your page performance. Also fast speed is a ranking factor for Google. Thus, smaller image file sizes can potentially facilitate better SERP rankings.
4. A Smooth User Experience: Customers like to examine product images thoroughly. It helps them understand the product’s features and specifications. In doing that, they need to see images sizes that are well optimized, and are of consistent sizes — not visibly poor or pixelated. 

Keeping your product images consistent improves the credibility of your Shopify store. 

What’s the Perfect Shopify Image Size? 

There are different types of images in Shopify stores. Each image type performs an explicit function and has distinct requirements.

The chart below explains every image type, and its specificities in an understandable manner. 

Now that you’ve become aware of image types and the required image sizes for your Shopify store. 

Let’s look for ways to optimize your Shopify images, from file size reduction to dimension resizing. 

How Do I Optimize Shopify Image File Sizes in Shopify?

Optimizing Shopify image sizes can be pretty confusing for anyone. It’s not easy for a non-tech person to keep up with the technicalities of editing image file sizes.  

While Shopify claims it can compress image sizes automatically, its drawbacks are very obvious too, including images going blurry. By comparison, there’s a more straightforward solution to this problem of yours. You can optimize your image file sizes using a third-party app like the SEOAnt app.  

SEOAnt is a Shopify SEO app that can automatically optimize images for Shopify stores. Some of its image optimisations include:

• Lossless and lossy compression. You can even customize your own compression rate. 
• You can automatically or manually compress your images
• You can also add watermarks to your images. 
• Convert your PNG files to JPG.
• Additionally, it can help you bulk-add ALT text to your images. 

Here are the steps: 

1. Install SEOAnt’s SEO&Image Optimizer. 
2. Go to the dashboard, and choose Image Optimization.
3. On the right, choose the Settings icon beside Account Overview. Switch on the Optimize Images button. Choose the compression mode and images you want to compress. Save the changes. 

How Do I Resize An Image’s Dimensions in Shopify?

Shopify automatically resizes images located in the featured product section of your store. But it doesn’t resize all images. 

Moreover, If you upload over-sized images on your Shopify store, they might appear distorted to your consumers. 

For this you need to manually resize your Shopify images. There are many free tools available online such as iloveimg for this purpose. 

Shopify Image Optimization Tips 

Shopify image optimization makes images look visually appealing to customers without degrading the quality of images.

But when it comes to image optimization, does it only mean to change image dimensions or compress image file sizes? 

Nope! Other factors are also at play. Follow these tips to get the best from your Shopify images. 

1. Best Resolution for Shopify Images 

You can upload images up to 4472 by 4472 pixels with a filesize of 20 MB. The max resolution for Shopify images is 72 dpi. 

2. Best Product Image Formats for Shopify  

Shopify supports many product image formats, including JPG/ JPEG, PNG, GIF, TIFF, and HEIC. Among them, HEIC and TIFF are the least used formats. 

JPEG is the most commonly used and recommended product image format for Shopify. As compared to other image formats; JPEG provides the most compressed image file sizes without rendering quality and colour range.

3. Add Alt Text and File Names 

Alt texts are text used to describe your Shopify product images. If your images fail to load somehow, Alt texts appear as a quick replacement. 

Adding alt texts will help your customers with low vision to understand your products. This can ultimately increase traffic in your Shopify store. 

Adding Alt texts also aids in the betterment of image SEO. Images properly optimized with alt texts appear faster in the search engines than vice versa. This is because alt texts help search engines understand the relationship between page content and the image. 

4. Lazy Loading

You know that customers can leave within 3 seconds if they find trouble loading your site. 

Using lazy loading techniques on your Shopify store can make your customer stay longer. It makes your customers perceive that your site is loading quickly, but in reality, it’s not.

While your site’s pages are loading, your customers don’t get stuck seeing completely blank pages. Rather they get to see blurry, low-quality images loading. 

These blurry images get instantly replaced with higher-resolution images as they scroll down. Many shopify stores use this technique to maintain customer interaction on their sites. 

5. Don’t Use Large Images Often 

Large shopify images might occur cloudy on your mobile screens. This will most likely lead your potential buyers to bounce back from your Shopify store. 

Also, nowadays people like to explore the internet with their mobiles, whereas laptops are mostly limited to office-based work. Since mobiles are handy and less space-consuming, optimizing large images until they become mobile friendly is a must for your Shopify store.

6. Use square product images 

If Shopify image sizes of your products aren’t coherent, they will make your store look disorganised. Product images look best when they are centered both vertically and horizontally. 

Also, use square images with 800 by 800 pixels.Those are smaller, take up less space, and are attractive to the eyes.  

Note: Less than 800 by 800 pixels would restrict the zoom functionality of your Shopify square images. 

FAQs

• How to add images to your Shopify store?

Follow these simple steps to add images to your Shopify store. 

1. Log into your Shopify account, then go to Shopify admin. 
2. Select the homepage, collection, or single product page accordingly where you want to add your image. 
3. Move the cursor from “rich text editor” to the desired place where you want your images to be displayed. 
4. Choose “clock image” and then upload your image file. 
5. Click on the image that you want to upload, then go for the “image size” option.
6. Don’t forget to add alt-text images to improve your page SEO. 
7. Choose the “insert image” option so you can add your image to the content

• Does Shopify have image size requirements?

Yes, Shopify has specific image size requirements. The max image size that Shopify allows is 4472×4472 pixels with a 20MB file size.

• Does Shopify automatically compress images?

Yes, Shopify can auto-compress images on your Shopify store. It does so to improve the loading time of your website. But it’s not recommended to go for this method. This is because it will take a long time, and the images may appear blurry. Instead, you’d better use a professional third-party image compression tool like SEOAnt. 

• How to check my images in any screen resolution?

You can find out your image’s screen resolution using inspector tools located in your browser. 

Here is how you can use the inspector tools to find out your Shopify image sizes and resolution. 

1. Open the webpage, right click on the image you want to check the resolution for. 
2. Choose the “Inspect” option. It will open up all the information about your webpage in codes. 
3. Your image information will appear highlighted in the inspection panel. 
4. Hover over the highlighted part. A bluish overlay will appear over your image along with a code box. 
5. Your image resolutions will be mentioned in the code box. 

• How to set a logo width?

You can set the logo width with the following steps:

1. Log into your Shopify account. 
2. Go to “Admin.”
3. Find the “Online store” present on the left side of the screen.
4. Choose “Themes” from the drop-down screen.
5. Select the “Customize” option on the newly loaded page. 
6. Choose the “Header” section to optimize your logo width from the directed page. 
7. Upload your logo image without making any changes or use a custom logo tool to customize your logo width.  

• How to fix contrast issues with images and text?

There are many contrast ratio tools available online. Use one of them to fix the contrast ratio between the background and text on your Shopify store. 

As a general rule of thumb, W3c recommends using a standard 4.5:1 text over background ratio. 

• Is JPG or PNG better for Shopify?

JPG is better than PNG as it compresses beautiful colour images with smaller file sizes. On the other hand, PNG images offer high-contrast images but in larger file sizes. 

•  What is the highest quality format for an image?

JPG/JPEG is the highest-quality image format for images. It compresses your image file size without compromising your image quality. JPG format is also the recommended image format for Shopify product images. 

Step-by-step Guide to Speed up your Shopify Website in 2023

As a Shopify store owner, your site speed is crucial to the success of your business. Fast loading time often means a better user experience, a lower bounce rate and higher user engagement. It also directly impacts your sales and conversions greatly. According to analytics by Portent, the highest ecommerce conversion rates occur on pages with load times between 0-2 seconds.

Are you looking to improve your Shopify store speed? Then this comprehensive and actionable guide is for you. Let’s get started on creating a faster and higher-converting Shopify store today!

Why do you need to speed up your Shopify website? 

Visitors aren’t as patient as you want to think, so a slow website outright leads to discouraged customers and lost sales. Below are reasons why you just have to speed up your Shopify website:

1. Improved User Experience: If a page takes too long to load, visitors can get frustrated and leave. Actually, 40% of people abandon a website that takes more than 3 seconds to load. If your pages load quickly, they are instead more likely to stay longer and browse more products.  

2. Increased Sales and Conversions: Research has shown that a delay of just 1 second in page load time can result in a 7% decrease in conversions. As a Shopify store owner, your goal is to convert as many visitors as possible into paying customers. By speeding up your website, you can increase the likelihood of visitors making a purchase.

3. Better SEO: Google factors in site loading speed when determining SEO rankings. If your site is slow to load, it’s less likely to appear at the top of search engine results. A faster website can help improve your SEO and drive more traffic to your store.

4. Mobile Optimization: With 60.9% of website traffic coming from mobile devices, it’s important to make sure your website is optimized for mobile users. A slow loading website can be particularly irritating on a mobile device, due to its smaller screen size and limited processing power compared to a desktop computer. This can turn your potential customers away.

5. Cost Savings: A faster website can reduce your hosting costs and save you money on bandwidth. It can also help you get more out of your ad spend by retaining users longer and increasing the probability of them buying goods.

Now that you understand the importance of a fast-loading website, want to know how fast your website runs?  Evaluate your own site’s speed with tools listed below!

Test your Shopify site speed

Running a speed test can help you find out how quickly your site is loading and what issues are affecting its performance.

There are several free tools available that can help:

• GTmetrix: This tool analyzes your page’s speed performance, provides actionable recommendations on where to improve, and also tracks your historical performance data.
• WebPageTest: WebPage Test allows you to run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.
• Pingdom: Pingdom checks the load time of a page, analyzes it and shows the performance bottlenecks.

From the report generated by these tools, you may find that usually images, apps, codes, and http requests are some of the key factors affecting your store speed. However, don’t worry. Up next, we will show you the easiest ways to troubleshoot each. 

Things to Optimize on your Shopify Website

If you don’t know what to optimize or have optimized the wrong things in vain, your store may become a ghost town deserted by target customers; customers who couldn’t spend forever waiting for your site to load. So keep reading to learn the most important things to optimize to speed up your Shopify website.

1. Optimise your Images 

According to Shopify, image size is important for three main reasons: user experience, page speed, and rankings. While images make your store more attractive and interactive, oversized and unoptimized ones can greatly slow down your page load. This could also lead to lower user satisfaction and potentially hurt your SEO rankings. Here are the key ways to optimize your images for a faster site: 

• Image Compression

Images usually make up a large portion of a Shopify website’s total weight. If an image is 1MB and used on multiple pages, it will add an extra 1MB of data to be loaded every time a user visits. But by reducing the image file size by 50% to 80%, you can see significant improvements in your site speed. Additionally, your image quality will not be lost, if you use professional image compression tools!

• Converting PNG to JPG

PNG uses lossless compression, maintaining all the image data but this results in larger file sizes. By comparison, JPG uses lossy compression, meaning it discards some image data to achieve smaller file sizes.  Converting your PNG images to JPG can help to reduce the file size.

However, this isn’t a one-size-fits-all rule. PNG supports transparency, meaning that the image’s background can be see-through, but JPG doesn’t. JPG format could therefore sometimes cause your images to look incorrect.

Note that images that require high quality and clarity shouldn’t be converted. Images such as logos and thumbnails are key to maintaining your brand’s visual identity and users need a super-clear idea of what they contain. Converting these images can make them appear blurry or pixelated, negatively impacting your brand’s image. The same goes for images that contain fine details like graphs and charts, icons and buttons, infographics, etc. 

• Using static images instead of GIFs

GIFs are often larger in file size compared to PNG or JPG images of the same dimensions, which can affect how fast your page loads. That’s because static images are more efficiently compressed, resulting in smaller file sizes.

GIFs are actually not optimized to be used on the web. Platforms like Twitter actually avoid them by first converting GIFs to video files (mostly MPEG4) so they don’t affect their speed by their long load times. 

Putting these together, GIFs are image formats you clearly want to avoid if you care about your store’s speed and UX. 

• Replacing sliders with Hero images

Sliders can easily make your store load slower, especially if the images are weighty or if the slider contains multiple images. Though typically larger, Hero images are often optimized for swifter page loading, since they require less scripts or plugins and are often lazy loaded. 

Additionally, Hero images are usually resized and reformatted to fit the smaller screens of mobiles. However, sliders can be difficult to navigate on mobile devices, and the images may not resize correctly, resulting in a negative user experience.

There are also extra benefits of Hero images over sliders. Take a look if you are interested. 

• Search engine optimization: Sliders can be less optimized for search engines because the images in a slider may not be indexed or ranked as highly as standalone hero images.
• Accessibility: Hero images can be easily accessible to users with visual disabilities, if optimized with Alt text, captions, etc. Doing the same for sliders is more challenging as they often contain dynamic images, making it difficult for screen readers to interpret.
• User engagement: Hero images are designed to grab users’ attention and send a clear, concise message about your product or brand. Sliders can be overwhelming and distracting. Users may not spend enough time to engage with all of the images in the slider.

2. Optimize Your App Usage

Most Shopify apps are built using JavaScript and CSS to enhance the functionality and appearance of a store. Once installed, apps will add their codes to your store, which run in the background to provide dynamic and interactive experiences for customers.

If not properly managed, they can significantly increase your page size, cause compatibility issues, and slow down your store. Here are some of the things you can do to prevent that: 

• Remove unused apps. 

By removing these unused apps, the store can reduce the amount of code that needs to be loaded and executed per time. This could improve the overall performance of your story. 

1. Log in to your Shopify admin panel.
2. Go to the Apps section.
3. Review the list of apps installed on your website.
4. Uninstall any apps that are no longer needed or used by your website.

• Disable unused app features

You can also simply disable some unused features of your apps. By tracking how users interact with your website with Heatmap tools like Hotjar, you can identify which features are most valuable and should be maximized, likewise the least used ones you should get rid off.

Then, go to the App section of your store, locate the app and disable the feature you wish to:

• Clean the code residue of installed apps

When apps are removed from your Shopify website, their codes may still remain. Eliminating it isn’t a walk in the park. Either you have developers onboard, or hire professional expert services, in case you mess up your store codes.

3. Optimise Elements of Your Theme

Some elements in your theme can drag down your store. You can do the following to give your website a speed boost.  

•     Use system fonts

System fonts are fonts that are pre-installed on most computers and devices. Compared to custom fonts, they don’t need to be downloaded externally from a server, reducing the HTTP requests to load the content and thereby improving your page speed.

You can use a font family like mono, serif, or sa  ns-serif. They don’t require a font license while looking great for customers.

•     Disable non-essential theme features

Same as app features, disabling non-essential theme features such as pop-ups or sliders can also hasten your webpage. This will reduce the amount of code to load, likewise cut down distractions. 

However, before disabling anything, you should consider how important these features are to your user engagement and conversion. Use Google PageSpeed Insights or GTmetrix to identify which elements are slowing down the website and should be removed or optimized. 

•     Use a lightweight, speed-optimized website theme.

A lightweight theme can set your store on a fast track to retain customers, saving you tons of time and costs in speed optimization. 

Note: Changing a Shopify theme is not hard. However, you might lose some customizations and added features, if not carefully. 

4. Optimise Your Videos 

Videos can help you engage visitors and keep them focused on your site longer. However, unoptimized ones are often hefty, slowing down your page loading time. Your visitors may impatiently bounce and browse your competitor’s store instead. 

Here are a few ways to optimize your videos to reduce page buffering and lag time. 

•     Embed product video links instead of uploading them. 

By embedding a video from a third-party video hosting service, such as YouTube or Vimeo, you can save on storage space and bandwidth. What’s more, these services typically have faster load times and better video quality than videos directly uploaded to a website.

•     Lazy load videos. 

Lazy loading defers the loading of non-critical resources on your webpage, such as images and videos, until they become visible to the user. This can reduce the initial load time of your web pages. The bottom line is not to go for faster loading at the expense of user experience, like compressing video resolutions excessively. Strike a balance!

For example, ensure that your video is clearly visible and embedded in the right place. This way, users don’t have to scroll through long pages to find it. 

5. Optimise Your Site Codes, Links and Requests 

The HTML, CSS, JavaScript files, plugins, HTTP requests, all contribute to your store’s overall weight and the number of resources needed to display your pages correctly. Here’s how to optimize them.  Note that some methods can be technically challenging. It’s best to use a professional service to get it done swiftly and easily if you don’t have a strong developer team. 

• Minify HTML, CSS, and JavaScript files: This removes unnecessary white space and comments in your theme code, which can reduce the coding file size.
• Eliminate resources that are render-blocking: By this, the browser will not need to load resources until they are visible to the user.
• Address redirect loops: This means to correct any redirects that are causing the browser to go in a loop before loading the right page content.
• Migrate tracking codes to Google Tag Manager: That is, you’ll move the tracking codes to Google Tag Manager, which can improve the load time of your website.
• Use Gzip compression: Compress the data that is sent from the server to the browser. It can reduce the amount of data that needs to be sent and help your site get faster.

5. Enable AMP 

AMP is a technology that creates lightweight versions of web pages that are optimized for fast loading on mobile devices.

To enable AMP on your Shopify store, you can install a professional third-party app like SEOAnt. This app allows you to easily enable AMP on your Shopify store with one click. You can also customize the design of your AMP pages to match the look and feel of your website.

6. Use Shopify’s built-in CDN

Shopify has a Content Delivery Network (CDN) that can distribute your website’s content to multiple servers around the world. This means, customers worldwide can access your page content simultaneously and quickly. It is specially built to help a Shopify store load faster. For this, you need to upgrade to the Shopify Plus plan. 

How to Lazy Load Images on Shopify?

Being a Shopify owner, you should know how disadvantageous it is to have a slow-loading site. But the question here is, what makes your Shopify websites so heavy to load? 

Well, there are multiple reasons. As you know, a Shopify store may have a number of visual effects, style sheets, crisp graphics, high-definition images, non-optimized videos, and plugins to keep your customers interested. They all consume lots of space, therefore slowing down your website.

But this problem can be resolved using a simple strategy called lazy loading. 

Lazy loading can drastically lower your website’s loading time, reducing your customers’ bounce rates and increasing your conversions. It can also result in improving your Shopify website’s SEO.

Want to find out more about lazy loading and how it can positively speed up your page loading? Read on.

What Is Shopify Lazy Loading? 

Lazy loading is also called on-demand loading. It is a useful programming technique that delays the loading of visual elements unseen yet by your visitors until they scroll down or click further. 

Say you have 100+ pictures on your webpage. If your website loads all of them up front, chances are your page speed might drop greatly. And you lose sales because of it. But with lazy loading, your website will only display the first batch of images of the page the user is currently on, with other images down below being blurry. 

This way, it makes your pages seemingly faster, and also more responsive, creating a smoother visitor experience. 

Generally, you can lazy load images, videos, text, or any other media files on your web pages. Given Shopify stores are usually image-rich, the lazy loading of images becomes essential.  

How Does Shopify Lazy Loading Work?

Lazy loading works by using JavaScript code or HTML attributes like ‘defer’ and ‘async’ to reduce elements needed for loading initially, hence cutting down your initial page weight, memory usage and page load time. This way, your store runs faster, delivers content in time, and your customers won’t unhappily quit. 

For a visitor, how would that feel then? Well, when you browse a web page, images out of your view focus will be fuzzy, because these high-quality images are swapped temporarily by some low-resolution blurred images. As you interact on the page more, and bring them into the viewport of your screen, the high-quality and clear pictures will return. 

Technically, you can implement lazy loading by replacing HTML src attributes into data-src as a placeholder. Once a page visual becomes visible to users, your JavaScript will dynamically update the data-src URL with the src attribute. 

Why Do You Need To Implement Lazy Loading For Your Shopify Store? 

Lazy loading is important to your Shopify store in different ways. Here is a glimpse of what it can do: 

• Reduced load time and enhanced SEO. Google favors faster sites. Lazy loading lowers the initial time needed to run the visuals on your page, reducing the pressure on your servers, hence your site runs faster, and your store SEO performance may improve. 
• To conserve bandwidth. When all images are loaded simultaneously, it takes unnecessary time and resources. However, lazy loading only delivers content upon request. With less data transmitted at one time, you save more bandwidth costs.  
• To enhance customer satisfaction. Customers can browse your pages seamlessly, instead of staring at a loading circle, a progressing bar or a white screen all the time. This can improve your site’s conversion rates and page views.

How to lazy load images on Shopify? 

There are multiple ways to execute lazy load on your store. Check below. 

• Select a Shopify theme supporting lazy loading

This method involves the use of a Shopify theme that’s already integrated with lazy image loading, such as Ella. However, you shouldn’t compromise other important functionalities of your theme.  

• Add lazy loading manually

Here you’ll need some coding background. Our recommendation is to use lazysizes.js image lazy loader because it is fast and optimized for SEO. 

1. Go to the theme assets folder in your Shopify store. Add the lazysizes.js library to the folder. Then insert it in theme.liquid.
2. Look for image tags in the theme files. Swap the images’ src attributes with data-source. Your image tag will be turned into a small coding line like <img src=”IMAGE_URL”>
3. Include the “lazyload” class and update the images. The coding line with the “lazyload” class added should look like this: <img data-src=”IMAGE_URL” class=”lazyload”>
4. If you want animation effects, use CSS styling. 

You can also use a specific script to lazy load images on Shopify. Simply add your specific code as follows:

1. Open Shopify Admin.
2. Go to Online Store and choose Themes. 
3. Click Actions > Edit Code and open the Layouts directory.
4. Select theme.liquid and add this code to the online editor:

{{ ‘//cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js’ | script_tag }}

Tip: Ensure to paste the code before the </head> tag section. When done, save the changes to lazy-load your Shopify store images.   

• Hire expert services 

If you are not well-conversant with coding, we advise you to seek the help of professional developers like SEOAnt’s expert team. They will ease your burden and manually implement your lazy loading accordingly. 

How to Check If Your Shopify Lazy Loading Works?

There are three ways to tell if you have successfully implemented lazy loading on your website. 

• Check manually

Simply scroll down the lazy loaded page yourself and see how the pictures engage with you. Are they blurry before scrolling but becoming clear after you scroll down? If yes, your Shopify lazy loading is working. 

• Leverage the Shopify Analyzer 

This tool will check if lazy loading works and offer practical tips to optimize your Shopify store.

Use your browser’s Inspect tool. To check if your Shopify lazy loading works, right-click on a page, select View Source on the page, and search lazy. You should find ‘lazy’ elements if your Shopify lazy loading works.    

• Check with the Chrome DevTools 

Launch the tool, open Network and click the Img filter. Reload your webpage and the images above the fold will show up in the image list of the tool. Scroll your page and you should see the images appear on the list one by one. It means your lazy loading is working. 

When Is It Not Advised to Implement Lazy Load on Your Shopify Images? 

Although tempting, not every single image on your Shopify store should be lazy loaded. Here are some cases:

• For images above the fold like the header and banner of your website. If they are not displayed to customers immediately, your Shopify site will appear visually incomplete, impacting their impression about your brand. 
• When you use the Shopify Content Delivery Network (CDN), whose servers perform the loading tasks on your behalf. 
• If you are only lazy loading to bait your page speed scores and not considering humanized user experience on your website. 
• If your Shopify site already loads quickly with a strong server network, there is no need to lazy load your images. 

When Should You Lazy Load Images On The Shopify Store?

The main point of lazy loading your website’s images is to serve your customers first and search engines next. Here are scenarios when you can consider lazy loading:

• Images that appear after the fold. You can apply lazy loading as it makes sense to load the images gradually since most users may not even reach the last images and it helps speed up the site. 
• When you have many images yet you don’t use CDN, or don’t have strong servers. 
• When your text content matters more than images to site visitors.

Lazy Load Design 

Lazy loading your Shopify images shouldn’t be hard. For the best possible results, you can try these options to help you do it right:

• Use an image’s dominant color when loading. This is also aesthetically pleasant for your site visitors. 
• Apply an entertaining blurry effect as images load. Using a lazysizes plugin called Blur-Up, you can apply a visually appealing yet stylish blurry effect to your images. This can be also done via script in theme.liquid.  
• Use a spinning wheel GIF while the image is loading. This is also a useful trick to lazy load your Shopify images. It first displays a placeholder GIF of a spinning wheel before the real image can appear. 
• Put your store’s logo to replace the whitespace. This can help strengthen your brand. 
• Use a low-quality image placeholder. You can add images with poor quality to display first before the original photo loads fully. This improves your website’s interactivity with people browsing.
• Specify image container width and height using CSS. This helps to prevent CSS from making sudden layout shifts without your knowledge. If not careful, it can disrupt your site’s UX. 

Lazy Load Videos 

As with images, so too can you lazy load videos. Lucky if you already use a Content Management System (CMS), lazy loading attributes on images and videos may be automatically available. 

Otherwise, use a plugin to enable lazy loading for your videos, irrespective of the browser your site visitors use. This is a more secure way of lazy loading. Some web browsers don’t support default lazy loading settings in CMSs. 

If you have any trouble putting this into reality, panic not. Don’t hesitate to seek professional help. For example, SEOAnt expert services will make it a breeze for you to lazy load your videos. 

How Do I Get Rid Of Lazy Loading On Shopify?

Although lazy loading is ideal for your store, there may be times when you simply want to remove it. Read below to know different ways to go about it.

• Change the theme. Most Shopify themes have automatically enabled lazy loading. To get rid of it, you have to change the theme to one that doesn’t have this setting.
• Remove the lazy loading script. If you added lazy loading by editing a Shopify theme, you could delete the code to remove lazy loading.
• Replace the src attribute with data-src. This applies if you added lazy loading to specific images.
• Remove the Javascript code. If you added loading to a JS document on your store’s assets directory, deleting it will get rid of it on your Shopify store.

Does Lazy Loading Help Or Ruin My Site’s SEO?

It helps your site SEO. In fact, lazy loading is a top image optimization strategy to help your Shopify site SEO efforts. Here is why : 

• It decreases website load time. This improves your site’s discoverability, ranking, and user experience.  
• It also improves your site LCP (Largest Contentful Paint) metrics which is crucial for SEO rankings. LCP measures how long a page’s main content loads to be ready for interactions. It could be images or blocks of text that appear on the first page (usually above the fold).         

Other Shopify Speed Optimization Tips

Apart from lazy loading, there are other things you can do to increase your Shopify website speed:

• Compress your image file sizes: Use professional tools like SEOAnt image optimizer feature to reduce your picture sizes by up to 80%, without quality loss.  
• Create AMP: Implement Accelerated Mobile Pages to help your pages load faster on mobile views. 
• Utilize one Hero Image: Instead of using sliders to display several images at one time, use a single high-quality Hero picture instead, which loads faster and captures your site’s essence. 
• Work on your codes: Codes are also a big component of your page weight. You need seasoned Shopify developers to help minify JavaScript and HTML, remove render-blocking CSS and JavaScript. That way, your site speeds are higher even when the internet is lagging and saves data. 

Conclusion

To this point, we have exhaustively discussed lazy loading in detail. You should have no problems getting started for your website’s lazy loading practice. It is crucial for your website speeds, ranking, and SEO efforts. But, I must say that it isn’t as simple to have everything up and running without coding experience. Therefore, I recommend taking advantage of expert services offered by SEOAnt!

How to Noindex Pages on Shopify: A Comprehensive Guide (2023)

Looking to hide sensitive pages on your Shopify store from search engines and customers? The noindex tag can help. It helps ensure that your SEO efforts are focused on the pages that truly matter to your business. 

Noindexing can help you: 

• Remove out-of-stock items, expired offers, obsolete low-quality pages, test pages etc  
• Protect private pages concerning your customers’ account and payment
• Prevent duplicate content issues 
• Ensure search engines only index pages that can specifically impact your business

By the end of this guide, you’ll have a better understanding of how to improve your website’s visibility rankings by using the noindex tag. Let’s get started!

What is the Noindex Tag on Shopify?

The noindex tag is an HTML meta tag telling search engines, like Google, not to index a specific page on your store. This unindexed page will never be included in the SERPs. 

By default, Shopify’s robots.txt file directs search engine bots, or “crawlers,” to the pages they should and should not view. For instance, a customer’s login, account and billing page are typically excluded for customer data safety concerns.  

How Does Search Engine Indexing or Noindexing Work? 

Search engines utilize automated software, referred to as spiders or crawlers, to scan and index various web pages on the internet. 

Take Google as an example. After its spider finds a page, this search engine will analyze the page’s content, including the text, images, and video files, and determine their relevance to certain keywords or topics, and store all such information in its index(essentially a large database). When a user makes a relevant search in Google search bar, Google will return a list of search results from its index.

While it can take Google days or even weeks to index your web pages, you can also use sitemap and Google Search Console to speed up indexing, while setting up internal links and building backlinks.

However, not every web page is meant for search. In such a case, you will need the noindex tag, to instruct spiders to not index a page. So if someone inserts a query into search engines related to your content or products, the page won’t be listed. 

It’s important to note that just because a page is not indexed, it doesn’t mean it’s not accessible to users anymore. The page can still be accessed by directly visiting its URL or following a link from another page. The noindex tag simply tells search engines not to include the page in their search results. Conversely, an index tag instructs the opposite. 

You can control your page indexing by editing your store’s robots.txt file with the noindex directive or using noindex robots meta tags. While this may seem technical, it really isn’t. Especially when you consider that your store robots.txt file is automatically configured and optimized by Shopify. You’ll likely only have little to do.

What Pages Should I Index and Noindex on Shopify? 

As a Shopify store owner, it’s critical to know what pages to index and non-index. A slip up mistake can end up disastrous, such as lowered search rankings, duplicate content penalties, or leaving your customers perplexed. 

Pages you need to Index

• Home, Product and Collection Pages: These pages are usually the main source of traffic and revenue to your store. They contain unique and valuable details about your products and services.The faster they are indexed, the better.  
• Blog Posts, FAQ pages: Blog posts and FAQs can drive a lot of organic traffic to your website, helping establish your brand as an authority. These resources serve both readers and search engines by  providing valuable information and improving the relevance and quality of search results. To maximize their potential, they should be indexed. 
• Pages with a rel canonical tag: The canonical tag is used to mark out the main version of a page for Google to index, among a pack of duplicates. Adding noindex tags to such pages confuses Google, and negatively affects your page rankings.

Other examples include contact us page, about us page, reviews, alternatives, etc. 

Pages you need to noindex

• Login and registration pages: These pages typically contain sensitive information like customers’ login details and personal information. Indexing these pages makes them vulnerable to security threats such as hacking attempts or spam.
• Cart and checkout pages: These pages are usually only used during the purchasing process and should be private to individual users only.
• Password-protected pages: Pages that require a password to view should be noindexed because they contain information that is not intended for public viewing. Examples are employee portals and client dashboards.
• Tag and category pages: These pages group products under different tags such as “free shipping” “red”, or in broader categories, such as “clothing” or “electronics”. They both allow customers to easily filter and find products that match their search criteria. However, they are often automatically generated to help Shopify owners and can create duplicate issues if indexed. 
• Thank you pages: These pages typically have little value to users and can be seen as duplicate content by search engines.

Note: There are mere suggestions and are not set in stones. There could be times where you would have to noindex pages that you’ve previously indexed, and vice versa. Here are examples of such instances: 

• The page should be visible only during a specific season, such as winter coat pages during winter.
• The product or collection is out of stock.

• The information on the page is outdated and should not be visible to users in search results.
• You have a beta version of your website, and all the test pages should just be visible to your team only. 

How to noindex a page on Shopify?

Proper indexing control is key to improving search visibility on your Shopify website, which makes it important to learn how to do so. And just so you know, the guidelines below present the ‘how’ in a super easy way.

1. Noindex with a third-party app（SEOAnt)

The easiest and most user-friendly way to noindex a page is through a third-party Shopify SEO app like SEOAnt. With just one click, you can index or noindex a page without any technical knowledge or developer assistance. 

Steps to index your page using SEOAnt:

1. Install SEOAnt’s SEO & Image Optimizer 
2. Go to Dashboard. Choose On-Page SEO Scan. 
3. Select the page you want to noindex. Click Optimize Content in the Actions roll-down menu. 
4. Scroll down to the bottom of the page. Click Show in the More advanced settings.
5. Select No index. Hit the button Save. Then you are done!

This is the perfect option for those who want a quick and easy solution for their noindexing needs. In fact, there are other things you can get done with SEOAnt:

• Detailed on-page SEO scan report to guide website optimization
• Automatic detection and redirection of 404 links
• Auto-generate sitemap for faster indexing 
• Bulk edit image alt and meta tags
• Shopify AMP
• Analysis of competitor keywords, etc. 

Price: A free plan, then Pro and Premium plans start at $29.99/month and $59.99/month respectively.

2. Noindex on Shopify robot.txt liquid 

By default, all Shopify stores come with a pre-designed and optimized robots.txt liquid template, which can be edited to control which pages are to be indexed or noindexed. To do this, you will need to access the robots.txt liquid of your Shopify theme. Here are the steps to follow.

On mobile

1. From the Shopify app, go to the “Store” section and select “Online Store” from the “Sales channels” section.
2. Click on “Manage themes” and select the theme you want to edit.
3. Click on the “…” button to open the actions menu and select “Edit code.”
4. In the “Layout” folder, find the “theme.liquid” file and click on it to open it.
5.  Scroll down to the <head> section of the code.
6. To prevent the search template from being indexed, paste this code

{% if template contains ‘search’ %}

<meta name=”robots” content=”noindex”>

{% endif %}

7. To noindex a page, simply paste this code, and adjust “page-handle-you-want-to-exclude” to the correct page handle::

{% if handle contains ‘page-handle-you-want-to-exclude’ %}

<meta name=”robots” content=”noindex”>

{% endif %}

8. Click “Save” to apply the changes.

On PC

1. Log in to your Shopify admin and go to Online Store > Themes.
2. Locate the theme you want to edit and select Edit code from the action menu.
3. Open the theme.liquid layout file.
4. To noindex the search template, paste the following code in the <head> section:

{% if template contains ‘search’ %}

<meta name=”robots” content=”noindex”>

{% endif %}

5. To noindex a specific page, paste the following code in the <head> section, replacing “page-handle-you-want-to-exclude” with the appropriate handle:

{% if handle contains ‘page-handle-you-want-to-exclude’ %}

<meta name=”robots” content=”noindex”>

{% endif %}

6. Save your changes by clicking the Save button.

3. Noindex on the robots meta tag

This method involves inserting the “noindex” robots meta tag into the head section of the HTML of a web page. It has the following syntax: <meta name=”robots” content=”noindex”>.

Similar to above, it also involves coding. Here is how to insert the meta tag:

1. Go to your Shopify admin dashboard and navigate to the page you want to noindex.
2. Click on the “Actions” button, and then select “Edit code” from the dropdown menu.
3. Locate the head section of the HTML code for your page.
4. Add the following line of code within the head section: <meta name=”robots” content=”noindex”>
5. Save your changes and publish your page. It may take a few days for Google to remove your desired URL from its index. 

You can also use this method to reindex a page by changing the “noindex” to “index”. This is useful in cases where you‘ve accidentally noindexed a page and now want it to be indexed again.

4. Noindex via Google Search Console

Noindexing a web page via Google Search Console is quick and simple. Many opt for this option because it can help expedite their page noindexing. Here are the steps:

Firstly, you must have set up a Google Search Console account and have verified your domain.

1. Navigate to the “Removals” section on the left of the Google Search Console page.
2. On the right-hand side, click the “New Request” button in red.
3. Enter the URL you wish to remove.
4. Choose the option “Remove this URL only.”
5. Hit the “Next” button and then confirm by clicking “Submit Request.”

When removing unwanted pages from your site, using the “noindex” tag is the safest option. Never directly delete them or implement a 500 code, which hurts your website integrity and performances.

How to Check The Noindex Tags on My Pages? 

Often when you have inserted the no-index tag in your pages, it’s only a matter of time for Google to noindex them. 

You can double-check your noindex tags in these ways:

1. Check the page source code: View the source code of the webpage in question and look for the “noindex” tag in the <head> section of the code. It should look something like this: <meta name=”robots” content=”noindex”>
2. Use a tool like Google Search Console: If you have added the webpage to your Google Search Console account, you can check the status of the “noindex” tag in the “Coverage” report under the “Index” tab.
3. Use a crawler tool: You can use a website crawler tool such as Screaming Frog or DeepCrawl to check if the “noindex” tag is present on the webpage.

How to Check if My Webpages Have Been Successfully Noindexed? 

If you want to know if your  web page has been successfully removed out of Google index, then try this secret trick:

Enter site:link in the Google search bar. 

If your page appears in the SERPs, it means your page so far is still indexed. Wait for a couple days and check further. 

If you get results like this, it means the “noindex” tag has been working.

If weeks or even months later, your pages are still being indexed, something is probably up. Don’t worry. There are solutions available to help you. Read below to learn more.

Why does my page with a noindex tag still get indexed?

There can be a few reasons why a page with a noindex tag is still getting indexed by Google:

1. Caching: The search engine may have cached (saved a copy) of the page before the noindex tag was added. The cached version of the page will still be indexed until the search engine recrawls and reindexes the page. 

Popular websites that receive a lot of traffic and are frequently updated, are usually re-crawled and reindexed daily. But for less popular websites, recrawl and reindexing may happen less frequently. You can try noindexing again in the Google Search Console to quicken the pace. 

2. Incorrect implementation: The noindex tag may not have been implemented correctly on the page. Double check the page source code to ensure that the tag is properly placed in the <head> section of the code.
3. Blocked by robots.txt file: The robots.txt file instructs search engine crawlers on which pages it should or shouldn’t indexed. If the robots.txt file is blocking the search engine crawler from accessing the page that has the noindex tag, the search engine will not be able to see or process the noindex tag. The page will therefore remain indexed.

The solution is to remove or modify the rules in the robots.txt file that are blocking the page. You could also add an exception in the robots.txt file to allow search engine crawlers to access that specific page.

4. Third-party sources: The page may be getting indexed by Google from third-party sources such as a sitemap or another website or page linking to it. Here are some possible ways to get around this:

• Remove the page from the sitemap
• Use the rel=”nofollow” attribute on links to the page 
• Add a meta robots noindex tag to the page
• Remove any links to the page from your website.
• Use 301 redirect

5. Redirects: If the page with the noindex tag is redirecting to another page, it may still get indexed. It’s important to ensure that the redirect is set up correctly to prevent indexing. 

How Do Noindex Tags Help My Shopify Store and SEO?

Without the noindex tag, search engines will index all your webpages, even those that you don’t want to be indexed. This can harm your SEO, and exposes your and your customers’ private data to security vulnerabilities. Here are a few of the benefits of using noindex tags on your Shopify store:

• Helps prevent duplicate content: Without the noindex tags, multiple similar pages on your website will compete against each other for rankings. Google also views duplicate content as a sign of low-quality or spam. All this may lead to decreased web visibility. 
• Keep irrelevant pages out of search results: Some pages on your website are honestly just not important. Examples include the thank you page, tag pages, etc. Using noindex tags makes sure that customers are only seeing the most relevant content.
• Improves website load times: Noindexing duplicate or irrelevant pages saves crawl budget and make your new or updated pages get indexed faster, also reduce the amount of data needed to be processed, increasing your website load time. Since search engines take page load times into account when ranking websites, this boosts your SEO as well.
• Keeps private pages to unique customers or yourself only: Noindex tags are useful for pages that contain sensitive information such as login pages, account pages, and private sales pages. By preventing search engines from indexing these pages, only authorized individuals have access to them.
• Hide sold out, discontinued products: If indexed, these pages can show up in search results, making your visitors confused. Since you can’t can’t deliver what they’ve purchased, it is compromising your brand reliability. Noindexing them definitely helps! 

FAQ

• How do I remove a noindex tag from my page? 

Remove the tag from the page’s source code in your store liquid file, or use a tool like SEOAnt to remove it.

• Can Google ignore a meta noindex tag? 

It is highly unlikely, but it can happen if the tag is improperly implemented or if Google’s crawlers encounter an error when trying to access the page.

• Noindex VS Nofollow VS Disallow VS Noreferrer VS Noopener 

Noindex is a meta tag that tells search engines not to index a page. Nofollow is a link attribute that tells search engines not to follow a link. 

Disallow is a directive in robots.txt that tells search engines not to crawl a page. 

Noreferrer is a link attribute that tells the browser not to send the referrer header when navigating to the linked page. 

Noopener is a link attribute that tells the browser to open the linked page in a new tab without access to the current tab’s browsing context.

• How can you tell if a website is using noindex? 

Check the source code of the website’s pages for a “noindex” meta tag, or use a tool like Google Search Console to check the pages’ index status.

• How long does it take for noindex to work? 

It varies depending on the frequency of the search engine’s crawling, but it can take anywhere from a few days to a few weeks for a noindex tag to take effect.

• What’s Google’s policy to noindex tags? 

Google generally honors noindex tags, but they can ignore them if the tag is improperly implemented.

How to fix the “Shopify indexed though blocked by robots.txt” error?

Did you just get an “Indexed, though blocked by robots.txt” message from Google Search Console? You don’t know what it is, if it is serious, or what to do? No worries! In this article, I will show you all there’s to know about this issue, and guide you step-by-step on the fixes. Read on!

What is Shopify robots.txt?

Before everything else, let’s talk about what the robots.txt is first, as this is where all the “why” and “how to fix” will be coming from. 

Shopify robots.txt is a file that instructs search engine robots (also known as “crawlers” or “spiders”) which pages or sections of a website to not crawl or index. For example, if your robots.txt file includes the line “Disallow: /checkout”, the robot will not crawl or index any pages within the checkout section of the website.

As a Shopify store owner, this is where you join the conversation. Shopify automatically generates a robots.txt file for each store, which can even be edited and customized by the store owner in the Shopify admin. Therefore, you get to control which web pages are to be indexed. And in case you didn’t know, this can greatly affect your store’s SEO performance. But first, let’s see how to access this said file. 

Where can I Access Robots.Txt File in Shopify?

You can access the robots.txt file in your Shopify store by adding “/robots.txt” to the end of your store’s UR. For example, if your store’s URL is “www.abcstore.com”, you can access the robots.txt file by visiting “www.abcstore.com/robots.txt” in your web browser.

Or simply log in to your Shopify admin. Next, go to Online Store > Preferences > Search engine listing preview > Edit robots.txt”

Shopify’s Default Robots.txt Rules 

Shopify’s default robots.txt file automatically prevents Google from indexing pages that are not relevant to searches or could cause duplicate content. And of course, this is good for your store’s SEO. 

By default, Shopify’s robots.txt file includes the following instructions:

•     Disallow: /checkout
•     Disallow: /cart
•     Disallow: /orders
•     Disallow: /account
•     Disallow: /search
•     Disallow: /apps
•     Disallow: /services

These mean, any pages within the checkout, cart, orders, account, search, apps, and services sections of your store shouldn’t be indexed. 

Additionally, the robots.txt file can include the instruction “Allow: /” “Sitemap: https://mystore.com/sitemap.xml” which points the robots to the store sitemap, offering a list of all URLs on the website that should be indexed.

By limiting the number of less-value or redundant pages indexed, search engines can direct users to more relevant pages, attracting more targeted traffic. 

 So far so good, Shopify! 

What Does “Shopify indexed though blocked by robots.txt” Mean?

This means that some of your pages are not meant for indexing but still get indexed by Google, even after you have blocked them in your store’s robots.txt file. Whenever this happens, you can tell your instructions in the robots.txt file are not being followed.

This can happen for various reasons, and here are some:

• Misconfiguration in the robots.txt file: The instructions provided in the file may be incorrect or not properly formatted.
• Robots.txt file deletion: The robots.txt file may have been accidentally deleted or removed.
• Robots.txt file not accessible: The robots.txt file may not be accessible by search engine crawlers. If the server is not configured properly. This could be due to a misconfigured firewall, incorrect file permissions, or other server-side issues.
• Third-party apps: Some third-party apps can affect the robots.txt file and cause the pages to be indexed despite being blocked by the file.
• Sitemap: Even if a page is blocked by the robots.txt file, it may still be included in the website’s sitemap, which can lead to the page being indexed by search engines.
• Links on other pages or dynamic URLs: Despite being blocked by the store’s robots.txt file, some pages may still be crawled and indexed by search engine robots through links on other pages or dynamic URLs.  

Some bloggers may claim that it’s not a big deal. But that’s not entirely accurate. It’s likely that Google will de-index the page in the future, which means it will no longer be included in Google’s search results. If this happens to be an important page to drive in traffic to your store, obviously, you face decreased visibility and revenue. 

Alternatively, Google may show a warning message in search results instead of your meta description. And that can negatively impact your brand’s reputation. I mean, just take a look at the example below: 

Stuff like this gives potential users the impression that you aren’t professional, nor are you a top reliable brand. 

Maybe you do want those pages to be indexed, but they were accidentally blocked on the robots.txt file. Or maybe you blocked them on the robots.txt file on purpose, but Google managed to index them. Either way, the first step is to check which URLs are having these issues before making any moves.

Note: keep in mind that this is not a small issue, and it can have a significant impact on your store’s SEO. So, don’t hesitate to reach out to an expert who can help you identify and resolve these issues.

How to fix the “Indexed, though blocked by robots.txt” issue?

To fix the “Indexed, though blocked by robots.txt” issue, you need to ensure that the file is correctly blocking the pages that you don’t want to be indexed. You can check the syntax of your robots.txt file or use the Google Search Console to check which pages are being blocked

Step-by-step Guide to Fix the Issue 

Here is a short guide to fix issues related to the robots.txt file by using Google Search Console:

1. Export all URLs in warning from Google Search Console: Go to the ‘Coverage’ report and select the ‘Valid’ tab, then select ‘Download’ and choose ‘All URLs’ to export a list of all URLs that are being blocked by the robots.txt file.
2. Decide if you want them indexed or not: Review the list of URLs and decide which pages you want to be indexed by search engines.
3. Unblock the URLs: Identify the rules blocking the pages in the robots.txt file and remove or comment out those lines.
4. Test the changes: Use Google’s robots.txt Tester to test the changes and ensure that the pages you want indexed are no longer being blocked.
5. Validate the fix: Hit the “VALIDATE FIX” button in the Google Search Console to request Google to re-evaluate your robots.txt against your URLs.
6. Monitor the results: Monitor the coverage report for any other warning or errors.

Caution

Editing your robots.txt file is not difficult. But one misstep can have a significant impact on your web page indexing and SEO rankings. This kind of risk and the technicality involved is why you shouldn’t edit the robots.txt file yourself. It’s best if you hire professional services. 

What Pages Shouldn’t be Blocked by Robots.txt?

Some pages are too important to be (accidentally) blocked. If so, you are likely to face decreased traffic, customer trust and search visibility. They include:

• Homepage: This is the most important page of your website and search engines should always be able to crawl and index them.
• Product pages: These pages contain important details about your products and should be indexed so that customers can find them via organic search and make purchases .
• Collection/category pages: These pages group together similar products and also help customers navigate your website. They should also be indexed.
• Blog pages: If you have a blog on your website, these pages should also be indexed as they can help drive traffic to your site and improve your SEO.
• About Us page: This page provides information about your company and can help build brand authenticity and establish trust with potential customers.
• Contact Us page: This page tells search engines and customers how to contact your business and should be visible.
• Privacy Policy and Terms of Service pages: These pages explain how your business handles customer data and should always be within the reach of search engines and customers.
• Sitemap page: This page provides a map of your website and can help search engines more easily crawl and index your site.

To cut it short, any page that contains valuable information that you want search engines and customers to be able to find shouldn’t be blocked. Other examples are customer reviews pages, FAQ pages, etc. 

If you find that any of these pages is blocked by robots.txt, you should remove it from the robots.txt file and submit a new sitemap to Google for reindexing. But how about pages that should certainly be unindexed from the Robots.txt file? Let’s discuss those.

What Pages Should be Blocked by Robots.txt?

Not every page should be accessible to all. Some pages on your website contain sensitive or duplicate information that you don’t want search engines to index. Otherwise, you may trigger Google penalties or loss of customers. Here are a few examples of pages that you may want to block:

• Login pages: These pages typically contain customers’ private information and only authorized users should be able to reach them.
• Shopping cart and checkout pages: These pages may contain sensitive user details such as customer billing and shipping address, and should be blocked for security reasons.
• Pages with duplicate content: If you have multiple pages on your website with identical or similar content, it’s a good idea to block the duplicate pages and make the original version stand out. 
• Pages with expired or low-quality content: If you have pages on your website that don’t offer much value to users, it’s best to block these pages. Such pages include: pages with outdated content, test pages, those under development, pages with expired special offers, media or PDF files, etc. 

If later you want to unblock the blocked URLs, you will need to update your robots.txt file, and resubmit it to Google Search Console.

3 Effective Ways to Add Trust Badges to Your Shopify Store

Remember how hard it was for you to trust a stranger on your first encounter? Quickly think about a relationship you have solid trust in and how long it took you to get to that trust level. Done? Now, follow me. 

That same feeling occurs to your existing and prospective consumers whenever they visit your Shopify store. Humans are naturally sceptical about where to place their trust especially when it comes to parting away with their hard-earned money. 

Hence, they need constant, honest and timely reassurance that trusting your business, product or service won’t become a thing of regret for them. And guess what? The trust badges are just the right fit for your Shopify business’s entrusting needs. 

In this article, you will be reading about four different and effective methods of adding these trust badges to your Shopify store. Sounds useful already? Read on.

What are Shopify trust badges?

Shopify Trust badges are symbols, icons or even logos specially made for display in a Shopify online store to demonstrate the business’s commitment to security and trustworthiness. These badges help boost your store’s sales by increasing the customers’ trust in the business. They signify that your store has specific features that boost buyer-seller trust and are authenticated by Shopify which is the hosting e-Commerce platform. 

Trust badges can be used to reassure your customers that their personal information and credit card information are safe when shopping at your Shopify store. It also shows that your store is taking steps to protect customer data. 

You can see this as McDonald’s endorsing a smaller hamburger business with tags and promotional badges. It would surely increase their trustability and perception on the side of the consumers. 

Hence, the Shopify trust badges work similarly. It helps generate more revenue through improved brand trust and loyalty in your customer base. They are usually placed on the product page, at the end of a checkout page or at the footer of the Shopify website page. 

Overall, displaying Shopify trust badges guarantees that your store can help customers feel more confident in completing a purchase and show that you take customer security seriously.

Types of trust badges and where to put them on Shopify? 

There are several types of trust badges you can add to your store on the Shopify platform, such as shipping, refund, return, promotions, taxes,  warranties. Although all of these trust badges serve different and specific purposes, they can still be used simultaneously on your shopping platform. You will read about the most popular and effective ones below. Follow thoroughly.

1. Money-Back Guarantee Trust Badge

This is one of the most effective types of trust badges for eCommerce stores including Shopify ones. It is usually time-bound for 15 days, 30 days, etc. This means that if the buyer doesn’t find the best use for the product, they can return it and get their money back, but the product must be in perfect condition and must be returned in time. This trust badge can be best placed on the checkout page.

Source: Landerblog.

The money-back guarantee trust badge enhances customers’ trust, reduces the risk of purchase and cart abandonment, and eliminates the fear of buying the wrong product for the customers. 

2. Free Shipping Trust Badge

Psychology proves that humans are naturally motivated to take action when an incentive or freebie is involved. Therefore, this trust badge milks the same psychology to generate more conversions for a store or business online. 

Source: Freepik

This trust badge can be added to the header of a website, the footer of a website or even the checkout page for great visibility.

3. Free Return Trust Badge

This trust badge uses a similar psychology to the ‘free shipping trust badge’. The simple act of giving freebies. The only difference is that this badge signifies that a customer can return any purchased product without additional cost for logistics whatsoever. It helps show that your store or business establishment believes in the quality of your product enough. 

Source: Freepik

In this case, displaying a ‘free return’ trust badge shows that the store is ready to take its product back from a customer at any discrepancy in its promised utility. It can be displayed on the footer and/or header of the website, or the checkout page. 

4. Payment Platforms Trust Badges

These types of trust badges are usually made to directly protect and improve your customers’ financial security status while buying online. The payment platform’s trust badge leverages trusted financial solution brands to boost your store’s trustability amongst its visitors and customers. 

Source: Mason

It includes using recognised brands like PayPal, Visa or Mastercard for its payment options. This way, the store can ride on the back of these payment platform giants, offer great payment security to its customers, boost sales and increase its brand trust in the market. This trust badge can be placed at the footer of your website or store page for improved effectiveness and visibility.

5. Awards Trust Badge

This trust badge showcases various awards and recognition certificates a business or store has in the form of a badge on the store shopping page. The award trust badge helps solidify the store’s relevance and evidence of great quality delivery in the market. 

Source: TrustPulse

Concurrently, it provides customers with more reasons to trust a business or store’s credibility. The footer part of a website is a great place to display this kind of trust badge too. 

6. Product Features Trust Badge

This trust badge highlights all the important and benefitting features of a product. For example, a footwear product made from sustainable materials can emphasise its features in a trust badge like 100% Sustainable, 100% Safe, Zero Emission; 100% Green Energy, 100% organic, etc. 

Source: Quickreply.ai

It supports the product offering promised during product marketing. This badge can be placed on the product page for aligned purposes and effectiveness. 

7. Partners Trust Badge

Partnership is another great form of promoting and boosting a business’s revenue reasonably. And this style of business promotion has been around since time immemorial. Leveraging your partnership with revered, successful and recognised third-party businesses can boost your credibility. 

Source: Delante

For example, Google can partner with Shopify and create a Google-verified eCommerce platform for Shopify. This would bring a lot of traction, increased trust and sales conversions for Shopify. It can be placed at the footers and headers of a website for great visibility. 

How do I add trust badges to Shopify? 

A Shopify store without trust badges is perceived to be less secure than stores that have. This can scare off your page visitors and customers which directly leads to you losing conversions and sales. Therefore, it is important for you to know how to add these badges on your store. 

Use third-party apps on Shopify

This is the easiest way. Many online Shopify apps provide a range of trust badges, and makes it a breeze to add them to your pages. 

Take the Trust.Me app for an example 

It is completely free, ranked No.1 in the trust badge section of the Shopify store. This app offers you 50+ free badge templates, and allows you to upload your own badges. 

It takes only one click to add your selected badge onto your desired pages. Here are the steps: 

1. Install Trust Me app on your store. Choose a badge type.
2. Start customizing the header, font, alignment, badge size, color, animation efforts and other details. Meanwhile, you can preview all the live changes.
3. Once finalized, click Save on the top right corner. 

Edit payment options in the footer on Shopify

Most Shopify stores support enabling payment icons in the footer, making them visible to your customers across all pages of your store website. Here are the steps:

1. Visit the Theme editor on your Shopify store.
2. Proceed to tapping the Footer button.
3. Then, check the Show payment icons on the new displayed page if it is meant for the payment platforms trust badges..
4. After adding your trust badge under this category, tap Save to effect your changes.

Note that this customisation works for all Shopify free themes. If you wish to add or delete your own payment badges (for brand consistency for example), it is better to edit your theme code.  

1. Log into your Shopify store account.
2. Proceed to the Online store segment of the page. 
3. Tap the Theme section under the Online store segment.
4. Under the new segment, tap the Actions button again. 
5. Afterwards, click on the Edit code button.
6. From this new page, tap the footer.liquid file option.
7. Use the find button to search for this code {% for type in shop.enabled_payment_types %}. 
8. Replace the code in step 7 with this {% assign enabled_payment_types = ‘visa,master,american_express,paypal’ | remove: ‘ ‘ | split: ‘,’ %} {% for type in enabled_payment_types %}.
9. After pasting the code in step 8, click on the Save button to effect your changes.

The above steps are specially made for desktop users. Go here to read more on how to edit your footer for iPhone and Android.

Create your own badges and add it via Shopify theme or coding

Designing your own trust badge image gives you the flexibility to display the exact information you want on it, compared to the rigid and fixed style on the available trust badges template. So, if you want to take control of the visual direction of your trust badge, you can also create them from scratch and add them to your store by yourself.

Add trust badges to product pages via coding 

Manually adding a trust badge to your product pages like adding a picture won’t be visually appealing. It’s best you add them via your theme liquid file. For this, you would first need to upload your new trust badge image. 

1. Visit your Settings page. 
2. Tap the Files button. 
3. And on the newly displayed page, choose Upload files. Upload your ready-made badge images. 
4. Copy the URL of your trust badge’s new image.
5. Proceed to the Online store segment of the page. 
6. Tap the Themes section under the Online store segment.
7. Click the Actions button on the top right side of the page.
8. Afterwards, click on the Edit code button.
9. From this new page, tap the Product page code option under Sections.
10. Search product-template.liquid and edit it.
11. From here, fill in the copied URL code of the new image you uploaded on the Settings page from step 4.
12. After pasting your chosen code, click on the Save button to effect your changes.

Add badges onto the cart page via Shopify theme 

66.5% of visitors to a website’s cart pages end up abandoning their chosen items. Surely you don’t want this for your store. Time to win your customer’s trust on your cart pages with certified trust badges. These two ways can help you do this easily. 

• Log into your Shopify store account for total access.
• Proceed to the Online store segment of the page. 
• Tap the Theme customisation section and find the Cart page.
• On this page, find the option to Select image.
• Afterwards, Upload your secured Shopify trust badge image. 

Then, you are good to go.

Add badges onto the cart page via coding  

If your theme doesn’t support adding badges onto the cart page, then try editing your liquid file. You must first upload your images to your store account settings page too. 

1. Visit your Settings page. 
2. Tap the Files button. 
3. And on the newly displayed page, choose Upload files. Select from your local drive and upload your readymade badge pictures. 
4. Copy the URL of your trust badge’s new image.
5. Then, proceed to the Online store segment of the page. 
6. Tap the Themes section under the Online store segment.
7. Under the Themes segment, tap the Actions button again. 
8. Afterwards, click on the Edit code button.
9. Go to your Cart page and find cart.liquid under the Templates segment. 
10. Or search cart-template.liquid under the Sections options to edit it..
11. From here, fill in the copied URL code of the new image you uploaded on the Settings page from step 4.

Then, you are all set.

Add badges on the checkout page via Shopify theme 

Most Shopify themes allow you to add badges directly on the checkout page. Therefore, no coding is needed. 

1. Visit your Settings page on your Shopify store account and choose the Checkout option on the left listed column. 
2. Tap the Customise checkout button. 
3. From here, go to the Checkout page. 
4. On the Checkout page, you will need to click the Select image under the Logo section.
5. And on the newly displayed page, choose the Upload button to add the document of your trust badge image.
6. After the upload, the added trust badge automatically displays at the top of the Checkout page.

FAQs about Trust Badges

• Do trust badges increase sales?

Yes, they do. A survey of online shoppers shows that 48% of the respondents get reassurance from trust badges they see on store pages. And this directly influences their purchasing decisions positively. Therefore, trust badges do increase conversions for businesses and e-commerce stores.

• Is it a must to place trust badges on places like website footers and headers, checkout pages, product pages, etc? 

It is not compulsory, but it is important to place them in these places if a store truly wants increased sales. Why? It is simply because these places are the hotspots for buying page visitors. Therefore, they have higher visibility for the right audience for a store. And they directly contribute to the conversion rates of a store.

• What are the best free trust badge apps to use for a Shopify store?

Simply search “trust badges” in the Shopify app store, and you will get a list of trust badges apps available for Shopify stores. The top ones include Trust Me, Avada, Trust Badges Bear. 

Wrapping up 

Regardless of the numerous types of trust badges highlighted above, it is not compulsory to use them all. Remember, the result of trust badge addition to your store shopping page is increased customer trust. Hence, if it is just one or two trust badges that are relevant and available on your products and store, stick with just these. 

Also, you can always shuffle and monitor the performances between these types of badges in usage to discover the best fit for your Shopify store. Just do not forget that you only want to make more sales, but not lie or promise what your business can’t deliver to your store page visitors and customers.

How to integrate with Shopify Flow?

This integration allows users to customize workflows based on the SEOAnt Broken Link Redirect app. 

Note: Shopify Flow is only available to merchants on the Shopify, Advanced, or Shopify Plus plan.

Here are the steps: 

Note: We recommend free users to integrate the SEOAnt Broken Link Redirect app with Shopify Flow. Pro and Premium users can go straight to Broken link settings, and enable Auto fix broken links to deal with any broken links.

Step 1

Go to Shopify Flow admin > Create workflow 

As an example, users can automate the workflow of redirecting any broken link (once detected) into an active URL.

Step 2

Click Select a trigger to start mapping your workflow → locate the SEOAnt section → click Broken Link Detected

Step 3

Click Condition. 

Click Add criteria and Click path

Then, set conditions as Path is not empty and exists.

Step 4

Click Action. Fill in the details on the right side. 

Enter the Path and Target URLs.

Step 5
Click Turn on workflow. 

Once a broken link is detected by SEOAnt, a redirect will be automatically implemented in accordance with the pre-defined workflow. 

How to Set up URL Redirects for Shopify Stores: Tips and Best Practices

Have you ever clicked on a link only to be taken to a page that no longer exists? It can be frustrating, right? Well, that’s where URL redirects come in. Apart from that, from time to time, you may need to perform URL redirects for various purposes, in order to optimize the visitor experience and store performance. 

In this article, we’re going to talk about how to handle URL redirects for your Shopify store, which can greatly improve your customer experience and conversions. Let’s dive in!

What is a URL redirect on Shopify? 

A URL redirect is a technique to send users and search engines to a different URL than the one they originally requested. This is useful when you’ve changed your store’s URL, want to redirect traffic from an old product to a newer one, or simply want to fix the broken links on your webpages. 

URL redirects ensure that search engines can still find the right page and index it correctly, while helping maintain the link equity and search visibility. 

URL redirects can also significantly minimize your prospects’ frustration and confusion. Even when they have clicked on a broken link or an outdated URL, the redirect can always ensure that they are being sent to the correct page.  

Types of URL Redirects

301 and 302 redirects are common types of URL redirects, also called temporary and permanent redirects, respectively. It is important to use the correct type of redirect to ensure search engines and buyers are directed properly. 

• Permanent URL Redirect (301): This type of redirect tells search engines that a page has been moved to a new location forever and all link equity should be passed to the new URL. This preserves your rankings and is the best way to ensure buyers and search engines are directed to your new Shopify page. 
• Temporary URL Redirect (302): This is used when you only want to temporarily redirect a web page, for example, when testing a new page or during a seasonal promotion. Since search engines may treat a 302 redirect as a temporary solution, it does not pass along link equity to the new URL. 

For now, the only type of redirect currently allowed on Shopify are Permanent (301) redirects. 

Ready to put your redirect knowledge into practice? Let’s dive into the process of creating URL redirects on Shopify. 

How to create URL redirects on Shopify?

There are mainly two simple ways to help you create URL redirects. One is via the Shopify admin, and the other is via a professional redirect app. 

Via Shopify 

You can create an individual redirect or mass redirects via your Shopify admin. 

Create URL redirects manually 

1. Go to Online Store > Navigation. Select View URL Redirects. Sometimes this option is hidden in a (…) menu. 
2. Click Create URL redirect. 
3. Fill in the Redirect from and Redirect to fields. 
4. Click Save redirect.

Create URL redirects in bulk 

1. Download the Shopify redirects sample file. Be sure to follow the format present in the file to accurately list all of the URLs you want to redirect. 
2. Get back to Online Store > Navigation > View URL redirects. Click Import at the URL Redirects. Click Upload File.
3. Click Import redirects. And then hit the button Close.

Via a professional redirect app

You can utilize the top-rated redirect apps like Broken Link Redirect on Shopify to help you redirect URLs effortlessly. 

Here is what it can do for you:

• Auto-scan all broken links on your store. 
• Regular email updates about the broken links.
• Live redirect suggestions 
• Track views of your 404 error pages. 
• Automate bulk URL redirects
• Support manual creation of URL redirects

How to Manage Redirects in Shopify?

Mismanaged redirects can result in broken links, lost rankings, and frustrated customers, negatively impacting your online presence and revenue. Below is how to effectively manage your Shopify redirects to ensure a smooth and successful online experience:

Edit Redirects

To edit URL redirects on Shopify, follow these steps:

1. Log in to your Shopify store and go to the “Online Store” section in the left-hand menu.
2. Click on the “Navigation” tab.
3. Click on the “URL Redirects” option.
4. Click on the URL that you want to edit.
5. Make the necessary changes to the “From” and “To” fields.
6. Click on the “Save redirect” button to save your changes.

The ‘From’ URL is the old URL you want to redirect, and the ‘To’ URL is the new URL you want the old one to redirect to.

Delete Redirects

To delete a URL redirect on Shopify, follow these steps:

1. Log in to your Shopify store and go to the “Online Store” section in the left-hand menu.
2. Click on the “Navigation” tab.
3. Click on the “URL Redirects” option.
4. Click on the redirect that you want to delete.
5. Click on the “Delete” button at the bottom of the page.
6. Confirm that you want to delete the redirect by clicking “Delete redirect” in the pop-up window.

Export your URL Redirects

Exporting your URL redirects allows you to save a copy of your redirects to your computer or to use them in another program. The exported CSV file will contain each redirect’s “From” and “To” URLs. It will also have the date that the redirect was created.

To export your URL redirects in Shopify, follow these steps:

1. Log in to your Shopify store and go to the “Online Store” section in the left-hand menu.
2. Click on the “Navigation” tab.
3. Click on the “URL Redirects” option.
4. Click on the “Export” button at the top right corner of the page.
5. In the pop-up window, select the redirects you want to include in the export. You can choose to export all redirects or only specific redirects.
6. Click on the “Export” button to download the CSV file containing your URL redirects.

There’s more to be understood about these operations. For example, you can import, filter your URL redirects. To find out all that and more, head to the Shopify Help Center.

When Should you do a URL Redirect on your Shopify Store?

There are several instances when you might want to redirect a URL. Here are some:

1. Preserve traffic and customers after changing your website’s domain name by using a URL redirect. This will redirect visitors and search engines to the new domain.
2. Combine multiple pages with similar products by using a URL redirect. This will help prevent duplicate content issues.
3. When you want to test new designs before making permanent changes, you could temporarily redirect visitors to a different page while you work on updates.
4. If you’ve changed the location of a page or removed it, redirect visitors and search engines to a related product page instead of a 404 error page.
5. Consolidate multiple domains into one by using URL redirects to streamline your website and improve user experience.
6. Enhance your website’s user experience by using URL redirects to redirect visitors to the most relevant pages.、

How to Detect Broken Links?

In all honesty, a link could be broken for weeks, and no one would know. Worse, this can harm your user experience and your store’s reputation. Thankfully, by regularly carrying out the steps discussed below, you can finally put this issue behind you.

1. Use Google Search Console: It will notify you of any broken links on your store that Google bots have discovered while crawling your website.
2. Use a broken link checker: Many online tools can scan your store and report any broken links, such as Broken Link 404/301 Redirect.
3. Check your store’s 404 error page analytics: If visitors try to access a broken link on your store, they will be directed to your 404 error page. You can check it in your Shopify store’s admin panel. Go to Analytics > Reports >Visitor > Page Not Found (404) report. This report will show how many people have been directed to your error 404 page. It will also show the URLs they were trying to access when they met the error. 
4. Use a crawler tool: If you don’t want to rely on Google’s crawlers, you can use other crawler tools. Tools like Screaming Frog can scan your entire store and report any broken links that it finds. This will be a more thorough approach, but it may take longer to complete.

Overall, regularly checking for broken links and fixing them with URL redirects can help improve the user experience on your store. This also prevents visitors from encountering errors.

Why is my Shopify URL Redirect not Working?

If your Shopify URL redirect is not working, it can lead to confusion and frustration for customers trying to navigate your site, resulting in lost sales and a damaged reputation. Don’t let such technical glitches ruin your online presence. Let’s uncover why:

1. Incorrect URLs: If you incorrectly enter the source and target URLs for the redirect, your Shopify redirect will obviously fail. 
2. Disabled Redirect: Check the status of the redirect. If the redirect is disabled, it will not work.
3. Wrong Triggers: In Shopify, a redirect action set/URL redirect trigger is a specific action or event that triggers a URL redirect. Make sure the redirect is being triggered by the correct events. For example, you could set up a redirect to occur only when a customer adds a product to their cart. 

In this case, don’t expect a redirect to be triggered by any other events. You can manage your redirects in the “Online Store > Navigation” section of your Shopify admin.

4. Wrong Configuration of 3rd-Party Apps: If you use a third-party app to manage your redirects, ensure that the app is properly configured and working correctly. 
5. Browser Cache: If it’s been a while since you cleared your cache, this can affect your URL redirects. Clear your browser cache and try the redirect again. 

If you have checked all of these things and the redirect is still not working, don’t fret. Simply reach out to Shopify support for further assistance. 

Common Redirect Errors You Should Avoid on Your Shopify Store

Having proper redirects on your Shopify store is important, but sometimes things can go wrong. Understanding the common redirect errors discussed below can help you avoid potential issues like users being unable to access your content and keep your store running smoothly.

1. The redirect chain is too long: This means there are too many redirects in a chain. A visitor is being redirected from page A to B, then to C, and so on. This can slow down your store and make it difficult for search engines to crawl.
2. Redirect loop: This error occurs when a visitor is continuously being redirected back and forth among multiple pages. 
3. The redirect URL has exceeded the max URL length of 2048 characters: If a URL exceeds the maximum allowed length for a URL, it can cause the redirect to fail, and the visitor will see an error message.
4. The redirect target URL is invalid or non-existent: The redirect target URL is either invalid (e.g. not a proper URL format) or does not exist on the server. This can cause errors when attempting to access the page.
5. The redirect is not implemented correctly, causing issues with the browser: The redirect has been set up incorrectly. This could happen when there is a mistake in the redirect code, such as incorrect syntax or incorrect use of variables. This could cause issues with the browser such as difficulty loading the page or errors.
6. The redirect URL is not a secure URL: This error occurs when the URL of the redirect destination is not using a secure connection (does not start with “https://”).

Some of these errors seem technical and hard to crack. Unfortunately, they really are. But the good news is there is an app that can help you out with such severe issues. Download Broken Link Redirect app from the Shopify store and it will get rid of your URL redirect errors in no time. 

How do Redirects Affect Your Shopify SEO?

URL redirects offer a range of benefits for managing the flow of traffic. However, if not implemented correctly, redirects can also have a negative impact on your store’s SEO. In this section, we will examine both the pros and cons, and highlight some of the common pitfalls to avoid:

Pros

1. Redirects help provide a smooth experience for users by directing them to the right page. This optimization reduces bounce rates, which could improve a store’s rankings, as it demonstrates to search engines that users are engaging with it and finding the information they need. Additionally, by eliminating broken links, redirects also help maintain the credibility and trust of a store.
2. Redirects can retain the page rank of important pages by passing on link equity to the redirected pages. This can help to boost the overall visibility and ranking of your site in search engine results.. 
3. By using redirects, you can combine pages with the same information. This helps to avoid penalization from search engines for duplicate content issues.
4. Redirects work by sending an HTTP status code to the browser, which then fetches the new URL specified in the redirect. This process happens seamlessly and quickly, not making the user have to wait for long for the page to load.  

Cons

However, redirects can also have a negative impact on your SEO if not done properly. For example, if you use too many redirects, it can slow down your site. Each time a user visits your website, the browser will have to make multiple requests to different servers to follow the redirects, increasing the time it takes for the page to load. This could eventually draw down your search rankings. 

Also, if you use incorrect redirects, such as redirecting to a non-existent page, it can confuse search engines and also hurt your SEO.

Other Shopify URL Redirects you must know

1. Redirecting from HTTP to HTTPS: Redirecting from unsecure HTTP protocol to the secure HTTPS protocol will protect your customers’ information like their credit card details. Also, Google considers HTTPS as a positive ranking factor, and websites that use HTTPS may probably receive a small ranking boost in search engine results. 
2. Redirecting from non-www to www: Search engines like Google treat www and non-www versions of a website as two separate entities. This means that if your website is accessible through both versions, it can split your backlink equity and harm your rankings. To prevent this, choose one main version and redirect the other to it. 

How to connect SEOAnt to Google Search Console

Google Search Console provides website owners and digital marketers with valuable data and insights on their website’s performance in Google search results. It helps identify technical issues, facilitates website indexing, improves website content, and provides security alerts. 

Navigate to Google Search Console and select the Connect to Google Search Console button.

Select the Google account that is linked to your Shopify store in Google Search Console. If you have not yet connected your store website to Google Search Console, please follow the steps below to do so.

 Connect your Shopify store to Google Search Console

Access your Google Search Console account, log in, and proceed to add a new property.

Input your Shopify store’s domain and then click CONTINUE.

Click START VERIFICATION

Here’s an example for Cloudflare: Log into your Cloudflare account, and it will automatically add a DNS record.

After a few seconds, the verification will be successful.

Connect SEOAnt to Google Search Console

Next, navigate back to Google Search Console and click on the Connect to Google Search Console button.

Select the Google Search Console account that has verified your Shopify website.

Click Continue. 

Congratulations, you have successfully connected to Google Search Console.

SHARE

Most RecentGuidance of adding Missing FaviconHow to connect SEOAnt to Google Search ConsoleHow to integrate with Shopify Flow?

Give me the latest news

Learn more about SEO Marketing and SEO Techniques

How to Compress Images on Shopify Efficiently?

Is your Shopify website taking longer to load than expected? Are you receiving error alerts while uploading large image files on your Shopify store? 

Either case, it means you need to consider compressing your website images. Because images with large file sizes take up a great percentage of your store weight and can consume your site loading time like crazy.

Besides, the cherry on top, Shopify doesn’t let you upload images larger than 20 MB. 

With clunky images, your website’s SEO would likely “de-rank” and create a negative user experience. 

If you don’t want your website to end up like this, read further and find out how you can compress images on Shopify efficiently.  

What is Image Compression?

It won’t be wrong to say that image compression plays a crucial role in your Shopify store performance. 

In short, image compression is a process to make your image byte size smaller than its original state.  It also includes converting the image file into another format. 

Depending on the compression algorithms, it can either compress your Shopify images by reducing the number of colors in them, or strip away any unnecessary metadata from them. Or it can merge similar patterned data of your images and convert them into smaller file sizes. Your image quality may or may not be degraded. 

The purpose of image compression is to serve minimized image file sizes while storing the image data in a qualified form. It decreases the redundancy of the image and shrinks the number of bits needed to represent that image. By compressing images you can easily save its storage space and utilize less bandwidth when it’s being loaded, transmitted or downloaded.  

Types of Image Compression Techniques 

Image compression falls into two categories, namely lossy compression and lossless compression. Both compression types serve the same purpose, which is reducing the image file sizes, yet differ in some ways. 

However, that doesn’t make any of them less useful.

Lossy Compression

Lossy compression compresses your image file sizes by discarding any unnecessary information from your images. This leads to reducing file sizes. However, you get to lose some image quality with this type of image compression.

Pros: Images compressed through lossy compression have much smaller file sizes than lossless compression. 

Cons: Lossy compression is irreversible. You can not retrieve your Image data after performing lossy compression. Overdoing lossy compression can distort your Shopify image completely. 

Formats: JPEG, GIF

Lossless Compression

Lossless compression is a type of image compression that reduces the image file size without removing any image data. 

It compresses the image file sizes while ensuring that the quality of the images is maintained. 

Pros: Since lossless compression doesn’t remove any of the image data, the quality of your images and image details are not compromised. Also, The changes made in lossless compression are reversible. 

Cons: Although lossless compression can compress images in the highest quality possible, it doesn’t provide reduced file sizes as lossy compression does.

Lossless compression doesn’t save that much storage space as lossy compression does.

Formats: PNG, BMP,  RAW

How Does Image Compression Work on Shopify?

In order to keep websites loading fast, Shopify algorithms auto-compress your images and reduce their file size. Moreover, Shopify automatically detects the best possible format to deliver the images. 

However, the auto-compression feature of Shopify can decrease your image quality and resolution, resulting in the appearance of blurry and fuzzy images.

You can save your time by using a professional Shopify SEO and image optimization tool like SEOAnt. 

How to Compress Images on Shopify Efficiently?

SEOAnt is the perfect app to help you compress your images, whether manually or automatically. It works best with any Shopify theme and is simple to operate. It facilitates faster website speed by bulk-compressing your images in one go. 

SEOAnt allows you to compress your image sizes by 50% to 80%. It gives you a lot of flexibility too. You can choose between lossy compression and lossless compression, and even customise the compression rate! 

• Bulk-compress with the SEOAnt App Automatically 
• Manually upload and compress images 
• Convert PNGs to JPGs in batch 

Here is how to do it:

1. Install SEOAnt’s SEO&Image Optimizer. 
2. Go to the dashboard, and choose Image Optimization.
3. On the right, choose the Settings icon beside Account Overview. Switch on the Optimize Images button. Choose the compression mode and images you want to compress. Save the changes. 

Why Do You Need to Compress Images on Your Shopify Store? 

Uncompressed images take a considerable amount of time to load, leaving your client frustrated. This will collapse your product’s sales, and nobody wants that. 

Here are various reasons why compressed images can enhance your Shopify store game.

• Fast Page Load Times: Compressed images help decrease your image file sizes, and reduces pressure on your servers, making the loading of images on your website quicker.

A fast-loading website provides a better user experience, leading to improved engagement and potentially higher conversion rates.

• Enhanced SEO: Google search considers site speed as a ranking factor. By making your site load faster, reduced image sizes lowers your site bounce rate, and takes off your conversion rates. Google and other search engines are more likely to start giving you good rankings and favorable placement. 
• Finer Mobile Experience: Today over half of the e-commerce sales are done on cell phones. Your Shopify store must be speed-optimized for mobiles. Otherwise oversized images on your Shopify website will lag your store and you lose essential opportunities to thrive. 
• Reduce Bandwidth: Small image size can shrink the amount of bandwidth used by your store, resulting in speedy content delivery and overall scalability of your website. 

This was all about compressing your Shopify images. But if you thought that compressing your Shopify images was enough for your store’s optimization.

You’re wrong!

There are other factors that you should also look after for your Shopify store’s growth. 

Other Image Optimization Tips for Growing Your Shopify Store 

Want to ace your image-compressing game? Below are some fantastic tips that’ll instantly level up your usage of Shopify images for stronger growth.

•  Resize Image: Overstretched images on your Shopify website might appear blurry or overstretched. This doesn’t look visually appealing to your potential customers. Resizing them to an appropriate size builds up consistency and customer trust. 
• Add image Alt Text: Your website should be user-friendly to even those who are unable to view images on the store. It’s best practice to add Alt text for visitors using a screen reader or with a slow internet connection. It helps Google index your pictures faster, too, and drives in image traffic. 
• Lazy Loading: This useful tip evolves around page loading speed. eCommerce owners apply this approach to get a hold of customer interaction in their stores. Instead of loading all images at once, lazy loading only loads images clearly on the site when readers have scrolled down to them. 
• Utilize WebP Format: WebP is the modern file format that can compress up to 34% more image file sizes than JPG file format and 26% more than PNG file format. 

Shopify only supports JPEG, PNG and GIFfile formats. But it can automatically upload images in WebP format if the browser supports it. 

Compressing your Shopify images can be tricky if you have only a little know-how about its technicalities. But, With this guide, you can learn how easily.

If you don’t want to take the hassle, simply use the SEOAnt Shopify app and leave the rest to it!

FAQs

• Is JPG or PNG better for Shopify? 

Both are good for Shopify, depending on your use cases. 

Jpg is of smaller sizes and can be loaded fast. You should use a JPG image format where image size matters for you rather than the image quality, like the product and collection pages. On the other hand, PNG images provide you with images that are of much larger space but higher in quality, like your store logo. 

• What is the best image format for quality?

The PNG image format is the best in terms of image quality. It provides images that are clear, crisp, and higher in quality. However, the disadvantage of using PNG format is its relatively larger file sizes. 

• Does image compression reduce quality?

Lossy compression can reduce the quality of your image. If it is overdone, it can completely distort the original image. Lossless compression doesn’t affect your quality. 

• How to compress images without losing quality on Shopify? 

You can use the SEOAnt Shopify app for this purpose. It also supports lossless compression which compresses your images without any quality loss. All it takes is a few seconds, and that’s it.

• Which image format is most compressed?

The JPG image format is the most compressed. Shopify also recommends it for compressing product images, blog posts, and pages on your Shopify store. 

• What pictures need to be manually compressed on Shopify?

Images present in the Customize Theme section and the Files section of settings should be manually compressed, as well as images located inside your blog posts and pages. 

• How to get around Shopify’s automatic image compression?  

There isn’t a turn-off option available on Shopify to stop your images from being automatically compressed. However, you can get around it with a few tips. Here they are: 

1. Make sure to compress your images before you upload them to your Shopify store. Only this way can you stop Shopify from automatically compressing your images. 
2. Shopify recommends the jpg format for uploading product images. While the png format is best for images with transparent backgrounds.  Make sure to upload your images in the following formats beforehand. 
3. For product photos, 72 pixels per inch (PPI) is the best resolution. While 300 PPI is best for uploading graphics. Make sure to upload images as per this resolution. 

• What type of compression is best for images?  

Both types of image compression are good. They both have their own significance. 

Lossy compression is best for images with complex color details. In Shopify, it’s most suitable for products, banners or slideshows, pages, and blog post images. 

Whereas lossless compression is best for compressing images with solid colours. Shopify recommends lossless compression for logos, icons, borders, and trims.