5 Growth Hacking Tips with Simple Automations in WordPress

growth hacking tips featured

In today’s era of online commerce, marketing jobs have increased like never before. This means that finding new tricks to gain customers is practically an art form and those who are not searching for new opportunities or not following best practices of online marketing and growth hacking may fall out of the running.

In this article, we will talk about several tactics for customer acquisition. More specifically, we will discuss 5 growth hacking tips with simple automations in WordPress.

Incentivized lead-generation

Something that motivates someone to take action can be defined as an incentive. In e-commerce marketing, the term intensive lead-generation is normally used. Intensive lead generation typically involves an attractive element, similar to a bonus, that stimulates a desired action, known as a sale trigger. 

Incentives or lead magnets can take several forms. Let’s discuss some examples:

  • Ebooks – It’s likely that you are already running a blog on your website, but publishing blog posts and publishing an ebook are completely different matters. Creating and promoting an ebook is one of the cheapest and most popular methods for generating leads online, and will definitely work if done intelligently. 
  • Webinars – Webinars are valuable content for any website or project, but it’s important to deliver exclusive information in a personal format. Peer to peer meeting is more powerful than any other method of communicating with your audience. Best practice may also involve inviting influencers to these events, as they will definitely improve the quality of your content.
  • Coupons – Who doesn’t love sales coupons? Coupons can change a customer’s mind, especially if they can’t decide whether or not to buy from your store. Offering them a good discount is the first step to securing a long-term relationship with your customer. 
  • Newsletter – Another great way to generate leads is to create a value-packed newsletter campaign that encourages new customers to connect with you. This method will not only allow you to stay in your customers’ minds but will also let you share promotions, coupons or other incentive campaigns with them. 

Apart from the methods mentioned above, you can use others as well. Some examples include , providing a freebie product or free trial, organizing a referral and reward system and many others!

Smart email automation

Email automation is not a new concept. It’s been around for quite some time, helping businesses reach audiences using the most advanced methods. Ultimately, it helps brands stay on customers’ radar longer, so more and more brands nowadays spend some of their budget on creating personalized and automated email campaigns.

Email automation is a growth hacking method in which you automatically manage all emails from different sources, like subscription lists, SMS, EMail, Viber, Web Push, etc. If this process is done properly, automation can increase your marketing performance and can free up a significant amount of time.

How does email automation work? Let’s say you want to send a company introduction message to new subscribers. Then, after a week, if they have not purchased anything from your store, you want to send them a discount coupon of 10%. If they still have not purchased something after another week, you want to send them a 15% discount. When they finally make a purchase, you want to send them a personalized thank-you message and a bonus discount for related products. 

How can you achieve this? Clearly it’s not possible to do this by manually tracking user behavior. Instead, you can set up a series of automated emails that can be triggered by different actions from users. You may divide your users into different segments and set up IF…ELSE logic to send them automated emails without any intervention on your part. Once you set up this system, it will run 24/7.

The tool you are using to run this system is crucial, because without this you can’t achieve your goal. It can be difficult to find the right all-in-one solution, but Growmatik is an excellent universal tool for smart email automation.

A/B testing

A/B testing, also known as split testing, is a user experience research methodology used when we want to know which page (or post type) is better and why. In general, retailers use their product page to sell products. These pages provide all the essential information that customers need: product images, descriptions, details, price, delivery information and more. There’s no doubt that all of this information is necessary and no one can shop without it. Sometimes, before making big changes to your site by adding a new design or removing some information, it’s a good idea to test these new features by running A/B testing to reveal how users interact with new changes.

Basically, this process involves a randomized experiment where two or more variants of the page (posts, product page, etc.) are provided for different segments of audience. The purpose of the experiment is to determine which version has the biggest impact in terms of sales or impressions.

A/B testing is generally performed to test special missions or campaigns. Let’s say you want to test new product images along with a video of one particular product, but you can’t directly make changes to your actual product page. Instead, you can create a separate product page with a new design and new data and randomly send visitors to that page.

