You can find this section under ShopFront Homepages > Homepage Library & Targeting in the IRP Admin left navigation menu.
Homepage Library
The Homepage Library & Targeting page is a central repository for a merchant’s homepages across Mobile, Desktop and Trade channels. It maintains a complete library of all homepage versions, whether currently live on storefronts or inactive. Over time, merchants can build and manage a wide range of homepages across their shopping channels - including mobile, desktop, and trade sites - from standard layouts to seasonal or promotional pages such as Mother’s Day, Easter, sales events, Black Friday, and Christmas.
Merchants can create and maintain their homepages using the No-HTML editor that comes loaded with UX components like Enhanced images, Brand Scrollers, Model Scrollers, Images, and Text.
Prebuilt IRP Homepage Templates can be added to the Homepage Library as a base for homepages, making the process of homepage creation fster and more efficient.
Merchants can select to:
- Edit: Edit the homepage directly in the editor, the user can edit and add to the homepage using the available UX components and save the homepage
- Preview: Preview the homepage in mobile, desktop and trade views. The user can select to 'edit' which will open the editor.
- Copy: Make a direct copy of the selected homepage for the basis of a new homepage version
- Delete: Delete the hompepage and any associated targeting
- Target: Target homepages to specific countries
Targeting Countries
Merchants can assign specific homepages by targeting specific countries. For example, a merchant might create a standard desktop homepage and then develop tailored variants for countries such as Ireland, the UK, the USA, or Canada. When a homepage is 'targeted' to a country then a 'LIVE' label is indicated on the homepage and an indication of the channel and country count is display. E.g. Targeted: Desktop (10), Mobile (5) LIVE. Where no countries are targeted then the homepage displays 'Targeted: No Countries'
Homepages can be easily targeted to a channel and country by selecting the 'Target' button. The 'Target Countries' window allows the user to select the channel (Mobile, Desktop or Trade) and add the countries that the merchant would like to target with the homepage content.
IMPORTANT NOTE: It is important to UNCACHE the application to see the homepage content working on the live storefronts, use the 'Uncache' button in the bottom bar of IRP Admin to do so.
Homepage No-HTML Builder
The Homepage Editor is an easy to use editor that requires no HTML knowledge for content creation. Design responsive homepages, (that works on mobile and desktop channels), using drag and drop rows and content directly into the editor window.
- No-HTML Email Homepage Builder
- Use responsive templates to get up and running quickly
- Target homepages to countries
Beefee Content Editor
Beefree is a popular and widely use No-HTML content builder. Merchants will already have experience of the editor through IRP Marketing Cloud - Email Campaigns and Flows. It has extensive tutorials and online academy.
Beefree Academy
Beefree YouTube Channel
Homepage content can be created using an existing template or by selecting 'Add Homepage' which creates a blank homepage in the editor. Content is created by first inserting rows into the homepage. Drag and drop configurable display components into the rows. Select from:
- Enhanced Images - Advanced image control including text and image animation
- Brand Scroller - Insert an automatically generated brand scroller with brand images
- Model Scroller - Add a scroller and select from the type: Custom Product List, Best Selling, Best Selling in Brand, Best Selling in Brand Category, Best Selling Brand/Category
- Custom Product List - A list of products
- Title text
- Paragraph text
- Lists
- Images
- Buttons
- Tables
- Dividers
- Spacers
- Social media icons
- HTML - Add your own html content
- Video
- Icons
- Text
Enhanced Images
Enhanced Images are a special UX component image type that support advanced image properties and animation that are not available in the standard 'Image' UX component. Merchants can built enhanced images inline and assign Title, Subtitle, Description and multiple buttons to a single image. They can assign fonts, colours, padding and animation properties to text, buttons and images.
Apply Zoom effects to images for mouseOver events on Desktop and animations that apply text effects from more engaging user experiences
Each image can support 0 to 6 buttons that are very useful when displaying category images with sub categories. E.g. New Season Fashion with buttons for Jackets, Dresses, Trousers and Shoes all within the same image.
Image and Container Properties
| Attribute |
Description |
| Image and Container Properties |
Description |
| Image URL |
The URL of the image location. The ‘Choose Image’ button will open the File Manager window where existing images can be selected for Uploaded from the location machine |
| Image Alt Text |
Image Alt text, all images should have alt text assigned for accessibility purposes |
| Link URL |
The url location when the image is clicked |
| Image and Container Attributes |
Description |
| Container Width |
The width of the image container in either percentage, pixels or auto |
| Container Height |
The height of the image container in either percentage, pixels or auto |
| Background |
The background colour of the container that can be used in association with the image opacity |
| Gradient |
Place a gradient over the image and control the colour and percentage of the image covered. Can be used in association with image text properties |
| Image Opacity |
Sets the opacity of the image and can be used in association with the Container Background |
| Border Radius |
The border radius of the image container |
| Margin |
The image margins left/right and top/bottom |
| Link Target |
Set the link target to open in a new browser window using ‘Blank’ option |
Title Text Properties
| Text Properties |
Description |
| Title Text |
The main title text line 1 |
| Title Text Attributes |
|
| Font Family |
The text font family including custom fonts selection that can be added in Marketing Cloud's Email Editor Custom Fonts section |
| Font Weight |
The text font weight |
| Font Color |
The text font colour |
| Font Color (Hover) |
The text colour on hover |
| Font Size |
The text font size in pixels, rem or points |
| Font Size (Hover) |
The text font size in pixels, rem or points on rollover |
| Line Height |
The line-height applied on text wrap |
| Line Height (Hover) |
The line-height applied on rollover |
| Padding |
The left/right and top/bottom padding around the text |
| Letter Spacing |
The spacing better the individual text letters |
Sub Title Properties
| Sub Title Text Properties |
Description |
| Sub Title Text |
The main title text line 2 |
| Sub Title Text Attributes |
|
| Font Family |
The text font family including custom fonts selection that can be added in Marketing Cloud's Email Editor Custom Fonts section |
| Font Weight |
The text font weight |
| Font Color |
The text font colour |
| Font Size |
The text font size in pixels, rem or points |
| Font Size (Hover) |
The text font size in pixels, rem or points on rollover |
| Line Height |
The line-height applied on text wrap |
| Line Height (Hover) |
The line-height applied on rollover |
| Padding |
The left/right and top/bottom padding around the text |
| Letter Spacing |
The spacing better the individual text letters |
Description Text Properties
| Description Properties |
Description |
| Description Text |
The main title text line 3 |
| Description Text Attributes |
|
| Font Family |
The text font family including custom fonts selection that can be added in Marketing Cloud's Email Editor Custom Fonts section |
| Font Weight |
The text font weight |
| Font Color |
The text font colour |
| Font Color (Hover) |
The text colour on hover |
| Font Size |
The text font size in pixels, rem or points |
| Font Size (Hover) |
The text font size in pixels, rem or points on rollover |
| Line Height |
The line-height applied on text wrap |
| Line Height (Hover) |
The line-height applied on rollover |
| Padding |
The left/right and top/bottom padding around the text |
| Letter Spacing |
The spacing better the individual text letters |
Button Properties
| Button Properties |
Description |
| Button Text 1 |
The button text, defaults to ‘Shop Now’ |
| Button 1 - Link URL |
The url location when the button is clicked |
| Add New Button |
Allows from 0 to 6 buttons to be added. The default is set to 1 button, but this can be 'removed' when 0 buttons are required. This feature is very useful when a category may have multiple sub categories. |
| Button Font Properties |
|
| Font Family |
The text font family including custom fonts selection that can be added in Marketing Cloud's Email Editor Custom Fonts section |
| Font Weight |
The text font weight |
| Font Color |
The text font colour |
| Font Color (Hover) |
The text colour on hover |
| Font Size |
The text font size in pixels, rem or points |
| Font Size (Hover) |
The text font size in pixels, rem or points on rollover |
| Line Height |
The line-height applied on text wrap |
| Line Height (Hover) |
The line-height applied on rollover |
| Letter Spacing |
The spacing better the individual text letters |
| Padding |
The left/right and top/bottom padding around the text |
| Button Style Properties |
|
| Background |
The button background colour and opacity |
| Background (Hover) |
The button background colour on hover and opacity |
| Border Radius |
The button border radius |
| Border |
The border colour and width |
| Border (Hover) |
The border colour on hover |
| Padding |
The left/right and top/bottom padding around the text |
| Gap Width |
The gap width between buttons |
| Button Container Properties |
|
| Button Position |
The button position in the main container: Inside Middle, Inside Bottom, Inside Top and Outside |
| Buttons Alignment |
The button alignment in the main container: Center, Left, Right |
| Container Width |
The container width that holds the buttons set as pixel, percentage or auto |
| Container Background |
The background colour of the button container |
| Container Padding |
The padding left/right and top/bottom of the button container |
Text Container Properties
| Text Container Properties |
Description |
| Text Position |
The text position in the main container: Inside Middle, Inside Bottom, Inside Top, Below, Above and Above Buttons |
| Text Alignment |
The text container position in the main container: Center, Left, Right |
| Background |
The background colour of the text container and it’s opacity |
Hover Animation Properties
| Hover Animation Properties |
Description |
| Image |
Animations linked to the main image: None, Zoom in, Zoom Out |
| Text and Button |
Animations linked to the text container: Slide Up Slide 1, Slide Up Style 2, Fade In Style 1, Fade In Style 2 |
Responsive Images
Responsive images are UX component that allows for simple responsive images to be added with animations. This is a useful component where merchants add images that have the text embedded directly within the image.
Apply Zoom effects to images for mouseOver events on Desktop and animations that apply text effects from more engaging user experiences
Note: Use the 'Enhanced Image' UX compoent for more advanced image and text features
Image and Container Properties
| Attribute |
Description |
| Image and Container Properties |
Description |
| Image URL |
The URL of the image location. The ‘Choose Image’ button will open the File Manager window where existing images can be selected for Uploaded from the location machine |
| Image Alt Text |
Image Alt text, all images should have alt text assigned for accessibility purposes |
| Link URL |
The url location when the image is clicked |
| Hover Animation Type |
Animations linked to the main image: None, Zoom in, Zoom Out |
| Additional Attributes |
|
| Container Width |
The width of the image container in either percentage, pixels or auto |
| Container Height |
The height of the image container in either percentage, pixels or auto |
| Background |
The background colour of the container that can be used in association with the image opacity |
| Gradient |
Place a gradient over the image and control the colour and percentage of the image covered. Can be used in association with image text properties |
| Image Opacity |
Sets the opacity of the image and can be used in association with the Container Background |
| Border Radius |
The border radius of the image container |
| Margin |
The image margins left/right and top/bottom |
| Link Target |
Set the link target to open in a new browser window using ‘Blank’ option |