+1-757-461-3022 x124

Designing and Building a Marketing Oriented Homepage with xTupleCommerce

Out of the box, the xTupleCommerce homepage offers the ability to build a very flexible and unique customer experience. I typically use a metaphor when explaining a website's (or web portal's) homepage. The homepage is like the parking lot at a National Park. The people that land there know what they want to accomplish in this “Park.” The homepage serves as a series of “trailheads” that will help them navigate to where they want to go. It’s your job to make those "trailheads" obvious and attractive. You want the user to quickly identify the information they are looking for and start down their “trail” towards conversion. 

The xTupleCommerce homepage is constructed of modular collections of different promo content types. Each promo is created separately, then the nodequeue tool is used to arrange the order of the promos. The system is flexible and gives the manager of the web portal control over the promos that they create. For instance, when adding a grid of images with teaser content, the manager can choose how many columns and rows the grid will have. In some cases, one row of four promos is sufficient. In other, more complex situations, three rows of three promos provides the right solution. A developer is not needed for making the layout of the homepage. Everything is handled through several easy-to-use tools that manager can access in the backend of xTupleCommerce.

Below, I go into detail about the steps to designing, building and arranging the promos on your xTupleCommerce homepage. I also touch on marketing strategy and how to think about the content on your homepage for optimizing Google search engine results.

Designing your homepage

Before getting started on your xTupleCommerce system, I highly recommend sitting down with a blank piece of paper and sketching out plans for how to arrange your homepage. There is software, such as Balsamiq, that can be used for rapid prototyping. But a piece of paper and some creative thinking will get the job done. 

Start to develop a plan for the various pieces of content that you want to reference on the homepage. Identify topics that you want to highlight or information that you know customers will find helpful. Additionally, think strategically about how to introduce the content. Which topics should be displayed together? What information should be seen first? What is best at the bottom of the page?

For instance, you may start with three carousel slides at the top of the page. Think through what content will be included and which images you’ll use. Then, you may decide to include a row of four image teasers. What will they represent? What imagery should they include? Where will the calls to action (CTA) lead the user?

Once you have a plan for the content, go ahead and type out the content and gather the images/graphics that you will need. It will save you a lot of frustration if you get all these elements ready before you begin building the promos.

Creating Promos on xTupleCommerce

Once you have your design plans ready, content written, and images gathered, you are ready to login to xTupleCommerce and begin building the promos. 

You’ll see that in the Admin > Content > Add Content area there are individual content types for each of the Promos.

They include:

  • Promo: Carousel
  • Promo: Grid
  • Promo: Icon
  • Promo: Teaser

Let’s go into further detail about each of these content types.

Promo: Carousel

The carousel promo is the commonly seen slideshow displayed at the top of homepages. They typically include up to four slides that rotate every few seconds. The carousel includes a large, browser-wide image along with some enticing text that “teases” the reader with information. The user can manually slide through the carousel or watch it as it updates automatically. Naturally, this carousel is the first thing that site visitors see when they load your homepage, so it makes for great real estate for very important information. For example, you can use it to highlight new products, recent accomplishments, or upcoming sales. 

Fields with definitions

Let's review the fields on the promo carousel content type. Keep in mind that the only required field is the Administrative title. You can certainly create promos with just any combination of the remaining fields. Again, the system is very flexible.

Administrative Title - This is the title you give the promo to help you manage your content and stay organized. The public will not see the administrative title.

Image - This is the image that will appear in the background.

Title - This is the large text that will appear in your carousel. You want to ensure this title is not too long, otherwise it will run off the bottom of the carousel image.

Text - This is the body of text that appears under the title.

Call to Action (CTA) Text - This is the text that will appear inside the call to action (CTA) button.

URL - The URL that the user will go to once they click on your promo. This URL is used on the CTA button, the image and the title of the promo.

Dark Background - If your image is a light image you can choose to include a slightly transparent, dark background behind your text. This will help your text stand out from the picture. 