Collecting information from your A/B tests is important. Your testing should reveal the advantages or disadvantages of your experiment, and based on this data you can decide whether or not to make the changes.

Using the right tool for A/B testing is also important, so if you don’t have one already you should consider Google optimize and Optimizely.

Affiliate program

growth hacking tips - affiliate program

Affiliate marketing is a business procedure where a person earns commission by marketing another person’s or company’s product or service. Affiliate people choose the product they enjoy and then promote that product or service to earn a portion of the profit from each sale. Sales are tracked via an affiliate link.

There are 3 key parts in the relationship between companies and affiliate marketers, so lets review them one by one:

Seller and product

The seller, brand, merchant, company or person who owns the product. Product can be a physical product, like household items, or a service, like programming tutorials. Sellers do not always participate in the active marketing campaign, but they may run a very active affiliate program.

The affiliate or advertiser

Known as a publisher, this can be an individual person or influencer or a company that markets affiliate products. The affiliate receives commissions when their marketing leads to sales. 

The consumer

Often, when you buy some product on the web, you may not realise that you are participating in an affiliate marketing program. When you do, both the seller and affiliate share the profits. The consumer is probably the most important part of this relationship, and without them this system will not work. 

Affiliate marketing is a great deal for all parties involved. For the seller, this is another stable channel for sales that doesn’t involve spending much time on marketing the product. It’s great for the affiliate as well, as they don’t produce a product but they are still earning money through sales. 

Now, you may ask, how does an affiliate get paid after linking the seller to the consumer? Well, there are several methods to do this. The most popular methods are:

Pay Per Sale 
Pay per Lead 
Pay Per Click
… 

It’s worth mentioning that, nowadays, social media influencers are major drivers of affiliate marketing. They have already carved out a saturated niche in the field and affiliate marketing works great with them.

There are many great tools to manage affiliate marketing programs for your WordPress, ranging from free to paid plugins. Some great choices include, WP Affiliate Manager (Free) and AffiliateWP (Paid).

Loyalty programs

growth hacking tips - loyalty programs

Loyal customers who buy repeatedly are more profitable than ones that buy once.

Costco’s business

This simple rule applies not only to Costco but to any business. You can easily turn your existing customers into loyal customers by offering high quality products and services as well as speedy delivery and customer support.

Customer loyalty programs were first introduced back in the 1950s, when grocery stores started giving out stamps to customers making repeat purchases. Customer loyalty refers to a customer’s willingness to buy from a brand again and again because of positive experiences and satisfaction. 

This kind of program offers several benefits to customers, such as discounts and rebates, rewards, free delivery, coupons, early access to new products and more.

Loyal customers are the most profitable segment of your business. This factor gives you the opportunity to align your business with this segment. You may choose to run a completely different marketing campaign for them, which may prove to be the most profitable compared to the other campaigns you run. Another challenge for any business is to extend the lifetime of loyal customers to be as long as possible.

Formulating new ideas about how to reward your customers or how to run a loyalty program is part of the job, but realizing these ideas and keeping this campaign running is another job. The right tool is necessary so choose one that will let you design it once and, once you start it, it should run fully automated without any interruption. When choosing a tool to run marketing automation for WordPress, consider if it offers features to run a loyalty program for WooCommerce. We recommend trying Growmatik, which offers universal methods to run such campaigns in a fully automated way.

Wrapping up

Incentivized lead-generation, email automation and affiliate programs are not new techniques in ecommerce marketing. However, they are still the most effective growth hacking tips for attracting new customers and keeping existing ones. Don’t forget that your promotion and strategy will be most effective if they are tailored to your audience’s expectations. Your success also depends on the tool you choose to run your email marketing campaigns. We highly recommend trying out Growmatik as an all-in-one solution for email marketing and automation.

Do you have any more growth hacking tips to share? Let’s talk about them in the comments below!

How to Leverage Personalization to Scale a WooCommerce Website

personalization to scale a WooCommerce website featured

