Prerequisite:

  • First you need upload suitable images to banners into the 'User Images' section of the 'File Manager'.
    Pl. Refer: Upload User Images


Purpose:

  • The Image Column is a unique drag and drop Design tool which facilitates you to display imagery content on any page of your Web store.

  • It also allows you to hyperlink the image to any URL, so that when your customer clicks on the image he will be redirected to the respective URL page.

    Note: Banners can be displayed through the Multipurpose box (Pl Refer: Multipurpose Box) or Image Column 'Drag & Drop Controls.'

  • It also allows you to format the image properties like alignment, width, height and vertical/horizontal space.

  • You can use the image control to display the flashy/attractive banners to draw the customer attention and then redirect them to the information pages by clicking on images.

How do I configure the 'Image Column' Drag & Drop control?

(or)

How can I place the 'Image Column' control on any desired page and configure it?

(or)

How do I display the 'Imagery Content' on any desired page of my storefront?

(or)

How do I display or upload the banners in the storefront?


To configure the Image Column control, do the following:

  • Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.


 Image Column

  • You will be navigated to the 'Dashboard' page.


 Image Column

  • Click the  Image Column icon. The Dashboard & Setup section will be displayed as shown in the figure.


 Image Column

  • Click Design Home Page. You will be navigated to the Drag & Drop Controls page.


 Image Column

  • Select a page from the Design Your Site drop-down (which is located on the top) in which you want to add the Image Column control.
    • Note: If the required page is not available in the drop-down, you can create it now. Please refer: Create Custom Pages
  • Select Content tab and drag and drop the Image Column control into a pane as per your requirement.
  • Click Edit, which is on the top right corner of Image Column control as shown in the figure. This will open the Image Column dialog box as shown in the figure.


 Image Column

  • By default, Display Control option is selected as ON. If you don't want to display this control in the storefront, select Off from Display Control option.
    • Note: If 'Display Control' option is selected as Off, but the control is properly configured in a page, then the control will be displayed in the respective page of CP (Control Panel) but not displayed in the SF (Storefront).
  • To give a specific look and feel to your container like color, graphical appearance, etc…select Container 1, Container 2 or Container_nopadding from the Theme Container drop-down.
    • Note: Container 1 or Container 2 gives the different color look and graphical appearance of the container; whereas, Container_nopadding gives a plain container without any specified classes.
  • To upload the image, click the Choose button which is beside the Image text box. This will open 'Image Picker' dialog box.


 Image Column

  • The images which are uploaded to 'User Images' section of the 'File Manager' will be displayed here.
  • To select a required image, double-click on that image. The 'Image Picker' dialog box will be closed and the name of the selected image will be displayed in the Image text box.
  • You can also link a URL to this image. To link a URL this image, select the 'This image is hyperlink' checkbox.
  • The URL text box will be displayed. Enter the URL in URL text box to redirect the user after clicking on the image.
  • To open this URL link in a new browser window when the customer clicks on the image, select the open this link in new browser window checkbox.
  • To show the image in a specific size so that it will be visible properly, enter the suitable values in the Width and Height text boxes; otherwise, by default, the image will occupy its full size.
  • To add a blank border around images both horizontally and vertically (in order to allow the text to flow around the image without appearing ugly by brushing right up to the image), enter the respective values in the Hspace and Vspace text boxes.
  • To align the image to left or right, select Left or Right from the Alignment drop-down.
  • To give some width to the border around the image, enter the value in Border text box.
  • To save the edited details of imagery content, click Update. The uploaded image will be displayed in the 'Drag & Drop' controls page by the 'Image Column' control.


 Image Column

  • To preview the Image Column, click Preview. The preview page will be displayed as shown in the figure.


 Image Column

  • To upload the Imagery content to your Web store, click Publish.
  • To view the exact look of your just uploaded Image Column, click View Live Store.
  • The uploaded 'Imagery content' will be displayed in the Image column control as displayed in your Web store as shown in the above figure.


This is how you can display any imagery content on any page of your Web store by using Image Column control.


Note: We cannot edit 'Image Styles' through the 'Image Column' control, which can be edited by the 'Multipurpose Box' 'Drag & Drop' control through 'HTML Code'.