This topic applies to

Applies to

SuiteCommerce | SuiteCommerce Advanced | Site Management Tools



The Columns extension lets you add up to 3 columns of text with images and call-to-action buttons using Site Management Tools. You can choose to add one, two, or three columns, and the layout adapts to fit the width, according to the screen size. With Columns, you can organize your content into easy-to-read blocks.


Commerce extensions are only available if provisioned, installed, and activated for a selected domain in your account. For more information, see Commerce Extensions.


Extensions require SuiteCommerce or the Aconcagua release of SCA or later.

You can add columns to multiple areas on your website using Site Management Tools. For more information on Site Management Tools, see Site Management Tools Overview.

To add a column:

  1. Go to the page where you want to add a column.

  2. Click Add on the Site Management toolbar.

  3. Drag the Columns content type to the page.


    If you do not see this content type, check that the extension has been installed and has been activated. Click Settings on the Site Management toolbar to access the Content Manager. Drag the content type from Inactive Content Types to Active Content Type.

    You can drag the Columns content type to multiple areas on the page:

    • If you drag it to an area marked as all pages, then the content displays on any page that contains that area.

    • If you drag it to an area marked as page type, then the content displays on any page of that type.

    • If you drag it to an area marked as this page, then the content displays only on the page that you add it to.

  4. In the General tab:

    1. Use the Name field to enter a description of your new content.

    2. Set the content visibility options.

      See Visibility Dates.

    3. In the Header field, enter the title for the section.

      A preview displays in the page.

    4. In the Text Color field, choose the color you want for the text fields.

      By default, the Header, Caption, and Text fields use different colors that are taken from your theme. If you select Dark, all text fields use the dark text color defined in your theme. If you select Light, all text fields use the light text color defined in your theme.

    5. In Column Alignment, select the positioning of the text content and the button.

      You can select either left aligned or center aligned.

    6. Select Open in New Window if you want the button link to open in a new tab or window.

    7. Use the Tags field to enter keywords that help you filter your content.

      See Content Tags and Filter Tools.

  5. In the Column tabs:

    1. Select the image you want to display using the Image Manager.

      See Image Manager.

      If you do not select an image, only the text column is displayed.

    2. In the Alt Text field, enter a description of the image.

      This text is used to improve web accessibility for visually impaired users and for SEO purposes.

    3. In the Caption and Text fields, enter the text you want to display as a subtitle and in the column itself.

      In the Text field, you can use basic HTML formatting tags such as <strong> for bold text, <em> for italic, and <li> for bullet lists, for example. When entering your text, you should enclose any body text with <p> tags and use <h> tags to create headers.

    4. Enter the text you want to display on the button in the Button Text field.

      If you leave this field blank, the button does not display.

    5. In Button Link, enter the URL you want to open when the user clicks the button.

  6. Repeat step 5 to include up to 3 columns. If you enter information on only one Column tab, only one column is displayed.

  7. Click Save.

If you have not published your column content and you decided to remove it, you can discard it. If you have already published your column content, you can remove it directly from the page where it is located. For more information on the differences between discarding or expiring content, see Discard Content Vs Expiring Content.

To discard columns:

  1. Go to Unpublished Changes.

  2. Select the column content in the list.

  3. Click Discard.

  4. Click OK.

To remove columns:

  1. Go to the page that contains the column content you want to remove.

  2. Click the Columns box.

    This highlights it and displays the content controls.

  3. Click Remove.

  4. Click OK.

To change the button link or alternative text:

  1. Go to the page that contains the columns.

  2. Click the Columns box, and then click Settings.

    This displays the Columns settings in the side panel.

  3. Enter the URL for the link in the Button Link field or enter the alternative text in the Alt Text field.

  4. Click Save.

Related Topics