In marketing, it’s easy to forget that each of your customers is a unique individual. Each and every one has their own personal background and preferences, and these factors will affect their behavior in your online store. They also lead to different needs, expectations and demands. Studies show that 81% of customers expect brands to approach them at the right time and cater to their wants and needs. How can we show our customers that we respect the differences that make them unique? By preparing personalized content and creating tailored solutions that speak just to them!

When you receive something you like or need, it probably brightens your mood! That’s why personalization is such an important tool for improving customer retention on a WooCommerce site. Many brands believe in the power of personalization to cut through the flurry of generic advertising materials that customers are bombarded with on the daily. In this article, we’ll walk you through how to leverage personalization to scale a WooCommerce website. 

What is Personalization?

Personalization involves what your site looks like and what features are presented there. Personalization provides online visitors with the content they are looking for according to their preferences and previous activity on your website. This could be previous purchases, their geographic location, specific search criteria and more.The better you personalize your website, the better you can serve your customers and hence increase their engagement rate, conversion rate and lifetime value. When you show your online visitors that you care about their interests and provide them with relevant content, they will not leave your site quickly, but will stay longer and may be convinced to make a purchase.

Ways to Personalize a WooCommerce Website

There are different ways to use personalization to scale a WooCommerce website. The main 5 practices are:

  • Personalized landing pages 
  • Personalized pop ups
  • Personalized products
  • Personalized coupons
  • Personalized emails

Personalize your Landing Pages

One of the most important ways to create website personalization for WooCommerce is through landing pages. Landing pages are one of the touchpoints your customers interact with throughout their lifetime. They probably see it multiple times at different stages of their journey, so their landing page experience should evolve accordingly along that journey. The following are a few criteria on how to personalize landing pages.

Show a geolocal landing page

Geotargeting means personalizing landing pages dynamically based on the visitor’s location. It’s possible to personalize a landing page specifically for the country or region you are marketing to. One way to do this is by redirecting customers visiting from a certain region to an independent domain or website, such as using a “.fr” URL if you are targeting the French market. You can also always add other personalized content to your landing page to make it even more effective.

For mobile users, geotargeting is another useful strategy. Tools like WeGlot and Translate Press are simple solutions for translating your page’s content. You may need to make some changes to the design of the page as well, such as shifting the text to a right-to-left layout if your page is being translated into Arabic.

In Growmatik, the Show Page action lets you redirect users visiting from a certain location to a translated version of your homepage. The Personalize Page action also helps you localize specific elements of your page, from layout to dynamic keywords.

Read more about geotargeting in the article:
How to Use Location to Personalize Your WordPress Website

Personalize your greeting

You likely have different kinds of customers: some are just browsing your site while others are looking to make a purchase. It’s useful to create a welcome message to returning visitors. A simple “Welcome back, John!” will make your customer feel more comfortable. Using Growmatik webpage personalizer tool you can create:

  • A hero section message with their name
  • A personalized greeting based on time of day (“Good morning” or “Good evening”)
  • A message with personalized product suggestions to help them find what they are looking for. This is typically based on UTM values or their location. To give an example, you might choose to display ‘Buy the best doughnuts in the UK’ to a visitor with UTM=doughnuts or ‘The best real estate investment opportunities in Dublin’ to a visitor located in Dublin.

Growmatik’s Personalize action will help you automate hero personalization using dynamic keywords such as time of the day, referral source or visitor’s location.

Create personalized popups and call-to-actions commemorating holidays

Let’s say there’s an important date coming up for your customer. It might be their birthday, the anniversary of their subscription to your site, or a relevant holiday such as Christmas or Halloween. What better way to commemorate it on your site by showing them an exclusive call-to-action or popup? Make sure to include all the relevant design considerations, a coupon for limited-time savings and, of course, your customer’s name!

In Growmatik, combine the Date condition with the Show Popup action to automate personalized pop ups to celebrate key dates with your customers.

Personalize your hero based on purchase or site visit history

When customers visit your site, it’s likely they’re looking for something specific. Fortunately, you can use their recent purchases or site activity to better customize your homepage for them.

In Growmatik, combine the Page Visit or User Behavior > Purchased Condition with the Personalize action to customize your homepage based on customer activity.

