Skip to main content

How to create an image with multiple links campaign

Ernst Vorndran
  • Updated

    Introduction to an image with multiple links campaign

    This guide will provide you with simple step-by-step instructions to create an image with multiple links campaign using Fredhopper's Merchandising Studio.

    Image with multiple links campaigns can provide a means to inspire shoppers to purchase your products. This could include one image with multiple links, promoting a sales campaign for winter coats including two links one to women's coats and another to men's coats. This results in a simple visually appealing way to navigate shoppers to a category in your site.

    The configuration possibilities are vast. This article focuses on how to create an image with multiple links campaign using a common scenario, which can be easily tailored to your own visual merchandising strategy.

    It is recommended that you have read the 'Getting started with campaigns' article before you use campaigns in your Merchandising Studio.

     

    Scenario

    This scenario will be triggered when a shopper lands on the homepage. One image will be displayed promoting a Sale, containing two links: one for Women's Sale and the other for Men's Sale:

    C_image_with_multiple_links__1_.png

     

    Step by step guide

    Step 1

    Open the Fredhopper Merchandising Studio and login using your credentials:

    MS_homescreen__2_.png

     

    Step 2

    Navigate to CAMPAIGNS from the menu option:

    C_navigate_to_campaigns__2_.png

     

    Step 3

    Click New:

    C_new__3_.png

     

    Step 4

    Enter a Name for your campaign, e.g. 'Sale':

    C_image_with_m_links_name.png

     

    Step 5

    Click SELECT SCOPE:

    C_images_with_m_links_select_scope.png

     

    And choose the scope that you want this campaign to apply to, then click SELECT:

    C_images_with_m_links_scope.png

     

    Step 6

    Click ADD TRIGGER:

    C_images_with_m_links_add_trigger.png

     

    Click on the Select trigger drop-down and choose Catalogue Location: 

    C_images_with_m_links_cat_log.png

     

    Step 7

    Next, you need to select the catalogue location for this trigger, so click ADD LOCATION:

    C_images_with_m_links_add_loc.png

     

    The Preview site will open, click Select location:

    C_images_with_m_links_sel_loc.png

    Change to 'Equals' so that the campaign only triggers on the homepage:

    C_images_with_m_links_equals.png

     

    Next, you need to configure the action; what will happen when a shopper lands on the Home location.

    There are two areas;

    1. Display: This is the text you can display around the campaign and the content you may want to show to the shopper.
    2. Contents: This is where you choose 'Image with multiple links' campaign and add the image url and the details for the links. 

     

    Step 8

    For this guide, we will keep the Display settings blank as per their default settings.

    Scroll down to the contents section and from the 'Show' drop-down choose Image with multiple links:

    C_image_with_m_links_selection.png

     

    Step 9

    Add the Image URL: 

    https://eventnext.co.uk/wp-content/uploads/2017/11/next-white-stuff-sale.jpg

    2019-10-28_10-33-30.png

     

    Step 10

    The image will appear below, click ADD LINK:

    C_image_with_m_links_add_link.png

     

    Step 11

    Once you click ADD LINK, a box will appear that is associated with the first link. You should drag and drop this to the area of the image where you want the link to be:

    C_image_with_m_links_link_1.png

     

    Step 12

    Next, add the link details:

    C_image_with_m_links_add_detials.png

    1. Choose either URL or Location. For this scenario, we will add a URL so that, when a shopper clicks in the area, they will be redirected to the given URL. If you choose Location from the drop-down, you will need to navigate to the desired location in the catalogue. 
    2. Add the URL. Paste the URL for Women's; http://demo.fredhopperservices.com/demo22/preview/?fh_location=//catalog01/en_GB/categories%3C{catalog01_18661}&fh_refpath=3cb1ce1f-f653-4a6a-bd38-8436bf622f09&fh_refview=home&fh_reffacet=categories&preview_seo=false
    3. Add hover over text, add SHOP WOMEN'S SALE NOW!
    4. Check the box if you want the link to open in a new window when the shopper clicks in the area.
    5. Add another link i.e. to SHOP MEN'S SALE

     

    Step 13

    Click ADD LINK:

    C_Image_with_m_links_add_link_1.png

     

    Step 14

    Repeat step 13 for the Shop Men's Sale link:

    C_image_with_m_links_set_up.png

     

    Step 15

    Once you have added all the information, click SAVE:

    C_image_with_m_links_save.png

     

    Step 16

    It is good practice to check the campaign is firing as expected before you send it for publication. To do this, go to your Preview site:

    C_image_with_m_links_preview__1_.png

     

    C_image_with_m_links_check_preview.png

    Check that the links open in a new tab in the desired location.

     

    Step 17

    You can still edit your campaign if required, otherwise, click on Send for publication:

    C_image_with_m_links_publication.png

     

    Once this has been published the campaign will appear on your front end depending on your cache strategy.

     

    Best practice

    When creating an image with multiple links campaign, set one campaign up for each user type trigger that you have, e.g. Desktop, Mobile, Tablet etc. This ensures that the image and hotspot links will render appropriately.

                                                                                                                                                                             

    Your feedback is important to us, please take a moment to let us know if you found this article helpful by clicking "Yes" or "No" in the "Was this article helpful?" section below or by adding a comment

    Related articles

    Comments

    0 comments

    Please sign in to leave a comment.