Menu Sheet Overlay
Search Sheet

Smart Content

In this section understand this section learn how to design for the Smart Content features of Progressive Mobile.

Smart Content allows you to quickly add and target promotional content into predefined slots throughout the client’s desktop, tablet, mobile site, as well as app or Store Driver site. This allows clients to create targeted messaging to provide a more personalized shopping experience for the shopper.

What Is Smart Content?

The content is a targeted promotional image or video to recommend products, and is managed through Connection Center. In Connection Center the marketer can choose from the predefined content slots and set either an image with referring URL or a YouTube link, which can have a preview image set.

We are currently developing the ability to create text overlay on images to enhance the messaging and avoid the need for baked in text.

Smart Content is a Mobify Quick Launch feature.

Customizing Smart Content

Smart Content that populates in predefined banner slots can be filtered based on four types of audience criteria:

Read more about Smart Content in the Connection Center.

Targeting Geo-locations

Smart Content allows for the marketer to quickly and easily change promotional content, without the need to use technical resources. Consider going through the site with the customer and identifying where high turnover content lives, and how changing it to Smart Content will improve their deployment process.

The most challenging part of delivering Smart Content is helping the the customer understand the stories they can tell with them. The slots are picked on the template level; if you create a slot on a CLP, it will appear across all other CLPs using that template. This means you could tell an overall story like:

Our goal is to highlight the best seasonal clothing in your region to suite the typical weather conditions over time.

You could then use for example use the slot(s) to target the west coast with rainwear and the east coast with heavy down jackets for the winter season, and then change the theme of the promotion later as the scenario evolves.

Specifications Smart Content Image Assets

Images sizes will be based on the maximum size of the slot as it appears on the different platforms. We recommend that 2x size images to support retina displays.

For example if you think in terms of where the natural break point of your site may be you might end up with sizing like this for a full page width Smart Content banner at 2x resolution.

Marketers can use .jpg, .png, or .gif files as long as they are under 1 MB in size.

Videos need the YouTube link to work versus an embed code. The preview image will follow the same sizing rules as described above.

Rules for Location

Documenting Smart Content Details

Creating mockups during the Smart Content slot location selection process is an important way to illustrate the potential locations promotional content can live, and are good talking points around the client’s goals. Because you will most likely be specifying content slots on a variety of different platforms using something like InVision Boards will help you group relevant templates together.

When creating the Smart content slots you will need to specify a few details into a copy of the Smart Contents Slot Template spreadsheet. The following table describes the needed content, what it is and who may be responsible for creating it.

Element Meaning / Responsibility
Mobify ID Correlates to the Customer ID in Connections Center (Created by the location team)
Name A descriptive name of the slot. Used in the by the marketer later to add content to, so be descriptive. (Designer)
CSS Selector Class name identifying it is from Mobify, what type of content, the target platform and the container id or unique class it will be before, in, or after. e.g. .mobify-smartcontent-mobile #hero-wrapper
Placement (before, in or after) Where it is located in relation to the id or class name specified in the CSS Selector.
Preview URL The URL corresponding to the desired template and where the Preview feature in the Connections Center will show the content.
Custom CSS Additional styling needed on the Smart Content container, like padding to make it fit in with the existing content.
uuid Created by the Location Team
business_id Created by the Location Team
Slot Created by the Location Team

Once the initial Smart Content slots have been picked, create documentation that provides the customer an easy reference for the locations, the slot number and the slot name.

Smart Content slot example

We recommend that the documentation include a title identifying what the document is for, the template it will apply to (e.g. the homepage), and the client logo. In this document, use the final mockup with the placeholder images and call out the slot number, site type it will display on (desktop, tablet, mobile, app or store driver) and the descriptive name chosen for the slot in the Smart Content template spreadsheet as this is the name they will see in the Connection Center.

Additional Smart Content slots can be easily added later by the location team, but in the initial build we’d suggest starting with three slots.