To get more information about landing pages personalization, read the following article:
How to Personalize Landing Pages in WordPress.

Personalize your Pop Ups

On most sites, all visitors are treated identically. However, you can show personalized pop-ups only to certain groups of people. This means you can write messages to specific types of visitors, make offers, and create a specific Call To Action button. If you treat your visitors as individuals, you’ll increase the chance they will come back to your site.

To learn more about creating personalized pop ups, read our article on:
How to Create Effective Popups in WordPress

Personalize your Product lists

Many themes, including Jupiter X, generate product lists through a Woocommerce plugin, but they don’t have many options for product personalization. A 3rd-party plugin is required if you want to add features such as date pickers or checkboxes.
One plugin that helps you to personalize products is Flexible Product Fields.

The plugin settings can be found under Products > Product Fields.

Here are the features you get after installing the plugin:

  • The ability to add extra product options on the product page such as single line text, paragraph text, checkbox, radio button, etc.
personalization to scale a WooCommerce website
personalization to scale a WooCommerce website

Here you can find a full description of the plugin.

If a visitor is looking for a specific product, you can recommend other similar items depending on the products they’ve viewed. Such recommendations will increase the order bump and lifetime value of a customer, as well as the chances that a visitor will buy something on your site. Suggest familiar products and a customer will have more options to choose from. In Growmatik, you can include personalized upselling, cross-selling and discounted items on web pages using the Growmatik personalizer tool.

Once your site is connected to Growmatik, you can create personalization for your product using single pages or custom product pages.

Click on the “Create Personalization” button and select a page you’d like to personalize. You can add some new blocks by clicking on the plus icon, as well as deleting some sections or editing existing ones.

personalization to scale a WooCommerce website

Once you’ve edited the page, click on the “Save & Exit” button. After that, you’ll need to create an automation rule when you want to show your custom product page. You can create a rule for guests who are new visitors to your site, leads who are registered on your site, and customers who have made purchases on your site before.

Click on the plus icon and select the “Custom Rule” option:

Set a condition when you want to show a personalized page. For example, you can show it for all guests; for guests from a specific country; for guests who visit a specific page, etc.

personalization to scale a WooCommerce website

Once you set a condition, then set an action – you can select your personalized product page. 

Apart from creating personalized pages, you can also use other actions:

  • Show Popup
  • Send Email
  • Personalize
  • Show Page

Select the action you need.

Personalize your coupons

Creating a coupon section presents a number of advantages: it helps to promote affiliate offers, draw in new visitors and convince previous customers to make repeat visits to your site. Plus, it can help you gather some useful information. Customers will leave their names and addresses, helping you identify what type of customers and which geographical regions make up the most sales for a particular product.

To create a coupon, you can use the plugin Coupon Creator. Install it as you would any 3rd-party plugin. If you aren’t sure how to create a coupon and use the plugin, you can find more information on their Guides page. If you have already installed the WooCommerce plugin, you can easily create coupons in the WooCommerce settings. They have good articles on how to create new coupons and manage them.

personalization to scale a WooCommerce website - personalize coupons

Personalize your Emails

personalization to scale a WooCommerce website - email personalization

When you send emails with personalized content, the recipients feel more special, as the emails are unique and sent just for them. 

Here are the reasons why you should personalize emails:

  • Click-through rates are improved, as are conversion rates 
  • Personalized emails produce more sales
  • Personalized Call To Action buttons provide higher conversion rate than generic Call To Actions

It’s important to note that increasing order bumps doesn’t just happen at checkout. Clever upselling and cross-selling emails make up an important part of any personalized marketing strategy. The goal is to increase your customers’ order sizes, so it does not matter if the purchase takes place during a website visit or via email after checkout.

You can always include upselling or cross-selling suggestions right in the order confirmation email, or you can send them as part of a later campaign, but it’s always important to include relevant products that your customer is sure to be interested in.

In the Growmatik email builder, you can automatically add related product suggestions to your emails. Plus, you can automate them to send immediately after a customer makes a purchase.

