Build an Online Business Using the MyListing Theme

Get the knowledge your online business needs to succeed.

Overview

In this Build an Online Business Using the MyListing Theme guide, we will be detailing our journey of bringing the MyListing Club’s PetFinders Starter Site to life.

Our goal with this guide is to help people build out a MyListing-based, business from conception to launch.

While this is not a real business and some of these steps taken in this guide are hypothetical, this is generally our real-world approach to any MyListing project.

General Business Framework
Define Your MyListing Model
Website Technology Stack
On-Page SEO
No-Index and No-Cache Pages
Media
eCommerce
Coming Soon Page
Navigation
Claim Listing Page
MyListing General Settings
MyListing Taxonomies
MyListing Packages
Listing Types
Explore Page Design
Add Listing Page
Add Listing Page (Custom)
How It Works Page
Listing 101 Page
Support Page
Get Started Page
Home Page
MyListing – Choose a Package
Single Listing Sharing
WooCommerce Endpoint Design
Submit Form Design
Shop Page (Custom)
Single Product Design
Policies
Elementor Notes
404 Page
Test. Test. Test.

General Business Framework

Brand Research

This is a critical step when it comes to launching a business.

The last thing you want to do is spend a lot of time and money building something, only to find out someone is already doing business under a similar name or worse yet…the exact name.

Namecheap Business Name Generator

We started by writing down a list of our top business keywords and then plugged those into Namecheap’s Business Name Generator.

Namechk

After we narrowed down our top list of business names, we ran those names through Namechk, which told us what social media account names were available.

The desire and need to procure the best domain name is pretty obvious.

What’s not so obvious (until it’soften too late), is the need to procure the social media accounts that are important to a business.

For example, if you want to build a photography-based website, having an optimally-named Instagram account is likely vital.

If you want to build a food recipe website, having a Pinterest account with the right name is ideal.

In the end, our process brought us to a decision to name our new business “PetFinders”.

Domains

We then jumped over to our preferred domain vendor, Namecheap to quickly snag up our domain names.

To avoid brand confusion, we procured many TLD (Top-level Domain) extensions (.com, .net. etc.) variations (thepetfinder, yourpetfinder, etc.) and region-specific options (charlottepetfinder, californiapetfinder, etc.) of our primary domain.

Tip: You don’t necessarily have to go out and buy up a ton of domains for your particular business. Take some time to think about your target audience, future growth, long-term acquisition/buy-out, etc.

DNS

Since we registered our domains with Namecheap, they were providing our DNS services.

As a best practice and for the best performance, we like to keep our DNS separate from our domain hosting vendor.

To accomplish that, we set up a FREE account with our preferred DNS provider, which just happens to be our preferred CDN provider…Cloudflare.

Tip: We have written a FREE, Cloudflare CDN for MyListing Websites guide to help you get started.

Google Account

We like to set up a new Google account, to be used specifically for Google-related services and other areas we need to manage where we don’t want to “pollute” our business email accounts.

Business Email

With our domain name in hand and DNS ready to go, we moved on to setting up our business email.

As a Microsoft Partner and users of Microsoft Office 365, setting this up was a breeze.

We simply set up our new domain within Microsoft Office 365 and added the provided DNS records to Cloudflare.

We create a paid email address for each c-level employee (e.g. [email protected]) for the purposes of conducting business, both internally and externally.

Shared mailboxes (Free) are created for general communication (e.g. [email protected]) and we create a shared mailbox for support communication (e.g. [email protected]).

Employees are granted access (read/manage, send as, or send on behalf of) to shared mailboxes where applicable.

When you’re just starting out it’s very common to be the only employee and you’re by default, responsible for all email communication.

So, you could have your paid email address and then be granted all of the access levels to a [email protected] and [email protected] shared email address.

As the business grows and employees are added, you could then start to pull yourself out of various shared mailboxes, as responsibilities and focus changes.

Branding

Colormind

The next step was to come up with our color scheme for use with all of our media, including our logo, favicon, illustrations, overall website, etc.

Choosing the right color scheme for your website is important for sending the right message and setting the overall mood.

Colormind is a tool we like to use when we start to think about a color scheme.

Mockup

If you click on the Website Colors option, you’ll be taken to a page where you can auto-generate a complete color scheme and then plug in individual colors if desired.

If you then scroll down the page, you’ll see how your color scheme would look when applied to elements, such as backgrounds, buttons, navigation, etc.

Image Upload

Equally as cool, is the ability to upload an image and have Colormind auto-generate a color scheme off of that image.

Tip: When we think about a color scheme, we assume some colors as a given, such as shades of black, white, and grey.

Tip: Elementor provides an option to specify and dial in your color palette, as it pertains to working with Elementor.

This can be found by editing a post/page and open the Elementor panel at the left-hand side of your screen.

Media

We use freepik for obtaining media (photos, graphics, icons, etc.) and use Adobe Illustrator to further customize media to match our brand and overall message.

For media branding, we like to keep things simple, clear, and consistent across fonts, color schemes, etc.

Social Media

We then grabbed all of the Social Media Accounts that were going to be part of our online presence, filled in every bit of information we could, and applied our branding.

Business Directories

Next, we set up our Google My Business account.

We skipped setting up additional business directory accounts like Bing Places for Business, as those require a physical address, and they don’t really apply to our business.

Email Marketing

We want to set up a solution that starts capturing emailing addresses, even before the website officially launches.

For this, we set up MailChimp.

  1. Signed up for the Free plan.
  2. Connected MailChimp to our Facebook and Twitter accounts.
  3. Profile > Settings: Set Time Zone.
  4. Profile > Settings > Domains: Verified our domain for sending.
  5. Account > Extras >API Keys: Create Key and document for use later in this guide.

Google Search Console

We set up Google Search Console for this website, using the Google account credentials we created above.

Google Analytics & Google Tag Manager

We set up Google Analytics and Google Tag Manager for this website, using the Google account credentials we created above.

Tip: We have written FREE, Google Analytics for MyListing Websites and Google Tag Manager for MyListing Websites guides, to help you get started.

Define Your MyListing Model

This is a critical step in the process.

Please have a look at the Define Your MyListing Model section of our FREE, Start Here guide for MyListing.

It’s super useful for those first starting out with MyListing and even those familiar with MyListing may find some useful information.

Listing Types

If this were a full-blown business, we would have a number of Listing Types for various types of pets, but for this Starter Site, we’ll simply cover a Dog Listing Type.

Taxonomies

We would also have a number of Taxonomies (Categories, Tags, Regions, Custom Taxonomies, etc.) and a number of options within those Taxonomies, but for the purposes of this guide, we will cover a small subset of those.

Website Technology Stack

Website Hosting

MyListing Club offers a deal for Kinsta hosting, so naturally, we jumped on it ourselves.

The deal provides the Starter plan for a fraction of the cost while providing 5x the amount of PHP workers.

Once our server was ready to go, we updated our DNS records at Cloudflare, to point to our Kinsta install and continued with setting up our server.

Tip: We have written a FREE, Kinsta Hosting for MyListing Websites guide, to help you get started.

WordPress

We followed our regular processes for implementing and securing WordPress environments, as part of our Asana Project Template for MyListing.

We can’t report everything we do, for security reasons, but we’ve listed some of the steps we take.

    • Settings > General > Tagline: Set an SEO-optimized tagline that includes relevant keywords.
    • Settings > General > WordPress Address (URL): Ensure it’s using HTTPS rather than HTTP.
    • Settings > General > Site Address (URL): Ensure it’s using HTTPS rather than HTTP.
    • Settings > General > Time Zone: Chose a city that reflects the Time Zone of our core business. (Note: Listings pick up whatever you set here, by default, unless the user specifies a new Timezone. Since you can only specify a city for a Time zone when submitting a listing, it’s important to not choose a UTC value here.)
    • Settings > General > Membership: Enabled Anyone can register.
    • Settings > Discussion > Default post settings >
    • Settings > Discussion >Default post settings
    • Settings > Discussion > Other comment settings > Users must be registered and logged in to comment: Enabled.
    • Settings > Discussion > Before a comment appears > Comment must be manually approved: Enabled
    • Settings > Discussion > Avatars > Avatar Display: Disabled. (Note: Avatar functionality uses resources and we don’t think using them is worth it.).
    • Settings > Media: Disabled “Organize the Media Library into monthly and yearly folders”.
    • Settings > Permalinks Common Settings: Set to Post Name.
    • Pages: Removed all pages.
    • Pages: Added pages named “Home”, “Legal”, “Cart”, “Checkout”, “My Account”, “Claim Listings”, “Shop”, “Resources” and “Search”.
    • Settings > Reading > Your homepage displays > A static page > Homepage: Set to our “Home” page.
    • Settings > Reading > Your homepage displays > A static page > Posts page: We leave this unset, as we use Elementor’s Blog template.
    • Posts: Removed all posts.
    • Posts Categories: Renamed the default Category to a valid category for the particular website.
    • Plugins: Removed all plugins installed by default, with the exception of WooCommerce, which we chose to install when prompted by Kinsta.
    • Users > Add New: Created a new Editor account with a display name publicly as that matched our website/business name.

