How do I configure the 'Image Column' Drag & Drop control?
How can I place the 'Image Column' control on any desired page and configure it?
How do I display the 'Imagery Content' on any desired page of my storefront?
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.
- You will be navigated to the 'Dashboard' page.
- Click the icon. The Dashboard & Setup section will be displayed as shown in the figure.
- Click Design Home Page. You will be navigated to the Drag & Drop Controls page.
- 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.
- 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.
- 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.
- To preview the Image Column, click Preview. The preview page will be displayed as shown in the figure.
- 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'.