Read the following article to learn more about how to personalize emails:
How to Send Engaging Marketing Emails They Can’t Help But Click

Wrapping Up

When users visit your website, you don’t have much time to grab their attention and make them stay on your website longer. This is why it’s so important to make use of personalization to scale your WooCommerce website. Personalizing your web page content is a great way to provide your users with the information and products they are looking for. Ultimately, personalization helps you to connect with your customers, lure them back, and improve your marketing outcomes.

What is a Loyalty Program and Why Does it Matter for Growth

Looking to grow your WooCommerce store? The lifetime value of customers is a key factor for success. The fact is, finding new customers is costly, and existing customers are already familiar with your brand and, hopefully, interested in buying more from you. How can you cultivate this kind of loyalty from your customers? In this article, we’ll dive into how to use a loyalty program for WooCommerce to unlock the real lifetime value of a customer.

Why customer loyalty matters

Just how valuable is a loyal customer? The top 1% of your customer base can earn you up to 18 times more than your run-of-the-mill customer! These are the customers you want to cultivate true loyalty in, and building that loyalty should be central to your customer retention strategies. There are many ways to generate loyalty, but you must remember that the bond between your brand and your customers is a two-way street. Your customer is looking to get value out of your brand, and is willing to pay for it. The more value you give them, the more—and the longer—they are willing to pay.

A cognitive bias known as reciprocity bias is at the heart of this two-way relationship. If someone gives you a gift or does you a favor, you are far more likely to want to do something for them in return. In WooCommerce, this means that customers are much more likely to leave a positive review, buy from you again or actively promote you to their friends and colleagues provided that you do something for them first. This psychological principle is at the heart of many clever uses of cognitive bias in marketing.

Advantages of customer loyalty

What does a loyalty program achieve for your WooCommerce store? First, it cements the bond between your customers and your brand. Second, it creates a more motivated customer base, which is the first step to achieving the following goals.

Build relationships to increase stickiness

In Lean methodology, stickiness is a core engine of growth. The art of building stickiness is crucial for success, and some of the most successful businesses in the world have used it to create sustainable growth. Customer loyalty manifests itself in clients who visit your site regularly, interact with your products, and actively promote your content. At the very least, the increased time they spend on your site will improve your SEO, helping you rank higher thanks to the backlinks to your website from their shared content.

Use repeat or referral sales to increase conversions

You’ll notice this effect immediately upon implementing a loyalty program. By encouraging loyalty, you stand to sell more. These increased sales might come from the customers themselves buying more or from those they refer to your brand.

Save money–retain customers!

Your CLV-CAC (customer lifetime value versus customer acquisition cost) ratio is central to any argument for the value of loyal customers. With a loyalty program, this ratio goes up as you save money by focusing on retaining existing customers rather than just attracting new ones.

Get valuable referrals

Don’t mistake retaining loyal customers as forgoing growth! The fact is, a satisfied customer is the best marketing money can’t buy. A motivated customer base will actively promote your brand in their professional and personal networks. Soon you’ll be seeing exponential growth as your existing customers introduce plenty of new customers to your brand.

Kinds of customer loyalty programs

How can we trigger reciprocity bias? With rewards, of course! Here are three kinds of rewards you can use to encourage loyalty:

  1. One-off rewards such as point-based gifts, coupons and freebies. The point-based rewards program used by North Face is a great example of this. Each time you invite a friend or use a reusable bag when you shop generates points that customers can use as a discount for their next purchase.

2. To maintain loyalty over a longer period, design a tier-based loyalty program. Unlike one-off rewards, this kind of discount is not linear. Instead, it changes based on key engagement metrics like how much a customer buys. Mirenesse has a great designed tier-based loyalty program.

3. The third form of rewards, progress programs, combine elements of the first two with the mechanisms of gamification, the endowed progress effect and the Zeigarnik effect. This kind of program maintains motivation by accompanying individuals step-by-step through their customer journey. Nike uses this kind of program to build loyalty and get customers moving. Their core idea? “The more active you are, the more you get rewarded.”