WordPress Theme

  1. Appearance > Themes: Installed the MyListing parent theme.
  2. Appearance > Themes: Installed and activated the MyListing child theme.
  3. Appearance > Themes: Removed all default WordPress themes.
  4. WordPress > Settings > Permalinks > Optional > Listing base (i.e. Listing Permalinks): Set to %listing_region%/%listing_category%/

WordPress Plugins

  1. Plugins: Remove unnecessary default plugins such as Hello Dolly.
  2. Plugins: Dismiss the notice to install WooCommerce Admin. (Note: This plugin is not necessary and just adds more bloat. WooCommerce presents it in a way that makes you think you need it. You don’t).
  3. Plugins: Click on the Begin installing plugins link at the top of the page.
  4. Plugins: Install Elementor.
  5. Plugins: Go back to Plugins but instead of clicking on the Begin installing plugins link at the top of the page, click on the Dismiss this notice link to avoid installing Contact Form 7. (Note: If you’re positive you will not pay for and use Elmetor Pro, you can skip this step and keep using Contact Form 7.).

Note: We don’t use the Contact Form 7 that comes bundled with the MyListing theme, and instead, we use the Elementor Pro forms widget.

Tip: We have written a FREE, Replace MyListing’s Contact Form 7 with Elementor Pro guide.

Our Core MyListing Project Plugin Stack

Tip: We can’t stress it enough, but starting day 1 the usage of plugins should be carefully thought out.

We often see websites that have several plugins installed but just sitting there deactivated, which tells us a number of things, none of which are good.

Every plugin that is installed and configured, impacts the website’s database even when after it has been deactivated or removed.

Developers often configure plugins to retain their settings in the database, just in case the plugin is ever reinstalled again.

Best practice is to not use your production website as a testing ground and instead, test plugins in your staging environment.

Only when/if you determine a plugin passes your tests, should it reach your production website.

Permalink Manager Pro

Members get 15% OFF this critical solution for building SEO-optimized URLs for MyListing-based directories.

Perfmatters

Members get 30% OFF any purchase of this all-in-one, lightweight WordPress Optimization plugin.

Image Optimization

Since we were getting to the point where artwork was going to start being added to the website, we started thinking about image optimization. For this, we followed our own, FREE, Image Optimization for MyListing Websites guide, which covers the set up of ShortPixel’s Adaptive Images (SPAI) plugin.

ShortPixel

Members get generous Bonus Credits with any purchase of this top-rated WordPress image optimization plugin.

On-Page SEO

SEOPress Pro is our recommended solution as far as plugins go for our On-Page SEO.

Since SEOPress allows you to easily import its settings from other websites, we simply imported our typical MyListing SEOPress settings and adjusted them specifically for this website.

Note: SEOPress also allows you to import settings from all of the other major WordPress SEO plugins.

We have written some FREE guides for On-Page SEO and we have more in the works.

SEOPress

Members get 15% OFF any purchase of this must-have WordPress SEO plugin.

No-Index and No-Cache Pages

No-Index

Due to the nature of certain pages, we don’t want to index them as they hold no SEO value and we simply don’t want them to be easily accessible to the public.

We’ve listed the pages that we no-index, below.

  • Cart
  • Checkout
  • Claim Listing
  • My Account
  • Legal (Note: This is the page that holds all of our policies. If your policies are separated out, you would no-index the individual pages/policies.).
  • Add Listing (Note: This is only applicable if you design a custom Add Listing page (i.e. Get Started), aside from the core page required for some of the theme’s functionality.).

No-Cache

There are some pages we don’t want to cache, whether it’s because of functionality for because we always want to ensure users are seeing the most recent data.

We’ve listed the pages that we no-cache, below.

  • All Explore pages
  • Cart
  • Checkout
  • Claim Listing
  • My Account
  • Legal (Note: This is the page that holds all of our policies. If your policies are separated out, you would not cache the individual pages/policies.).
  • Add Listing (Note: This is only applicable if you design a custom Add Listing page (i.e. Get Started), aside from the core page required for some of the theme’s functionality.).

Media

Logo

As we mentioned previously, we like to keep things simple, clear, and consistent across fonts, color schemes, etc. 

Our logo will actually display in White, across the website, but we are showing it here, “naked”, in Black.

Favicon

Our favicon was created by taking our logo, removing the text portion, applying a gradient, and sizing it at 512 x 512 px.

When then added it to our website by going to Appearance > Customize > Site Identity.

Below, you can see our favicon, as it appears in browser tabs as well.

Hero Video Background

We found the video we wanted on the Videezy website.

Note: We ended up using an image rather than a video but wanted to leave the above instructions in place as an option for you.

Hero Video Background (Fallback Image)

We didn’t want auto-playing of videos on mobile devices, we created a fallback image.

Using Kapwing’s Convert Video tool, we extracted a still image from our Hero Video.

Note: We ended up using an image rather than a video but wanted to leave the above instructions in place as an option for you.

Listing Type (Default Logo)

We wanted to create a default Logo with our branding, in case the listing owners didn’t upload their own, for one reason or another.

We’ll later assign this logo to all Listing Types.

Logos display at 80 x 80 px, so we simply resized one of our logos to those dimensions and saved it in .JPEG format so that our logo background color would always show.

When logos are clicked, they invoke the Lightbox functionality, which shows images at their original size.

So, when uploading actual listing logos (not just a default placeholder), you’ll want to use logos that are at least 160 x 160 px.

Note: If you happen to offer graphic design services as we do, this is an opportunity to sell your services and add more value to your user base.

Listing Type (Default Cover Image)

We wanted to create a default Cover Image with our branding, in case the listing owners didn’t upload their own, for one reason or another.

We’ll later assign this to all Listing Types that use a Cover Image.

Cover Images display at 1980 x 594 px. Uploading an image with those exact dimensions (or smaller) may cause some of the subject matter of the image to get lost as it’s expanded to “cover” the container.

Tip: When thinking about the centering of image subject matter, think of it like submitting images to companies or services that produce business cards, brochures, etc.

They provide templates containing “guides” to help you keep your subject matter from bleeding of the canvas.

We found 1980 x 1042 px to be the ideal dimensions for Cover Images.

So, we created an image with those dimensions and ensured the subject matter was properly aligned (i.e. centered as much as possible) within those dimensions. 

eCommerce

Payment Gateway

We set up a new Stripe account to keep our accounting systems separate and organized.

  1. Signed up for a Stripe account (Free).
  2. Filled in our business info, banking info, etc. and activated our account.
  3. Configured customer email settings for both invoices and billing notifications.
  4. Branded our account (logo, color scheme, etc.).

WooCommerce

Once Stripe was set up, we moved onto the setup of WooCommerce.

Unless a specific setting is mentioned below, you can assume we went with the defaults or there is information very specific to us (e.g. Address).

Note: You may be more comfortable running through the WooCommerce Setup Wizard, especially if you’re new to WooCommerce.

We like to bypass the wizard, as it installs plugins without asking, adds pages you may not need, etc.

These are the settings for our hypothetical, US-based business, that does business globally, so your settings will be different.

  • General General Options > Shipping Location(s): Disable shipping & shipping calculations. (Note: We may sell merchandise at some point, but for now, we’ll keep things simplified on the back-end.).
  • General > Enable Coupons: Disable. (Note: We disable until we actually use them, to keep things lean and clean.).
  • General > Currency Options > Currency: United States (US) dollar ($).
  • General > Currency Options > Number of Decimals: 0.
  • Products > General > Shop Page: Specified our Shop page.
  • Products > Inventory: Disabled Manage Stock since we don’t have any physical inventory at this time.
  • Payments: Enabled Cash on delivery. (Note: Since this is a hypothetical company, we are not configuring a full-blown gateway, such as Stripe.).
  • Stripe: Added Live and Test keys, leaving Stripe in test mode. (Note: We didn’t actually do this, but listed it here for guidance.).
  • Accounts & Privacy > Guest Checkout: Disabled Allow customers to place orders without an account.
  • Accounts & Privacy > Guest Checkout: Enabled Allow customers to log in to an existing account during checkout.
  • Accounts & Privacy > Account Creation: Enabled Allow customers to create an account during checkout.
  • Accounts & Privacy > Account Creation: Enabled Allow customers to create an account on the “My Account” page.
  • Account erasure requests: Enabled Remove personal data from orders on request. (Note: Important for GDPR compliance.).
  • Account erasure requests: Enabled Remove access to downloads on request.
  • Personal data removal: Enabled Allow personal data to be removed in bulk from orders. (Note: Important for GDPR compliance.).
  • Privacy Policy > Privacy Page: Created a new, blank, page named “Legal” so that we could reference it here. (Note: We’ll later edit this new page with Elementor and add all of our policies. This allows us to have a single page to manage all of our policies.).
  • Emails > Email Sender Options > “From” address: Changed this to our [email protected] business email account.
  • Emails > Email Template > Footer Text: Removed everything except “{site_title}”.
  • Emails > Email Template > Colors: Configured with our branding.
  • Advanced > Cart Page: Specified our “Cart” page.
  • Advanced > Checkout Page: Specified our “Checkout” page.
  • Advanced > My Account: Specified our “My Account” page.
  • Advanced > Terms and Conditions: Specified our “Legal” page.
  • Advanced > WooCommerce.com > Show Suggestions: Disable to prevent suggestion for WooCommerce extensions.

