Prerequisite:

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


Purpose:

  • The multipurpose box can be used to display the banners, offers and promotions in storefront.


Multipurpose Box

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

  • Multipurpose Box is a unique drag and drop Design tool which can be used to publish the HTML content on any page of your Web store. You can also prepare the animated content for both text and images with the help of HTML and publish it on your Web store.

  • Mostly the Multipurpose Box can be used to display banners and attractive animated content but, there is no limitation for your creativity. You can use it to display anything as per your requirement, provided you know the HTML.

  • If you know to design the HTML code, you can directly go to the Source tab and enter the same in the HTML Content box.

    • Note: This box also can be used to display plain text i.e. the HTML Content box accepts plain text also. Design your content easily here as the edit options are similar to the one that you find in the MS Word.

How do I configure the 'Multipurpose Box' Drag & Drop control?

(or)

How can I place the 'Multipurpose Box' control on any desired page and configure it?

(or)

How do I display the 'HTML content', 'Flash Images', plain text, images, links, or any content at my Web store?

(or)

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


To configure the Multipurpose Box control, do the following:

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


 Multipurpose Box

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


 Multipurpose Box

  • Click the  Multipurpose Box icon. The Design & Content section will be displayed as shown in the figure.


 Multipurpose Box

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


 Multipurpose Box

  • Select a page from the Design Your Site drop-down (which is located on the top) in which you want to add the Multipurpose Box 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 and drag and drop the Multipurpose Box control into a pane as per your requirement.
  • Click Edit, which is on the top right corner of the Multipurpose Box control as shown in the figure. This will open the Multipurpose Box dialog box as shown in the figure.


 Multipurpose Box

  • By default, the Display Title option is selected as ON. If you don't want to display the title of the control in the CP (Control Panel) and in the storefront, select Off from the Display Title option.
  • By default, the Display Control option is selected as ON. If you don't want to display this control in the storefront, select Off from the Display Control option.
    • Note: If the 'Display Control' option is selected as Off, but the control is properly configured in a page, the control will be displayed in the respective page of CP (Control Panel) but not displayed in the SF (Storefront).
  • To give a title to this multipurpose box, enter the name in the Title text box.
  • Select the suitable heading tag from H1 to H6 from the respective drop-down.
    • Note: Heading Tags are attached to the title for better SEO rankings. The importance decrease from <H1> to <H6>. Please make sure your heading structure is SEO-friendly while allotting these tags.
  • 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.
  • Multipurpose box Control can be configured differently for each use. However, you can use the same multipurpose box, which has been configured at another page, in whatever page you want without re-configuring the same on that page.
  • To use the previously saved content of Multipurpose Box in the current page, select a suitable reference from the Reference Control drop-down. This will be used for displaying the same control on multiple pages and without configuring the control every time.
    • Note:
      • i) The Reference Control drop-down displays the Name of your webpage and the title of multipurpose box added in that page separated by a colon (i.e. “:”).
      • ii) If you select a Reference Control for a multipurpose box, you don’t need to configure that control further. All the parameters of the selected reference control will be applicable here.
  • If you don't select a 'Reference Control' then you can find a text box, which is a 'WYSIWYG' editor ('HTML Content' Text box).

WYSIWYG editor: (HTML Content text box:)

  • This is a 'WYSIWYG' (What You See IS What You Get) editor and you can add/edit - plain or normal text, HTML Content, Images, Flash Images (URLs of flash), URL & Email links, etc… as per your requirement here.
  • Let's know how to add different types of content in the WYSIWYG editor:


1. Adding HTML Content:

  • You can add 'HTML' content to display an attractive content.
  • Click Source, you will be displayed a text box for entering the HTML Code.


 Multipurpose Box

  • Enter suitable HTML Code.
  • Click Update, the relevant content as per entered HTML code will be displayed through multipurpose box control.


2. Adding Images:

  • To upload an image, click the  Multipurpose Box icon. This will open an 'Image Picker' dialog box.


 Multipurpose Box

  • The images which are uploaded to the '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 selected image will be displayed in the HTML Content text box.
  • To add text, directly enter the same in the 'HTML Content' text box.
  • To enter fresh HTML content, select None from the Reference Control drop-down and click Source and enter the HTML code in the HTML Content text box. You also can enter plain text here.
    • Note: Width of the HTML content depends upon the layout pane to which you have dragged this multipurpose box control.


3. Adding Flash Images:

  • To add the 'Flash' Images, click Flash ' Multipurpose Box' icon. You will be displayed a Flash Properties dialog box.


 Multipurpose Box

  • Enter the Flash Image URL in the URL text box. The image will be displayed in the Preview text box.
  • Edit the Width, Height, Horizontal Space, and Vertical Space of the image (if required) in the Width, Height, HSpace, and VSpace text boxes.
  • Click OK, the dialog box will be closed and the Flash Image will be saved in the HTML Content section.


4. Adding Links:

  • To display the links (example, facebook, twitter, etc…) through the multipurpose box, click the ' Multipurpose Box' icon. You will be displayed a Link dialog box.


 Multipurpose Box

  • To enter the URL of the link, select URL from the Link Type drop-down.
  • Enter the link URL in the URL text box. Example: www.facebook.com/
  • Click OK, the dialog box will be closed and the link will be saved in the HTML Content section.
  • After adding all types of Content in the HTML Content text box, click Update. The uploaded content (or image) will be displayed in the 'Drag & Drop' controls page by the 'Multipurpose Box Column' control.


 Multipurpose Box

  • To preview the multipurpose box, click Preview. The preview page will be displayed as shown in the figure.
  • To upload the Multipurpose box to your Web store, click Publish.
  • To view the exact look of your just uploaded multipurpose box, click View Live Store.
  • The uploaded multipurpose box will be displayed in your Web store as shown in the figure.


 Multipurpose Box

  • This is how you can publish your HTML content or any content on any page of your Web store by using the Multipurpose Box control.

Learn More:


learnmore2.jpg
1. You can also display images through 'Image Column' control, but you cannot edit 'Image Styles' through the 'Image Column' control.

2. However, the 'Image Styles' can be edited through 'HTML Code' in the 'Multipurpose Box' 'Drag & Drop' control.