We’ll use this third method as the central example for this article. Let’s learn a bit more about how loyalty programs work by diving into the concept of “gamification.”

Gamification and loyalty programs

Simply put, gamification is the addition of game elements to any process in order to create the desire to achieve more. If you’ve ever played a video game, you’ve probably noticed the ways that games encourage you to play more to unlock new skills or items. Let’s say you save a town from a ghoul in Fallout 4. What do you get? A bunch of appreciation messages, some fancy new gear and a great new skill to help you play further. How can you create this kind of rewards system within a loyalty program?

You can use gamification within your customer loyalty program by rewarding customers based on the frequency and level of interaction with your brand.

Rewarding repeat engagement through a tiered game-like loyalty program increases engagement and keeps customers motivated to “accomplish more,” ultimately helping your WooCommerce store grow more.

Plot out a milestone system based on the number of purchases, get the customer onboard through a simple registration process and give them a simple reward to get started. As they progress through each milestone, add in tempting rewards and promises to keep them buying to hit the next milestone.

Lastly, make the goal clearly in reach. People are more likely to stay motivated when they feel their goal is within reach.

This is what’s known as the endowed progress effect. It’s a key psychological trigger you can implement into your loyalty program to encourage sustained customer engagement.

How to measure customer loyalty

There are a couple of different metrics you can use to set the milestones in a loyalty program:

  • By total order value
    If a customer buys only a couple items, but chooses the most expensive items in your WooCommerce store, they can still climb the ranks of your loyalty program using the ‘total order value’ metric. This is a great way for enterprises to assess brand loyalty, especially if you deal in expensive merchandise.
  • By total count of purchased items
    If customers buy a lot, but don’t necessarily spend a huge amount of money in individual purchases, they can still make progress in your loyalty program if you opt for the ‘total count of purchased items’ metric. This is a great way to measure customer loyalty on e-commerce sites.
  • By total count of orders
    For some businesses, the number of placed orders is a more important metric than total spent or number of items purchased. Restaurants or other delivery businesses can benefit from using ‘total count of orders’ to assess customer loyalty.
  • By combination
    The most effective loyalty rewards program integrates all of the above metrics, covering the widest range of shopping habits among loyal customers. We’ll use this combined rewards technique in the sample rewards program we’ve created in this article. 

Build a WooCommerce loyalty program

The following three steps are the main parts of crafting any loyalty program:

  1. Designate your loyalty tier segments.
  2. Design the marketing materials you plan to use for each segment. Some examples could be a personalized homepage, emails or popups.
  3. Create the automations you need to deliver the marketing materials to each segment.

Growmatik is a great one stop-solution that can help you build a working WooCommerce loyalty program. Other tools and plugins that can help you build loyalty programs include WooCommerce Points and Rewards, YITH WooCommerce Points and Rewards.

Final Thoughts

As you embark on the journey of building customer loyalty, keep one thing in mind: your products and services should bring real value to your customers if you want your loyalty program to work. Loyalty programs are not a trick to rope in customers, as using it as such can ultimately hurt your brand’s reputation. Loyalty and reward programs are just part of an effective business strategy to cultivate stickiness and customer engagement.

In this article, we covered the theory and psychology behind loyalty programs and explored several different kinds. Let us know about your experiences running loyalty programs for your e-commerce business down in the comments below!

How to Create an AMP Ready WordPress Website with Jupiter X

AMP ready WordPress website featured

Let’s start off by defining AMP (Accelerated Mobile Pages) as follows: a mobile-first approach for web pages that limits visuals and makes pages load instantly as requested. This is especially beneficial for mobile devices. The AMP concept forces website owners to think about mobile users, plus it makes them focus on content instead of just visuals. In the following article, I will explain in detail how AMP works and how you can craft an AMP-ready WordPress website with Jupiter X. 

Accelerated Mobile Pages manage to load pages the instant they are opened, thanks to the following techniques:

  • Prioritizing content  

Instead of waiting for the assets on the page to load, AMPs immediately load the content that users want to see.

  • Telling the browser about page layout before it completely loads 