WooCommerce Page Shortcodes

Since we bypassed the WooCommerce setup wizard, we needed to manually add the WooCommerce page shortcodes to the corresponding pages.

Note: If you ran through the wizard and chose to automatically create the pages (i.e. endpoints), you can skip this section.

Coming Soon Page

While the website was under development behind the scenes, we wanted to start building anticipation for the launch.

We do this by throwing up a Coming Soon page with an estimated launch date.

We also include a sign-up form that hooks into Mailchimp.

By signing up, people get the inside scoop on when the website officially launches and they get potential early-bird discounts.

While the free version of Elementor provides the ability to set the website in Coming Soon mode, as well as specify a required (basic) template, Elementor Pro really is needed here.

  1. Templates > Add New > Created our page.
  2. Template Type > Page.
  3. Named our template “Coming Soon”.
  4. Clicked Create Template.
  5. Edited the template with Elementor and set our default colors and default fonts using the Elementor settings menu. (Note: Since this was the first piece of content (post, page, template, etc.) we edited with Elementor, this was our first opportunity to touch these particular Elementor settings. Please also note the whatever default fonts you set within Elementor, they also get applied throughout MyListing-related elements like Single Listings.).
  6. We added a section, set an image background to cover the section, added an overlay to the image to our text would stand out, and set everything up so the screen was 100% covered with the image.
  7. We added an Elementor Pro form, styled it, and set it up to use MailChimp.
  8. MailChimp > Added our API Key, set it to Double Opt-In.
  9. We added and style the Elementor Countdown widget.
  10. Saved our template.
  11. Elementor > Tools > Maintenance Mode > Choose Mode: Coming Soon.
  12. Elementor > Tools > Maintenance Mode > Who Can Access: Logged In.
  13. Elementor > Tools > Maintenance Mode > Choose Template: Our Coming Soon template.
  14. Tested everything related to the Coming Soon page, from a potential visitor’s point of view.

Claim Listing Page

Since we are using the Claim Listings feature, we needed to create a dedicated page that holds the [claim_listing] shortcode.

  1. WordPress > Pages > New: Created a page and named it “Claim Listing”.
  2. Added the [claim_listing] shortcode to the page. (Note: While you can use Elementor here, there’s really no reason to. You can simply use the WordPress block editor.).
  3. Clicked Publish.

MyListing General Settings

All of the settings in this section were documented as we went along.

If we don’t mention a specific setting, that simply means we didn’t need it for this project.

Theme Options > General

We set the Accent Color according to our branding.

Theme Options > Header

Since we use custom headers, we toggled everything off (i.e. switch all the “Yes” toggles to “No”) here just to be sure they were not being called by the theme.

Theme Options > Footer

Since we use a custom footer, we toggled everything off (i.e. switch all the “Yes” toggles to “No”) here just to be sure they were not being called by the theme.

Theme Options > Explore

  • Default Explore Listings Page: We set this to our catch-all Explore page, “Search”.
  • Listings  Per Page: We set this to 90 since we are on premium hosting with Kinsta and utilizing ShortPixel’s Adaptive Image (SPAI) to further optimize images.. (Note: For performance reasons, be careful setting this number above 30 if you are on cheaper hosting plans.).
  • Default ‘Add a Listing’ Page > Set this to our custom “Add Listing” page.

Theme Options > Single Listing

  • Listing Preview Overlay Color: To brighten up the Listing Preview cards on the Explore page, we set this to transparent using rgba(255, 255, 255, 0) for the color. (Note: For some reason when you paste in the color code above, it never takes the first time. You have to put it in twice.).
  • Cover Overlay Opacity: Changed from .5 to .3, to brighten up the Single Listing Cover image area.

Theme Options > Custom Code > CSS

While we have listed a sample of the custom CSS added to the PetFinders website, you can inspect any portion of the website to grab any CSS that you like.

