How to Add Educational Features to MyListing’s Listing Promotions Flow
Building better MyListing websites. One guide at a time.
Table of Contents
Overview
The Problem
When running through user testing one thing that often came up was confusion over Listing Promotions.
“What does that ‘Promote’ icon do?” “What does it mean to Promote my Listing?”
Sure, we can and do have an educational page (e.g. Listing 101, Platform 1o1, etc.) where we cover what Listing Promotions are and how they work, but what if the customer has yet to visit that page and becomes curious about that darn ‘Promote’ icon starring back at them?
We need a solution that educates customers while they are in the middle of discovering what the heck something is, which in this case is Listing Promotions.
The Solution
We thought we would use Loco Translate as we often do, to inject a link into the Promotions modal, and while that “worked”, it was super clunky and not the right way to do it.
In the end, we rolled up our sleeves, edited a theme file to inject a link, and then applied a bit of CSS.
Implement the Solution
Theme File
- Install and activate the MyListing Child Theme if you haven’t already.
- Using your preferred FTP application (ex. FileZilla), connect to your server. (Note: You can also use any of the Free ‘File Manager’ plugins from the WordPress repository, but we always recommend editing files using FTP just in case something goes wrong.).
- Once connected, browse to wp-content/themes/my-listing/templates/dashboard/promotions.
- Copy the ‘choose-promotion.php’ file down to your workstation.
- Edit the file using your preferred code/text editor.
- Starting at line 94, add in the code shown below, adjusting the domain to match your own, and adjusting the educational page to be your own.
<span class="learn-about-promtions">
<?php Echo "<a href=https://your-domain/platform-101/#listing-promotions>Learn More About Listing Promotions</a>" ?>
</span>
In the screenshot below, we are showing what lines 90-100 look like for our MyListing website, just so you have something to compare against.
- Save the changes to your file.
- Using FTP, browse to to wp-content/themes/my-listing-child.
- Replicate the same file structure from step #3, so that in the end you have a path of wp-content/themes/my-listing-child/templates/dashboard/promotions.
- Copy your adjusted file that you saved in step #7, to the path in step #9.
In summary, at this point, you have added your custom ‘choose-promotion.php’ file to your child theme where it will be protected from future theme updates.
Now it’s time to apply some CSS to give your injected link a bit of design so it looks nice when customers notice it.
CSS
- Copy the CSS below and paste it in the area of your WordPress Dashboard where you like to add your CSS.
- Adjust the CSS to your liking.
- Save your changes.
.learn-about-promtions a {
color: #000;
transition: box-shadow .35s ease-in-out;
padding-left: 2px;
padding-right: 2px;
box-shadow: inset 0 -0.6em 0 -3px #56bdaa61;
letter-spacing: 1px;
font-size: 14px;
}
.learn-about-promtions a:hover {
box-shadow: inset 0 -1em 0 #56bdaa61;
}
The Outcome
Be sure to check out our video, to see how we did this and to see everything in action.