Browsers have to wait for assets to load before they shape out layout and render page content. In AMP, you do not wait for assets to load, so you have to let the browser know the page layout another way. Using AMP components, it’s possible to inform the browser about page layout without loading any assets.  

  • Loading all JavaScript asynchronously

Forget about using Javascripts the way you were before. AMPs load every JS request asynchronously. This technique may require sacrificing some visuals and functionality, but I’ll tell you shortly how to make up for it with key content.

  • Combining and inlining all  CSS on the page

Since no CSS assets are allowed in AMP pages, all of the required CSS will be combined and loaded using a couple of style tags : <style amp-custom>,

 <style amp-boilerplate>, <style amp-runtime> etc . Apart from these, you are not allowed to link to any external CSS or use !important anywhere. (More info

  • Font Optimization and asynchronous font loading

AMP allows you to use custom fonts but will load them async by default and cause zero HTTP requests until fonts start downloading. It is recommended that you optimize the fonts before using them on any web pages. 

  • Only run GPU-accelerated animations

“The only way to have fast optimizations is to run them on the GPU. GPU knows about layers, it knows how to perform some things on these layers, it can move them, it can fade them, but it can’t update the page layout; it will hand that task over to the browser, and that’s not good.

The rules for animation-related CSS ensure that animations can be GPU-accelerated. Specifically, AMP only allows animation and transition on transform and opacity so that page layout isn’t required. Learn more about using transform and opacity for animation changes.”  (+)

  • Lazy loading ads and media

Load ads, images, videos and iframes when the user scrolls by them on the page. (Lazy Load). This will help the page content load without waiting for media and ads. 

If the above techniques are applied to a page and the page’s HTML tag contains an amp attribute, along with a few other tags, the page will be verified as AMP and it will have the AMP icon in front of it.

AMP icon in the google search results

AMP ready pages are cached and served by Google’s AMP viewer. This makes the pages load INSTANTLY, positively impacting user experience. Even though AMP is not an aspect of SEO, loading speed is a key reason for using AMP ready pages to deliver your content.

Google AMP viewer caches AMP pages, allowing them to load as soon as they are clicked (+)

Although AMP is a revolutionary approach to crafting web pages, it may not allow you to use complex visuals. The main difficulty in having an AMP ready WordPress website is that you are limited to AMP components. 

If your page does not adhere to all the above techniques, your page will not be verified as AMP. However, everything will load as desired. In order to verify if a page is fully AMP compatible, search for “amp verify” on Google and use the field shown to test your site’s AMP compatibility. (sample)

While it’s good to prioritize the  mobile first approach and use AMP to speed up your website as a whole, many will forgo using AMP altogether, as it can be a lot of work. In fact, since AMP only uses its own components and complex visuals are off the table, many prefer to pass AMP by and stick to optimizing their website to improve performance. Not only are there limitations on visuals, but the whole page may require extensive changes.. 

Because of these problems, websites prefer to have two types of pages:

1 – Desktop ready pages that are not  AMP friendly

2 – AMP ready pages, usually with the same URL but with a parameter in the URL and a link to the desktop page telling the browser that it’s an AMP page. (i.e. https://yourdomain.com/page1  – > https://yourdomain.com/page1/amp or https://amp.yourdomain.com/page1 or https://yourdomain.com/page1?amp=1)

Since WordPress has the biggest share in the CMS world, the AMP project revealed a specific plugin that is compatible with WordPress and offers tools to convert your website to an AMP compatible website. It has two different approaches:

  • Using an AMP ready theme + AMP plugin to make all pages AMP
  • Using an AMP plugin and building AMP pages from scratch, in addition to non-AMP pages, and using a URL parameter to distinguish the pages.
AMP Plugin configuration wizard

Most of the premium themes out there are not AMP compatible. Jupiter X is also not AMP compatible, which means that, if you want to use the AMP plugin, you have to choose Reader mode. AMP compatible themes also have two approaches:‌ those who convert the page to AMP from top to bottom (not many themes can do this, as it’s a difficult process) and those who offer a simple mobile theme with a limitation on visuals and styles and link the AMP pages to non-AMPs. 

The Jupiter X theme can be considered an AMP compatible theme if you avoid using Elementor and all other third party plugins. If you use Gutenberg and the AMP plugin to build up your pages, you won’t have any difficulties running a fully AMP-ready WordPress website. However, issues occur when you are using the Jupiter X premade templates,  Elementor or third party plugins such as Jet Elements or Jet Tricks. So far, it is not possible to maintain page layout and style and convert it to an AMP page easily.

Imagine that you have a tab and enabled the AMP plugin on your website. What you will see is the tab titles below each other and the tab contents below those, with no capability of switching between the tabs. Why? Because you are not using the valid AMP component for the tab. Alternatively, you should use the Accordion component to preserve tabs in AMP pages. But how? How can the page builder know about this alternative and how should it convert that into Accordion? Simply put, it can’t. That’s why the best approach is to rebuild pages in AMP mode using AMP components. 

Now it’s time to introduce another popular AMP plugin: the AMP for WP plugin.

AMP for WP plugin page in WordPress plugin repository

After installing and activating the plugin, you’ll need to navigate through its settings and activate the AMP for your pages and, if you want it, for your homepage:

Setting up the AMP for WP plugin

If you keep these settings, your pages will convert to AMP in a new url. If your page has this URL: 

https://yourdomain.com/page1

The AMP version of your page URL will be as follows:

https://yourdomain.com/page1/amp

After setting up the plugin, navigate to your pages and make sure the “Show AMP for Current Page” is set to “Show”.

AMP ready WordPress website
Set the AMP version of the page

If your page was built using a  page builder, you will see that none of the visuals will show on your page. Notice how the tabs content changes after converting the page to AMP:

AMP ready WordPress website
AMP removes the visuals of the page and bans some functionalities

It’s important to mention that none of the texts in the AMP converted version above are clickable, so it’s of no use to us. Even if you install and activate the Elementor compatibility add on, it still won’t show your visuals. This is because these tabs are made via the Jet Tabs or Jet Elements plugin, both of which are part of the theme and are not AMP compatible. 

Ok, but what do we do now? 

Fortunately, there is an option that allows you to show different content on your AMP pages. It is only available if you use the AMP for WP plugin.

AMP ready WordPress website
Builder for AMP components on every page

Making the page via the AMP builder will let you use a better layout and visuals. After all, the AMP has some transitions supported and this builder is very useful for allowing alternative content for your AMP pages. Create the content you’d like and save the page. (Yes, the components are very limited, but that’s all we can do with AMP at the moment. Please note that AMP still comes with a lot of limitations). 

As a side note, it’s important to mention that you will lose your header and footer styles, as it uses a different theme for the mobile version of the website. The theme that it uses is very light and has a minimal style. However, you will find some customizing options on the plugin settings page.

AMP ready WordPress website
Header settings on the AMP for WP plugin

If you are running an e-commerce store and want an AMP website, you’ll need this extension (premium) to be able to show advanced product pages, carts or their components on your pages.

Here’s the  AMP version of my homepage after tweaking it a bit with the AMP builder and changing the mobile theme. All this was done via the AMP for WP plugin.

AMP ready WordPress website
AMP version of the page. The non AMP is using a Jupiter X template

Wrapping up

You need to know that the purpose of AMP is to load your pages INSTANTLY (not just faster, but instantly). In order to achieve this, you need to make a lot of sacrifices. You will have to change this mindset that a page works as long as it’s responsive, no matter what you put on it. If you want to have a successful AMP website, you’ll need to approach the concept of page load differently. Although Jupiter X is not a fully AMP ready theme, you can still make an AMP compatible website out of it using third party plugins, though it may take a bit of work. In this article, we reviewed the concept of AMP and covered methods for crafting and verifying an AMP-ready WordPress website. Feel free to share your thoughts in the comments below!

subscribe

Subscribe to Artbees Themes Blog for the best WordPress tips and insights.