Text:  Left or Right - You can choose if the text will appear on the left, center or right side of the carousel.

Promo: Teaser

The teaser promo is a good option for highlighting a large photo or graphic along with a significant amount of text. 

Additionally, if you choose not to include an image, the text will expand to be the full width across the browser. This is great if you have a very important note that you want customers to see, such as a large testimonial or an announcement about a major achievement that your team has accomplished.

Like the other promos, only the Administrative title field is required. You can mix and match the rest of the fields to create the right experience for your customers. 

Administrative Title - This is the title you give the promo to help you manage your content and stay organized. The public will not see this.

Title - This is the title that will appear next to your image. This is the “headline” that will grab the attention of the customer. It’s important that it offers enough information to grab someone's attention, but not so much that customers aren’t motivated to read more.

Text - This is the body of the teaser. Remember that your goal is to get the customer to take some kind of action. It’s best to write enticing content for your teaser but leave a little to be desired. Then, prompt the user to take action. Perhaps you want to lead them to a new page, or ask them to sign up for an email newsletter. Keep this information concise and easy to read.

Image - This is the image that appears to the left or right of the content. Ensure that this image is appealing. You want to grab the attention of the customer as they scroll down the page.

Image Position: Left or Right - You are able to set the location of the images on the left or right of the text. 

Call to Action (CTA) Text - This is the text that will appear inside the CTA button.

URL - The URL that the user will go to once they click on your promo. This URL is used on the CTA button, the image and the title of the promo.

Bonus: Sidebar Teaser (created using the Promo: Teaser)

The sidebar promo is a small teaser that appears in the sidebar of interior pages. This promo is created using teaser promo content type. Typically this simply includes a picture with a CTA. The user can click on the image to be directed to a new page. With xTupleCommerce, you aren’t limited to images though. You could create a sidebar teaser promo that includes any of or all the fields.

This promo comes in handy when you are trying to get your user’s attention once they have journeyed into the pages of your web portal. Perhaps you want to advertise the option to sign up for the email newsletter to receive a coupon or you want to highlight a new product. 

The sidebar promo, once created, is added to the interior sidebars using the nodequeue tool. More on that later.

Promo: Grid

This promo builds a grid of smaller promos. You can arrange a row or multiple rows of brief teasers, each with their own unique title, image, text and link. Additionally, you have control over how many items are in each row (we recommend three or four) and the number of rows that will appear. 

The grid promo content type is great for including a high quality photo, a five to eight word teaser and a call to action. 

Again, like the other promos, only the Administrative title field is required. You could simply build a grid of images, each with their own link, or you could create a grid of titles each with their own link. You have the flexibility to be creative.

Notice that as you begin creating the individual promos within the grid, you will see the crosshair to the left of the teasers. With this tool you can drag and drop the teasers into which ever order you like.

Number of Columns - You can choose how many columns should be in your grid. 

Administrative Title - This is the title you give the promo to help you manage your content and stay organized. The public will not see the administrative title.

Title - This is the title of the teaser. If you also include an image, the title will appear under the image and above the text. It’s important that it offers enough information to grab a customer's attention, but it should be short and to the point.

Text - This is the body of the teaser. Remember that your goal is to get the customer to take some kind of action, but you don’t have a lot of room for much text. Be concise and to the point.

Image - This is the image that appears above the content. Ensure that this image is very appealing, grabbing the attention of the customer as they scroll down the page.

Call to Action (CTA) Text - This is the text that will appear inside the CTA button.

URL - The URL that the user will go to once they click on your promo. This URL is used on the CTA button, the image and the title of the promo.

Promo: Icon

The icon promo content type is very similar to the grid promo content type. The main differences are that the body text is centered, rather than aligned to the left or right, and and there is slightly more padding (negative space) between the teasers.

The strategy for the icon promos are the same as the grid promos, but this content type is great for including small graphics (or icons) rather than full size pictures. 