We also have some paid options, like the PetFinders Master CSS File which allows you to copy all of our CSS in one shot, and Starter Sites like this one, are available to purchase in their entirety.

  1. We set our default hyperlink color to a {color:#6C62FB;} for non-hover and to a:hover {color:rgba(106, 96, 251, 0.8);} for hover.
  2. We set our default body text using body {font-size:1.5rem;}.
  3. To style our underlined text we added .underline-grey {border-bottom:dashed 1px #b7b4b4;padding-bottom:3px;}.
  4. To achieve the same header transparency on our Single Listing pages, as we do on our other pages, we added .featured-section {margin-top:-100px;}.
  5. To style the Single Listing Quick Actions, we added .quick-listing-actions>ul>li>a>i {color:#6C62FB;} for non-hover and
    .quick-listing-actions>ul>li>a>i:hover {color:rgba(106, 96, 251, 0.8);} for hover.

Theme Tools > Performance

While we like to see performance optimization completed outside of a theme, this seems to be a welcome addition thus far. 

Performance > Preview Cards > Caching

Preview Card Caching produces a cached version of the Preview Card for every Listing that is created.

This can result in significantly faster load times for your Explore pages, Listing Feeds, and other locations where Preview Cards are used.

The Preview Cards are updated automatically whenever a Listing’s information is changed, but you may need to occasionally regenerate the cache after updating the theme or after you’ve modified the Preview Card template.

Click the Enable Now button to turn on this caching feature.

Performance > Preview Cards > other settings

The image optimization we do outside of the theme and the way we build our Listings prevents us from having to touch these settings.

If you’re looking for additional options for speeding up your website, it might be worth looking into these settings.

Performance > data updates

This section can be ignored for the most part, but here are our notes.

Performance > data updates > Update Term Counts

We recommend running this once, as part of your initial MyListing build.

Going forward, you can typically ignore this unless you perform an action such as importing Listings from WP All Import or similar tools.

If you run an import and notice the proper counts aren’t being reflected, run the update again.

Performance > data updates > Clear transients

We recommend running this once, as part of your initial MyListing build.

Going forward, this can typically be ignored unless you have a special use case.

Performance > data updates > Remove Old Options

We recommend running this once, as part of your initial MyListing build.

Going forward, this can typically be ignored unless you have a special use case.

Theme Tools > Listing Stats

We want to be able to show listing owners their data for up to 3 months.

Anything less than 3 months, it really is difficult to “sell” customers because they must know to document their stats each month to see any trends.

So, we calculated the max number of days (worst case scenario) in a 3-month period, which is 93 days (31 days x 3 months).

Listings Stats > General

Delete stats older than: 93 Days

Listing Stats > Vists Chart

Chart Categories: Ticked all the boxes except the Last 12 months box.

Listing Stats > Sections

Retaining up to 3 months of stats for each listing, using the default data collectors (Platforms, Browsers, Devices, etc.), could be a burden on the database.

While we don’t do it to specifically address the potential burden, we organically lessen the chance of that burden by removing some data collectors.

We remove some data collectors because the data is already collected via Google Analytics and because the data does not apply to our business model and/or because the data is flat out useless to the listing owners.

If you think about it, the listing owners have no control over design, SEO, etc., so showing them what browsers the viewers are using, for example, is pointless.

The same goes for platforms and devices.

In our case, we are only operating in the United States, so country views are also irrelevant.

We toggled off the following data collectors.

  • Enable Browsers
  • Enable Platforms
  • Enable Countries
  • Enable Devices

Theme Tools > Map Services

We use Mapbox for our projects, so that’s what we have covered here.

Map Services > General

  1. Map Services Provider: Selected to Mapbox.
  2. Mapbox API Access Token: Clicked on the “your Mapbox user dashboard” link.
  3. Created a FREE Mapbox account and verified our account via email.
  4. Clicked the Create a token button.
  5. Name: Gave our project a name of “MyListing Club Starter 1”, since we will have multiple projects (i.e. Starter Sites).
  6. URL: Added our Live and Staging website URLs so that only those websites can use our key for Map Services.
  7. Clicked the Create token button.

Theme Tools > Direct Messages

We personally don’t see a use for this feature when we already have contact forms and considering the fact both parties really need to be active on the website at the same time for this to be useful.

When you also take into account the performance hit on a website, it is a hard pass for us, and we disable Direct Messaging.

  1. Enable Direct Messages?: Toggled to “No”.
  2. Enable Compose Messages?: Toggled to “No”.

Theme Tools > Social Login

We configured this to allow both Facebook and Google sign-in, by following our own, FREE, Configure Social Login for MyListing guide.

Listings > Settings

  • Allow editing of published listings: Enabled.
  • Claim Listings > Claim Listings Page: Specified our “Claim Listing” page.

MyListing Taxonomies

If we don’t mention a setting within a taxonomy, you can assume we left it as default.

Listings > Categories

  1. Add New Category > Name: Entered “Labrador Retriever”.
  2. Icon Option: Choose Icon Font.
  3. Icon: Chose the fa fa dog icon.
  4. Image: Category images are displayed at 339 x 170 px, so we created custom images with those dimensions in .PNG format to have transparent backgrounds. For this Category, we uploaded our custom “Labrador Retriever” image.
  5. Listing Type(s): Specified the “Dog” Listing Type, to prevent the Dog-related Categories from appearing on other Listing Types.
  6. Clicked Add New Category.
  7. Repeated the above steps, as needed, for the website.

Listings > Regions

We are covering the addition of a single Parent/Child Region relationship.

Regions > Parent Region

  1. Add New Region > Name: Entered “North Carolina”.
  2. Icon Option: Chose Upload Image.
  3. Icon > Upload Image > Add Image: Region images are displayed at 80×80, so we created custom images with those dimensions in .PNG format to have transparent backgrounds. For this Region, we uploaded our custom “North Carolina” image.
  4. Clicked Add New Region.
  5. Repeated the above steps, as needed, for the website.

Regions > Child Region

  1. Add New Region > Name: Entered “Charlotte”.
  2. Parent Region: Chose “North Carolina” from the drop-down, since Charlotte is a city (i.e. Child Region) of North Carolina (i.e. Parent Region).
  3. Icon Option: Chose Upload Image.
  4. Icon > Upload Image > Add Image: For this Child Region, we uploaded our custom “North Carolina” image again. (Note: The reason we upload this same image, is because we never know if users will select the Parent, the Child, or both. Also, there really is no practical way to uniquely identify every city across the United States.).
  5. Clicked Add New Region.
  6. Repeated the above steps, as needed, for the website.

Listings > Tags

  1. Add New Tag > Name: Entered “Accepts Credit Cards”.
  2. Icon Option: Chose Icon Font.
  3. Icon: Chose one of the Credit Card icons.
  4. Clicked Add New Tag.
  5. Repeated the above steps, as needed, for the website.

MyListing Packages

If you are using Paid Listings for your MyListing website, WooCommerce products are used to assign pricing, whether the listings are FREE or have a cost. 

Those not using Paid Listings can skip this section.

Out of the box, MyListing includes the Listing Package product type, which is geared more towards listings that have a limited listing duration.

While listings can theoretically be renewed each month, it’s more of a manual process.

Subscription Model

We prefer to use a subscription-based model, where the listings remain in play, as long as the subscription payments keep coming in.

This not only makes it easier for the user but also increases the chances they remain a customer.

Our approach to pricing follows the 3-tiered pricing strategy.

This strategy not only provides an easy entry into the platform (i.e. FREE or low pricing) but to also provides more value.

While we would love for people to sign up for our top pricing tier, the goal is to provide a ton of value in a medium-priced tier, driving customers towards it.

To provide the subscription functionality, the WooCommerce Subscriptions plugin is required.

WooCommerce Subscriptions

It has been quite a journey as far as MyListing and WooCommerce Subscriptions go.

Until recently, the ability to upgrade/downgrade Listing Subscriptions wasn’t really usable.

Our own personal projects could not launch until MyListing fully-adopted the native upgrade/downgrade options within the WooCommerce Subscriptions plugin.

This is now a reality with MyListing!

WooCommerce Subscriptions Setup

At the time of this writing, the steps to put WooCommerce’s native upgrade/downgrade options in place, are outlined below.

  1. WooCommerce > Settings > Subscriptions > Switching > Allow Switching: Between Grouped Subscriptions.
  2. WooCommerce > Settings > Subscriptions > Switching > Prorate Recurring Payment: For Upgrades of Virtual Subscription Products Only. (Note: This is our preference. Yours may be different.).
  3. At the bottom of your functions.php file, add the snippet shown below.

add_filter( ‘mylisting/enable-subscription-switch’, ‘__return_true’ );

Premium Package

We created a Listing Subscription package, which is very similar to how you would configure a Listing Package.

Tip: If you start by creating the package that includes the most features, first, you can then clone that package and then strip out features that are not included with the lower-priced packages.

In other words, it is much easier to strip out features, than it is to add them in.

  1. Products: Added new.
  2. Product Name: Gave it a name of “Premium”.
  3. Description: Listed each feature of our Premium package, on a separate line. (Note: We like to add a checkmark icon to each line for this package, which indicates that every feature is included in this particular package.).
  4. Product Data: Chose Listing Subscription.
  5. Product Data Subscription Price: Set an arbitrary price.
  6. Product Data Limit Listing: Set to 1.
  7. Product Data Feature Listings?: Enabled. (Note: We want to add more value to our Premium listings, by “featuring” them with slightly different styling, and giving them priority over Standard listings.).
  8. Product Data Mark as verified?: Enabled. (Note: If people are willing to pay for a listing and take the time to claim or set up a listing, we believe it’s safe to assume the listing is “verified”.).
  9. Product Data Use for Claim?: Enabled.
  10. Product Data Linked Products > Upsells: We don’t have any since the Premium package is the highest-priced package.
  11. Product Data Linked Products > Cross-sells: Selected all of our Promotion packages.
  12. Clicked Publish.

Standard Package

  1. Products: Hovered over the “Premium” package and choose Duplicate.
  2. Product Name: Gave it a name of “Standard”.
  3. Permalink: Clicked Edit, cleared out the permalink, and clicked OK. (Note: This will automatically set the permalink accordingly.).
  4. Description: Adjusted by striping out the checkmark from features that are not included in this package.
  5. Product Data Subscription Price: Set an arbitrary price.
  6. Product Data Featured Listings?: Disabled.
  7. Product Data Linked Products > Upsells: Selected all of our higher-priced packages, which in this case was our Premium package.
  8. Clicked Publish.

Basic Package (Free)

  1. Products: Hovered over the “Standard” package and choose Duplicate.
  2. Product Name: Gave it a name of “Basic”.
  3. Permalink: Clicked Edit, cleared out the permalink, and clicked OK. (Note: This will automatically set the permalink accordingly.).
  4. Description: Adjusted by striping out the checkmark from features that are not included in this package.
  5. Product Data > Subscription Price: Set to $0.
  6. Product Data > Mark as verified?: Disabled.
  7. Product Data Use for Claim?: Disabled.
  8. Product Data Disable repeat purchase?: Enabled.
  9. Product Data Linked Products > Upsells: Selectedall of our higher-priced packages.
  10. Clicked Publish.

WooCommerce Grouped Products

We want to provide a seamless way for customers to switch (upgrade/downgrade) Listing Subscriptions, as their needs and/or budgets change.

To accomplish this, we set up a WooCommerce Grouped Product that will include all of the Listing Subscriptions that belong together. 

In our case, we have 3 Listing Subscription packages for those that want to create a Dog listing.

So, to provide our customers with a seamless upgrade/downgrade of subscriptions, we placed all 3 of those Listing Subscriptions under a Grouped Product.

Dog Grouped Product

This is our grouped product that will “group” all of the Listing Subscriptions applying to our Dog Listing Type.

  1. Products: Added new.
  2. Product Name: Gave it a name of “Dog Subscriptions”.
  3. Product Data: Chose Grouped product.
  4. Product Data > Linked Products: Added all 3 of our Listing Subscriptions for the Dog Listing Type.
  5. Publish > Catalog Visibility: Hidden.
  6. Clicked Publish.

Promotion Package (Standard)

  1. Products:  Added New.
  2. Product Name: Gave it a name of “Bronze Promotion”.
  3. Product Data: Set to Promotion Package.
  4. Product Data > General > Regular Price: Set to $5.
  5. Product Data > General > Promotion duration (in days): Set to 30.
  6. Product Data Linked Products > Upsells: Selected all of our higher-priced packages.
  7. Clicked Publish.

Promotion Package (Premium)

  1. Products:  Added New.
  2. Product Name: Gave it a name of “Premium Promotion”.
  3. Product Data: Set to Promotion Package.
  4. Product Data > General > Regular Price: Set to $10.
  5. Product Data > General > Promotion duration (in days): Set to 30.
  6. Product Data > General > Promotion priority: Set to 3. (Note: Promotion packages default to a value of “2”, which places them above Featured Listings. By setting our Premium Promotions to a value of “3”, we are putting them above our Standard Promotions. In short, the higher the value…the higher the priority.).
  7. Product Data Linked Products > Upsells: Selected all of our higher-priced packages.
  8. Clicked Publish.

Promotion Package (Elite)

  1. Products:  Added New.
  2. Product Name: Gave it a name of “Elite Promotion”.
  3. Product Data: Set to Promotion Package.
  4. Product Data > General > Regular Price: Set to $15.
  5. Product Data > General > Promotion duration (in days): Set to 30.
  6. Product Data > General > Promotion priority: Set to 4. (Note: Promotion packages default to a value of “2”, which places them above Featured Listings. By setting our Elite Promotions to a value of “4”, we are putting them above our Standard and Premium Promotions. In short, the higher the value…the higher the priority.).
  7. Clicked Publish.

Listing Types

We’ll be building a Listing Type for Dogs. If we don’t specifically mention an item, that means we didn’t adjust it from its default setting.

Before we get started on our first Listing Type, we like to put a limit on the number of Listing Type Revisions.

Listing Type Revisions

Listing Type Revisions is an awesome feature, but every time you click “update” on your Listing Type, a revision is created, and MyListing will store up to 15 versions of each Listing Type.

Some may have an interest in keeping their database just a bit further in check, and for those people, we have written a FREE, Optimize Listing Type Revisions for MyListing guide.

Note: Listing Type revisions are different from Post Revisions, which can normally be limited or cleaned up using code snippets or plugins.

Listing Types > General > General

  1. Icon: We chose an icon that best represented our Listing Type, which in this case was a dog’s silhouette.
  2. Singular Name: Dog.
  3. Plural Name: Dogs.
  4. Default Logo: Added our default Logo.
  5. Default Cover Image: Added our default Cover Image.
  6. Clicked Update.

Listing Types > General > Packages

From the list of packages, we choose our Basic, Standard, and Premium packages.

We like to do a bit of styling around our Package names, so, after the packages are added to the Listing Type, we edit each package and drop in something similar to what’s shown in the screenshot below.

To break this down, we are adding color to the website/business name portion of the package title (e.g. “PetFinders”), and putting the actual plan name (e.g. “Basic”) on its own line below our website/business name.

The image below shows a before and after, from applying our custom package names.

Listing Types > Fields

We like to educate users as much as possible during the Submit Form process and we do this by using the Description area of select fields.

Using this area, we can not only give guidance, but we can also link out to more information or give them a link (e.g. mailto:[email protected]) to make a request, report bugs, etc.

We’ve listed an example Description below, that comes from our Cover Image field.

Listing Types > Fields > Descriptions

Title

Note: In 52 characters or less, add a Title to help draw attention to or identify a product, a business, or a brand. Include any of your keywords if they fit naturally, as this is good for SEO (Search Engine Optimization).”

Tagline

Note: In 68 characters or less, add a Tagline to help draw attention to or identify a product, a business, or a brand. Include any of your remaining keywords if they fit naturally, as this is good for SEO (Search Engine Optimization).”

Description

Note: Using a minimum of 120 characters, add a Description to highlight a product, a business, or a brand. Include any of your remaining keywords if they fit naturally. as this is good for SEO (Search Engine Optimization).”

Category

Note: If your Category isn’t listed, please select any Category to get started and let us know of any Categories we can add to the platform for you.”

Tags

Note: If your Tag isn’t listed, please select any Tag(s) to get started and let us know of any Tag(s) we can add to the platform for you.”

Phone Number

Note: Each listing has Click-to-call functionality and your phone number will also be displayed as text. It’s important to list your phone number accurately and consistently across all online platforms, for SEO (Search Engine Optimization).”

Region

Note: If your Region isn’t listed, please select any Region to get started and let us know of any Regions we can add to the platform for you.”

Location

Note: This is only required if you wish to be located on the map and/or provide driving directions.”

Contact Email

Note: This is only required if you wish to have email sent to an address other than the address you used when creating your PetFinders account.”

Website

Note: Please enter your website, without the “http://” or “https://” portion. We will add that for you automatically.”

Logo

Note: Upload that perfect photo of Fido. Photos must be 600KB or smaller and for best results, should have square dimensions and be at least 160 × 160 pixels.”

Gallery Images

Note: Your image gallery also serves as your cover image, when viewing your full listing page, so it’s important for your images to be high-quality. Please upload images (Up to 6) that are 600KB or smaller and for best results, gallery images should be 1980 x 594 pixels and have a landscape orientation (i.e. wider than taller). If gallery images are not added, we will apply a default cover image with our branding. Let us know if we can help in this area.”

Video URL

Note: You can upload a video to services like YouTube or Vimeo and paste the link here. Let us know if we can help in this area.”

Calendly Booking Profile

Note: If you use Calendly to book appointments or would like to start, you can enter your profile link here. Calendly offers a FREE account to get started.”

Fields

Note: While we don’t mention it for each field, we append “REQUIRED” to each field label when the field is required, along with some CSS to make it stand out.

Listing Types > Fields > Fields

Note: While we don’t mention it for each field, we…

  • Remove all of the icons from our fields.
  • Set package visibility for particular fields, by matching what’s included in each of our packages.
  • Append “REQUIRED” to each field label when the field is required, along with some CSS to make it stand out.
  1. Added a Form Heading named “Dog Profile”, and chose the dog icon. (Note: By default, MyListing will show a Form Heading labeled “General”. While we hide this using CSS, we want to add in Form Heading that makes sense for the particular website.).
  2. Title: Edited the field to set a max character length of 52, added a placeholder, and field description.
  3. Tagline: Added the field, set a max character length of 68, added a placeholder, and field description. (Note: We set this the character limit to keep the Tagline on a single line.).
  4. Description: Added the field, set the field type to “Textarea”, set a minimum character length of 120, and added a field description.
  5. Category: Added the field, field description, and set the Template to Term Select since a Dog will just be in one Category.
  6. Adoption Fee: Added a Radio Buttons field, changed the label to “Adoption Fee”, and added the options.
  7. Logo: Added the field, changed the label to “Dog Photo”, and added a description.
  8. Gallery Images: Added the field, changed the label to “Image Gallery”, set the Maximum number of uploads to 6, and added a description.
  9. Video URL > Added the field, changed the Label to “Introduction Video”, added “e.g. https://youtu.be/xyz” as the placeholder, and added a description.
  10. To complete the “Dog Profile” section, we went on to add fields like “Age”, “Size”, “Color”, etc.
  11. Added a Form Heading named “Organization”, and chose an address book icon.
  12. Name: Added the field.
  13. Phone Number: Added the field, added an “e.g. (111) 222-3333” placeholder, and a description.
  14. Contact Email: Added the field and description to let the user know this field is only needed if the emails need to go to someone other than the email used to create their PetFinders account. (Note: We explain listing email correspondence further, throughout this guide.).
  15. Website: Added a text field, gave it a label of “Website”, added a description, and an “e.g. dogsaregreat.com” placeholder. We then saved/updated our Listing Type, went back into this field, and changed the key from “website” to “website-custom”.  (Note: What this does is allows us to add a Website field where the user doesn’t have to enter “https://” or “http://” when filling out their listing. For the Single Page config, we automatically place “https://” in front of the domain, using that as a prefix before the field value.).
  16. Social Networks: Added the field.
  17. Region: Added the field, changed the Template to Term Hierarchy and made it required.
  18. Location: Added the field, added “Start Typing Address…” as the placeholder, added our default Latitude/Longitude coordinates (the center of the US), and set the Map Skin to Light.
  19. Work Hours: Added the field and changed the label to “Open Hours”.
  20. Calendly Booking Profile: Added the field, set a placeholder, and added a description.
  21. Related Listing: Added the field, selected “Dogs” for the Related to:
  22. Tags: Added the field, field description, and changed the Template to Term Checklist.

Listing Types > Single Page

Single Page > Cover Style > Cover Background

We set this to Gallery Slider, so website users could quickly see a view photos of each dog.

By default, the Gallery cover does not display navigation arrows, so we add those in with some CSS.

Tip: We have a FREE, Gallery Navigation Arrows code snippet to apply the same CSS as we did.

Single Page > Cover Details > Call-to-Action

To keep the Cover Image “clean”, we didn’t do much here other than add the Claim Listing action and remove its icon.

We also edited the default “verified badge” image to match the overall branding, replacing the blue color (#00BCEF) with our branding (#6c62fb).

Tip: We have written a FREE, Change the Color of the Verified Listings Badge guide.

Single Page > Quick Actions

If you don’t do anything here, MyListing will add it’s own default set of Quick Actions.

As soon as you add even a single Quick Action of your own choosing, all of the default Quick Actions go away. 

We added our desired Quick Actions, changed some labels, icons, etc., and added some custom CSS also to make them stand out.

Of special note, is our Website Quick Action.

As mentioned previously, we do something a little different with our Website field.

So here, we added a Custom Action, assigned the desired icon, labeled it “Visit Website”, and dropped in the link value which is our “custom-link” key.

Single Page > Content & Tabs > Profile

To show the details of each dog, we added the preset Profile tab, set a label of “Dog Profile”, and set it to 2-column. 

For the Gallery block, we found that Carousel with Image Preview was the best option to combat times when a listing owner my upload 2 images or less.

We added CSS to round the corners of our Single Listing blocks, however the Carousel with Image Preview option still left the top of Image Preview with square corners, so we used additional CSS to round those corners.

More CSS was used to style the icons for the terms (categories, tags, etc.) so that we’re only showing the icon itself and no circular background.

Single Page > Content & Tabs > Organization

To show the details of each organization, we added a custom preset tab, set a label of “Organization”, and set it to 2-column. 

Some of our blocks have some custom content added to the “content” area of each block and we are showing some of those below.

For our Region block, we took a vector of the US map, pulled out each individual state, and created a custom icon.

So, whenever someone refers to a region (city), we will display the corresponding State icon.

For our contact forms, we do something a little different, in that we Replace Contact Form 7 with Elementor Pro.

Single Page > Content & Tabs > Related Listings

Added the preset tab for Related Listings, set a label of “Related Listings”, and selected the Related Listing Field from the drop-down.

Preview Card > Preview Card

  1. Design > Template: Set to Alternate.
  2. Design > Background: Set to Gallery.
  3. Footer Sections: Added the Terms section, selected the Categories term, enabled the Bookmark, and Quick View buttons.

Preview Card > Quick View

Design > Template > Map Skin: Set to Light.

Search Forms > Advanced Form

  1. Added a Dropdown filter, set a label of “Region”, selected the Region field, and added a placeholder of “Select…”.
  2. Added the Location filter and added a placeholder of “Start typing address…”.
  3. Added the Proximity filter and set units to Miles.
  4. Added a Checkboxes filter, set a label of “Organization”, and selected the Tags field.
  5. Added many other Checkboxes filters for our various Terms and configured the settings (order, select/multi-select, etc.) as needed.
  6. Added a Dropdown filter for our “Color” field since there were many options, and configured the settings (order, select/multi-select, etc.) as needed.
  7. Finished off the form by adding the General Search Box, setting a label of “General Search”, and adding a placeholder of “Enter keywords…”.

Explore Page Design

Here are just some of our design edits.

Explore Page > Filters Tab

  • Field Titles: Adjusted for better appearance and so all sizes were uniform.
  • Button: Background (gradient), rounded, and text.
  • Checkboxes: Color, dashed outline and set to 50% width in order to fit 2 items per line.
  • Preview Cards: Rounded and changed the color of the verified badge to match our branding.

Explore Page > Categories Tab

  • Images: Uploaded grayscale images, rounded the corners, and applied a solid overlay color using the 27 > Explore Listings widget.
  • Button: Rounded.

Add Listing Page

This is one of the core pages of MyListing and it’s called upon whenever someone goes to add a new listing, hence the name.

What many people do know or don’t take advantage of, is the fact that this page doesn’t have to be used on the front end.

We create a custom page using Elementor Pro, that is front-facing for users.

The core Add Listing page, will still be there doing its thing, but it will just sit in the background.

So, with the assumption that we’re going to create a custom, front-facing Add Listing page, we just do the basics here.

Here is a video showing how we configured our core Add Listing page.

Note: As we mentioned above in the Navigation Design section, we are not using the typical setup where you would enable and configure the Call to Action button from the Theme Tools > Theme Options > Header area.

Add Listing Page (Custom)

This is the custom Add Listing page we mentioned in the previous section.

We want to create a beautiful front-facing page, where customers can select their desired Listing Type.

  1. WordPress > Pages > New: Created a page named “Choose Listing Type”.
  2. Edited the page with Elementor.
  3. Added Elementor Pro Call to Action (CTA) widgets for each Listing Type.
  4. Configured each CTA to point to its particular Listing Type.
  5. Styled each CTA.
  6. Published the page.

How It Works Page

Our How It Works page serves as an educational page, walking potential customers through the Listing process

As part of each step, we include CTA (call-to-action) buttons, that not only lead to more information but also kickstart people towards their sales journey.

We want people to understand exactly what it is they are getting, how to get it, and our policies governing the website.

The page has been designed to match the brand and maintain consistency while showing screenshots of actual processes, features, etc.

Of special note, is our Learn About Promotions slide-out, that is an Elementor Pro Popup, triggered by a button.

Within the Popup we do some educating around the different Listing Priority Levels, how to promote, etc.

See the How It Works page in action.

Listing 101 Page

Our Listing 101 page serves as an educational page, walking potential customers through each line item (e.g. feature) of a Listing Package, as well as the Listing Fields available.

The page has been designed to match the brand and maintain consistency while showing screenshots of actual processes, features, etc.

Of special note is the accordion design, which was done with Crocoblock’s JetTabs plugin, using their Accordion widget.

See the Listing Features page in action.

Listing 101 > Listing Features

We include links that not only show the actual feature in use throughout the website but how to obtain certain services such as Calendly booking.

Listing 101 > Listing Fields

We break down each of the fields that are possible within the listings, while providence guidance and tips.

Support Page

Our Support not only serves as an educational page, that covers areas like Frequently Asked Questions, Membership Features, etc., but it also gives users a quick way to get in touch with us for help.

The page has been designed to match the brand and maintain consistency while showing screenshots of actual processes, features, etc.

Of special note is the accordion design, which was done with Crocoblock’s JetTabs plugin, using their Accordion widget.

See the Support page in action.

Get Started Page

This is a custom, front-facing page that sits in front of our custom Add Listing page.

Our Get Started page serves as an educational page and also gives users a chance to claim a listing of theirs that we may have already added.

We created the page using Elementor Pro, MyListing, and some CSS.

Looking top-down on the page, we added a heading, columns, CTA widgets, MyListing’s Quick Search shortcode, and a button.

For the Quick Search, we only wanted to return listings, so we added code snippets to filter out Categories, Regions, and Tags.

See the Get Started page in action and get access to our Get Started page template.

Note: As we mentioned above in the Navigation Design section, we are adding this Get Started page to our Off-Canvas menu.

Home Page

There are a ton of ways to build out a Home page, especially for MyListing websites.

How many feeds do we want? Are we going to provide search widgets? Should we show a map with our listing locations?

We like to keep this page lightweight since it is often the first impression visitors will have on our website.

Ample white space is incorporated and we give content plenty of room to breathe.

Home Page > Landing / Above The Fold

This section of our Home page is set to full screen, to limit distractions and provide a clear CTA (Call-to-action).

We use a beautiful, crisp image that applies to our subject matter, and sets the tone for our intended audience. 

We are clearly stating the brand/company name, the purpose of the website (e.g. “find a new best friend”), and providing a way (e.g. CTA) for visitors to easily hit the ground running.

  1. WordPress > Pages: Edited our Home page with Elementor.
  2. Using Elementor’s import feature, we imported our Coming Soon template since it already had most of the elements (background image, Heading, subheading, etc.) we wanted to use for the above the fold area of our page. (Note: When you also choose to import the Document Settings, Elementor will pull in elements like your Page Layout.).
  3. We then removed our email capture form and countdown widgets, as those will not be needed.

Home Page > Newest Listings

In this section, we want to show the newest listings for a particular Listing Type, Category, Region, etc.

If we were fully building out this website for a real business, we could have additional Listing Feeds for other pet types, pets by region, organizations by region, etc.

  1. Using Elementor, we create a new, 1-column section below our Landing / Above The Fold section, and set the section to have a minimum height of 70vh.
  2. We then add the 27 > Listing Feed widget to the section and choose to filter by Listing Type.
  3. Under the Listing Feed, we add a CTA button to search for all new listings under this particular Listing Type.
  4. For the URL of the button, we add “https://starter1.mylisting.club/search/?type=dogs&sort=latest”, which will pull up our Search (i.e. Explore) page and automatically populate the Latest entries for the “Dog” Listing Type.

Home Page > Education

In this section, we want to provide some CTAs to educate users to help them have a better experience with our website and the processes surrounding it.

  1. Using Elementor, we create a new, 3- column section below our Newest Listings section, and set the section to have a minimum height of 70vh.
  2. We then add an Elementor Pro CTA widget to the first column and fully style it.
  3. Once we are happy with our CTA styling, we duplicate it twice and move the duplicated CTAs to each of the other columns.

Home Page > Customer CTA

In this section, we want to provide a CTA for the customers, which in this case is organizations with pets that are up for adoption.

  1. Using Elementor, we create a new, 2- column section below our Education section, using a 60%/40% column structure, and set the section to have a minimum height of 70vh.
  2. We leave the left column (i.e. the 60% width column) alone, but in the 40% column, we add a heading and a CTA for the customer to get started with adding their listings.
  3. For the background, we added a black and white image, and set it to Fixed, to create a Parallax effect.

Home Page > Feaured Customer

In this section, we want to showcase a particular customer. Customers could be featured for a number of reasons. Maybe they paid for a higher-priced package, maybe they paid for a one-off custom product or both.

  1. Using Elementor, we create a new, 3- column section below our Customer CTA section, using a 33%/33%/33% column structure, and set the section to have a minimum height of 70vh.
  2. In the left column, we set it to 45%, added a heading, some text, and a CTA to visit the customer’s website.
  3. For second from the left column, we set it to 25%, added an Elementor Spacer widget set to 7oopx, added a background image, and adjust the background image settings so the image was properly positioned.
  4. For the final column, we set it to 30%, added an Elementor Spacer widget set to 7oopx, added a background image, adjust the bottom margin so the image had a shorter height compared to the image next to it, and then adjusted the background image settings so the image was properly positioned.

Note: When you add a background image to a column, you need to add some content to the column so the image will appear. An easy way to do this is to add an Elementor Spacer widget.

DEMO Listings

We like to use DEMO listings as a way to show current and potential customers what’s possible.

As an added bonus, we can use them to see how we’re progressing with our Listing Type builds.

Create DEMO Listing

We want to fill in every field to see how everything looks on the front end and to show customers all of the options.

Instead of commenting on every field here, we focused on some specific areas.

  1. Listings: Added New.
  2. Add Title: Entered the name of “Charlotte [DEMO]”.
  3. Listing Type: Dog.
  4. Clicked Save Draft to unlock the available fields but not yet publish the listing.
  5. Category: Chose the “Chocolate Labrador Retriever” child category.
  6. Logo (Dog Photo): Uploaded a custom image. (Note: Make sure you also test the listing with the default Logo in place.).
  7. Image Gallery: Uploaded a custom image. (Note: Make sure you also test the listing with the default Cover Image in place.).
  8. Introduction Video: Linked to a random Chocolate Labrador Retriever video on YouTube.
  9. Verification Status: Marked the listing as Verified, so users could see what that looks like.
  10. Listing Author: Set this to our Editor account. (Note: This allows the Claim Listing button to still be visible on the listing since the Editor account was not the actual creator of the listing.).
  11. Published the listing.

Once our second DEMO listing is in place, we link the two DEMOs together, using the Related Listing field within each listing.

From a DEMO standpoint, this shows potential customers what’s possible.

Lock Down DEMO Listings

While we want to show the Claim Listing button, we don’t want anyone to have the ability to actually claim the listing.

So, we add some CSS that prevents viewers from being able to click the Claim Listing button.

To do this, we start by identifying the Post IDs of each DEMO listing.

This is done right-clicking on each listing in a browser and choosing “Inspect”.

Note: The Post ID is located near the top of the Inspect window. 

With the IDs in hand, we use the CSS below that targets only those IDs, setting pointer-events to “none” for the Claim Listing button.

.postid-226 .lmb-calltoaction>a {pointer-events:none;}

Note: This CSS will block all Cover actions for any DEMO listings you apply the snippet to. Just something to keep in mind.

MyListing - Choose a Package

As part of the Add Listing phase, users must select their desired package.

The Choose a Package page is built outside of Elementor, so customization options are limited unless you want to get your hands dirty with CSS or you want to hire a developer.

Page Heading

For this project, we’ll be using WooCommerce Subscriptions and all of our packages will be subscription-based.

We use Loco Translate to change “Choose a Package” to “Sign Up. Sign In. Submit Listings.” and that’s because “Choose a Package” is also displayed on the Sign In/Register modal, which doesn’t make much sense.

So, we needed to come up with some wording that would make sense across both areas.

Plan Price

Depending on the client, we’ll change packages that have no cost, to read “FREE”, rather than $0, but for this particular project, we just went with $0.

If you prefer to display “FREE” instead of “$0”, be sure to grab the Change $0 to FREE code snippet.

Plan Features

For this project, we chose to have our pricing tables show the exact same line items (i.e. features), but show a clear indication of when a feature is or isn’t included, using colored checkmarks and bolded text.

Tip: Club members can grab our MyCity Charlotte Listing Products Package, which includes all of the Plan Features pre-configured, in terms of HTML and CSS.

Learn More About What's Included

Below our pricing plan features, we like to include a prominent link that links out to a page where all of the plan features are broken down in greater detail.

We style our link by prepending an information icon, bolding the text, and adding an underline decoration.

Since the link color is already defined in our CSS, that gets picked up automatically.

Tip: Club members can grab our MyCity Charlotte Listing Products Package, which includes the Learn More link, pre-configured, in terms of HTML and CSS.

Buttons

MyListing will display all of the Choose a Package buttons as “Buy Package”, even if the package has no cost.

Since it’s a bit odd to have a “Buy Package” button for a FREE listing, we use our Change Package Selection Button Text code snippet to not only change “Buy Package” to “FREE”, but to also include the same arrow icon.

Single Listing Sharing

We like to do more around the sharing option, in terms of design and functionality.

For the design, we apply some CSS to give it more of a modern and clean look.

For the functionality, we edit the sharer.php file in order to remove some sharing options that we don’t want.

As an example, the file includes Google Plus, which has been shut down by Google.

Also, as part of editing sharer.php, we address the email sharing option and the results are highlighted below.

  • Subject: “I would like to share a listing from MyListing Club”.
  • Body Text: “Hello. I thought you might be interested in this listing.”.
  • Body Link: The link referenced in the Body Text, is included, and links to the actual listing.

Tip: Club members can grab our Listing Sharing Options for MyLising guide for a more in-depth look at styling Listing Sharing options.

WooCommerce Endpoint Design

Out of the box, the endpoints have some random coloring, icons, etc, applied by the theme, and we like to keep branding and consistency throughout the entire design, so we went through every endpoint element.

We use Loco Translate to “translate” WooCommerce and clean up some of the verbiage and we apply CSS to maintain our custom look across the entire website.

Tip: We have written a FREE, How to Use Loco Translate with MyListing guide.

Dashboard (/my-account/)

We apply some CSS to remove the box icons and style the section icons.

We also adjust the box colors by going to Theme Tools > Listing Stats > Color Pallete.

For a lot of our projects, to get our box colors, we punch our Accent Color into the Hex Color Tool, lightening it by 10% so there is enough of a shade difference.

We then use the top 4 colors, putting our Accent Color into the Color #1 slot.

Then we adjust the graph colors.

For Views series color, we use our Accent Color and for the Unique Views series color, we use our 30% lighter color (Color #4), so there is enough of a shade difference.

For this project, we took it a bit further by mimicking our gradient header…for the boxes.

While Color #1 (our alternate Accent Color) and Color #4 (our Accent Color) were a given, we needed Color #2 and Color #3

For Color #2 we chose a spot on our header that was pretty much right above the Pending Listings box and captured what that color was.

For Color #3 we chose a spot on our header that was pretty much right above the Active Promotions box and captured what that color was.

To set our chart view colors, we used Color #1 and Color #4, which is nice because they are so contrasting.

My Listings (/my-account/my-listings/)

We added some CSS to round the corners of the listing cards and to put a dashed border around the Listing Type.

Loco Translate was used to change “Your listings” to “Your Listings”.

Note: If you don’t use the logo field with your listings or you do and you don’t specify a default logo within your Listing Type(s), the bookmarked listing cards will pull in marker.jpg (/my-listing/assets/images/marker.jpg).

If you want to set your own default marker.jpg, you can follow the steps below, which prevents future updates of the theme from overwriting your changes.

  1. Create your new marker.jpg file using the same dimensions of the original (60 x 60 px). (Note: You must name your file marker.jpg.).
  2. Duplicate the same folder path in the Child Theme (/my-listing-child/assets/images/).
  3. FTP your new marker.jpg to the directory in the previous step.

Bookmarks (/my-account/my-bookmarks/)

The CSS we added for the My Listings section carried over to this section, as far as rounding the card corners.

Some additional CSS was needed to change/fix the listing title color in this particular section.

For some reason, the title color is reversed from the design of the My Listings area Listing titles.

Promotions (/my-account/my-promotions/)

Promoted Listings

We added some CSS to round corners, show hyperlinks as an actual hyperlink, and to continue on with maintaining a consistent look throughout the website.

Promoted Listing Packages

We added some CSS to round corners, bold the promotion title, and to continue on with maintaining a consistent look throughout the website.

Orders (/my-account/orders/)

We added some CSS to style the button and used Loco Translate to adjust some text.

Account (/my-account/edit-account/)

Since we disable Avatars, we applied some CSS to completely remove the Avatar section of this endpoint.

We also applied some CSS to lighten the social media names, make the text labels stand out, style all of the buttons, etc.

Add Payment (/my-account/add-payment-method/)

We applied quite a bit of CSS to this section. Aside from just wanting to keep a consistent look, there were elements (radio button, credit card icons, etc.) that just aren’t needed. 

Logout (/my-account/customer-logout/)

Using Loco Translate, we changed the “Are you sure you want to log out? Confirm and log out” text to something cleaner/simpler.

We added some CSS to change the color of the checkmark icon, the color of our new text, and to add an underline beneath our new text.

Sign In / Register Modal

We added some CSS to remove some icons, style the buttons, add an underline style to the Privacy Policy link, etc. and used Loco Translate to rename some items.

  • Renamed “Forgot password?” to “Reset Password”.
  • Renamed “Don’t have an account?” to “Create Account”.
  • Renamed “Remember me” to “Save Credentials”.

Forgot Password? (/my-account/lost-password/)

We use Loco Translate to “translate” WooCommerce and clean up some of the verbiage.

Additionally, we apply some CSS to maintain our branding and to fix some spacing issues that WordPress presents.

Using Loco Translate, we remove the “Lost your password?” text, since it’s already part of the form heading and we also use it to modify/simplify the remaining dialog box text.

Cart

CSS is used to style corners, backgrounds, text, etc., as well as to remove unnecessary elements, such as the “Your cart is currently empty” icon.

Below is what we see when we remove the last item from the cart.

We use CSS to round corners and add some needed padding.

Also, it should be really obvious to someone that their cart is empty, so we don’t really need to state that.

We remove the ugly icon and “Your cart is currently empty” text.

If someone happens to visit the Checkout page, when the Cart is empty, they will see a message that is not actionable.

We’re not sure who would ever use the word “whilst”, so we used Loco Translate to change that text, as well as to add a link to the Shop page.

CSS was then used to style the link.

Checkout

CSS was used to style corners, backgrounds, text, etc., as well as to remove unnecessary elements.

We used the WordPress Customizer (Customizer > WooCommerce > Checkout) to remove the Company Name and Phone fields.

Code snippets were used to remove Order Notes/Additional Information.

Checkout > Completed Sale

CSS was used to style the buttons, text, etc. and Loco Translate was used to change some of the wording.

Submit Form Design

We do a number of things related to designing the Submit Form and we’ll mention some of those things here.

All design edits are done by adding some custom CSS.

  • Page Title: We use Loco Translate to change the page title from “Your listing details” to “Your Listing Details”.
  • Border: We create more of an elegant look by rounding the edges and giving them a shadow.
  • Side Navigation: We change the colors/color behavior, text, etc.
  • Text: We adjust the titles, italicize the field descriptions, etc.
  • Input Fields: For fields that ask for text input, we like to make the input area stand out by applying a background color, which makes it easier for users to see where to input their information.
  • Media Input: We remove the image upload size text, color the media upload icon, etc.
  • Buttons: We round the buttons, adjust the text, etc. to match the rest of the website.
  • Preview / Skip Preview Buttons: We round the buttons, adjust the text, etc., as shown below.

Submit Form Design > Preview Listing

Shop Page (Custom)

We wanted to create a beautiful, more flexible, front-facing page, where customers can see the pricing of our products, packages, etc.

  1. Imported our ML Club Store template.
  2. Adjusted the design and elements of the template to fit our needs for this particular website.
  3. Published our template.

Note: The template we imported was already set up to apply to Product Archives (i.e. shop), so there were no extra steps needed there.

Single Product Design

We wanted to make the single product pages more visually appealing.

At first, we looked at implementing a custom Elementor Single Product Template, however, MyListing injects some elements into the pages, like whether or not a package can be purchased again, whether a package is full, etc.

Rather than trying to replicate all of this, we decided to just move forward with applying some design to the existing product templates.

Single Product Design > General

Applied quite a bit of styling CSS to maintain the design consistency we’ve shown throughout the website.

We also used Loco Translate to fix/adjust some of the text.

Here is a video showing the before and after.

Policies

Legal Page

Depending on the website, you will need certain policies to protect your customers, as well as yourself.

We created a single page named “Legal” that holds all of our applicable policies.

You may want to consider separate pages for each of your policies, to be in full compliance, so be sure to do your own due diligence and possibly seek legal advice.

See the PetFinders Legal Page in action.

Legal Footer Presence

We like to put our main policy links in the footer as well, with the intention of getting our policies in front of potential customers in as many, non-annoying ways possible.

Cautionary Tale

We recently watched a client go through a messy payment dispute process and decided to write about the experience, to help others understand the importance of policies.

Tip: Check out our FREE, Keep Your MyListing Website on Stripe’s Good Side guide.

Resources (Blog)

We built out our Resources page using Elementor templates, which provides more functionality and greater flexibility.

Resources > Page > Browse Posts

  1. We created our Resources page and then edited it with Elementor.
  2. For our header, we copied the header elements from our Listing 101 page, which had the look and functionality we wanted.
  3. We changed the header elements (heading, subtext, “navigation bar”, etc.) to match this particular page.
  4. We created a new, 1-column section below our navigation bar, gave it our desired padding, assigned a CSS ID of “browse” to work in conjunction with the “Browse Posts” item in the navigation bar, and then added Elmentor’s Posts widget.
  5. The Posts widget is configured to use “Cards”, the full image size, H2 Title HMTL tag, disable the Avatar, and use Pagination.
  6. For Pagination, we set it to Previous/Next, and add a line break (“
    « Previous”)
    to the “Previous Label” to fix the appearance.
  7. For the design, we imported our MyListing Club – Blog Page template and adjusted the colors to match our branding.

Resources > Page > Search Posts

We built out this section with Crocoblock’s JetSearch plugin, using their Ajax Search widget.

  1. We created a new, 1-column section below our Browse Posts section, set the minimum height to “Fit To Screen”, set a gradient background to match our header, and assigned a CSS ID of “search” to work in conjunction with the “Search Posts” item in the navigation bar.
  2. Then we added a heading and the Ajax Search widget, set our Search Query to “Posts”, and then made a number of other settings adjustments according to personal preference.
  3. For the design, we imported our MyListing Club – Blog Page template and adjusted the colors to match our branding.

Resources > Page > Blog Posts

We built out our Blog Posts using Elementor templates, which provide more functionality and greater flexibility.

  1. Templates > Add New.
  1. Chose our desired, pre-made Elementor template, clicked “Publish”, and accepted the default Display Conditions settings (i.e. apply this template to all posts.).
  2. Adjusted the template to match our branding.
  3. Published.

404 Page

We wanted to create a page, that not only helps people navigate away from bad URLs, but also injects a little bit of humor.

For that humor, we used an image of a dog with a tilted head (i.e. perplexed look) and a funny phrase from a childhood cartoon…Scooby-Doo.

Using Elementor Pro we created a new template that will, in turn, be our 404 template.

  • Templates: Add New.
  • Template Type: Single.
  • Post Type: 404 Page.
  • Template Name: 404 Page.
  • Created our page by including some 404-related text to show the user they have arrived at a bad URL, added a cute/humorous image and added a button to navigate back to the Home page.

Front-facing Pricing Page

This page is important to show people the cost of adding listings before they start down the Add Listing road.

After we designed our Pricing page, we simply dropped in the 27 > Package Selection Elementor widget and pulled up the packages that we already had configured.

When we dropped in the widget mentioned above, it automatically created buttons titled “Select Plan”, which then link to the non-front-facing pricing tables.

This is redundant and doesn’t look good.

So, to combat that, we used Loco Translate to change the button text from “Select Plan” to “Get Started”, and set the buttons to link to our “Get Started” page.

Elementor Notes

Here are some miscellaneous settings that help make MyListing work better.

  • Elementor > Settings > Style: Uncheck Image Lightbox, since MyListing is already handling this functionality.

Test. Test. Test.

Test everything and we mean EVERYTHING.

MyListing

  • Listing Submissions
  • Listing Contact Forms
  • Claims Process
  • Switch Subscription Plans
  • Map Services
  • Social Login

Grammar and Spelling

Use a tool like Grammarly to ensure your grammar and spelling is on point because one of the quickest ways to seem unprofessional is to sound and look unprofessional.

Mobile Design

Run through every bit of your content on as many mobile devices as you have access to.

Also, from your desktop you can use Chrome, Firefox, etc., to view your website using the various media queries (i.e. device sizes).

Forms

Make sure your forms (general contact forms, order forms, etc.) are sending and receiving.

For any forms that users receive, make sure they are formatted beautifully and contain the necessary information.

If you use a newsletter sign up form/service, test the subscription process as well as any email onboarding sequence you have in place.

Links

Make sure all of your links are functioning and pointing to the correct place.

If you happen to use SEOPress Pro, it includes a Broken Link Checker as well as a URL Redirection correction and monitoring tool.

Google Search Console can also tell you which links are broken, but it’s better to be out in front of it.

Optimization

Run all the critical pages of your website through a tool like GTMetrix and try to identify any areas where you could approve upon.

Your website not only needs to be fast for the best user experience but for SEO (Search Engine Optimization) as well.

If you’re not comfortable doing this yourself, we are more than happy to assist, and we recommend starting by posting to the MyListing Club Facebook group for potential FREE advice.

We are also available to help under our paid Website Support services.

Online Presence

For your On-Page SEO, use a plugin like SEOPress Pro, to make sure your pages and posts are optimized.

For Off-Page SEO, make sure you have a presence in the Social Media Networks that make sense for your business.

Make sure your branding and critical business information are consistent across everything.

Google Analytics

Make sure your website is tracking everything that is important to your business, whether it’s simply user traffic or something more complex like a sales funnels, user journey, etc.

Let's empower others. Share the knowledge.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Scroll to Top

Find a bug or typo? Please let us know.