See the Promo: Grid section above for insight about the fields and their usage.

Arranging your promos in xTupleCommerce with the Nodequeue tool

The nodequeue tool in xTupleCommerce is used for exposing content to specific areas of your web portal and arranging the order of content in various places. For instance, let’s imagine that your marketing team is quite ambitious and you’ve decided to go ahead and create 20 carousel slides for the homepage. That’s a great idea. You could create all the carousel slides that you will need through out the year. But you wouldn’t want all 20 to appear on the homepage right away. You’d want to control which ones appear and the order in which they appear. To control this, you’d use the nodequeue tool - Admin > Structure > Nodequeue

As you will see, there are various nodequeues in the system. The three that are associated with the promos are:

  • Carousel Promo: header - used for managing the homepage carousel
  • Promo: page bottom - used for managing all the promos beneath the carousel
  • Promo: sidebar - used for managing the interior page sidebar promos

To the right of the nodequeue titles you will see a link to View. 

Clicking that will take you inside the nodequeue where you can manage the nodes and their arrangement. In this case, let’s click into the Carousel Promo: header Nodequeue. 

Here you can see the list of carousels that are already displayed (if any). To add a new carousel, click into the Add Content field at the bottom of the list. Begin typing the administrative title of the node (promo) you want to appear. Once you see the node, click it. Then click the Add Content button. This will add the carousel as the last item in the list. Once all the carousels you want included are added you can click the crosshairs to the left of each carousel to drag and drop them into the order that you desire. The first item in the list will be the first item that appears on the homepage. Once you have the order you want, click Save. 

Note that on this page you can also click Edit which will take you into the actual carousel content. If you want to save your pomo, but you don't want it to appear on the web portal, simply uncheck the Publish checkbox at the bottom of that promo's edit page. And you can click Remove will will remove the node from the nodequeue.

As you can see, if you had created 20 Carousel Promos, you can use this Nodequeue tool to control which carousel items appear and the order in which they are displayed.

Managing the promos below the carousel is very similar. Essentially, you are using the same tools to pull in content, then arranging the order of that content. In this case, each node that is represented will be a promo row on the homepage. 

I recommend testing these features out on your stage site to get accustomed to these tools and experiment. You may find that the stage environment is a great place for you to test out various homepage layouts and discuss with your team. 

Homepage Content

Notice that there is one more content area on the homepage that is not managed with the promo’s and nodequeues. That is the homepage content that appears between the carousel and the other promos. This is a very important content area that needs a strategy. From Google’s perspective, they see this information as the content you use to describe your business to the world. They rank the keywords used in this area as extremely important when indexing your site. So, it’s important that you choose your words carefully. 

To edit this area of the web portal, simply navigate to the homepage while logged in as a manager, and click on the Edit tab under the carousel. This will take you into the back end of the homepage where you can manage content and search engine optimization (SEO) meta data. The fields that are included in the back end include:

Administrative Title - This is the same as the promos. This is used for organizing your content.

Page Title (h1) - This is the title of the page that will be displayed within an h1 (header 1) tag.

Menu Title - A unique menu title (other than Home) can be added here to be used within the main menu.

Header (h2) - This is the subtitle of the page that will be displayed within an h2 (header 2) tag.

Content (body) - This is the body of the homepage content. Keep this brief and be sure to use tags for optimizing your content. For instance, Google indexes words within <strong> tags as more important than words that are not within <strong> tags. 

Context (body) - This is the additional body content to be displayed under the promos.

Footer (body) - This is the additional body content to be displayed above the footer of the page

Keep your homepage dynamic

By now, you should have a thorough understanding of how these tools can be used to design and layout a homepage with xTupleCommerce that strategically communicates your message with your audience. These tools are great for creating an exciting and enticing homepage for your xTupleCommerce site. We’ve worked to make the system very flexible and easy to use and hope that you will continue to utilize these tools to update and alter your homepage often. 

up
38 users have voted.