1. Commerce
  2. Store Front
  3. Themes & Extensions
  4. Commerce Themes
  5. Configuring Themes
  6. Configuring Global Theme Settings
  7. Configuring the Home Page

Configuring the Home Page

Note:

Themes require SuiteCommerce or the Aconcagua release of SuiteCommerce Advanced or later.

Important:

Commerce themes are only available if provisioned, installed, and activated for a selected domain in your account. For details, see Installing Theme and Extension SuiteApps.

Important:

To configure a theme you must also have the companion theme extension activated. For details, see Available Commerce Themes and Supported Features and Activating Themes and Extensions.

You can configure properties to customize a Commerce theme’s home page. For more information about how to configure the home page, explore these topics:

Configuring General Settings

The following section details how to configure the general settings displayed on a Commerce theme’s home page. Most of the settings that you can configure are common across all six themes, unless otherwise noted.

To configure general settings:

  1. Go to Commerce > Websites > Configuration.

  2. Select the website and domain where the theme is activated and click Configure.

  3. Go to the theme name subtab.

  4. Go to the Home subtab.

  5. Using the table below for reference, fill out the fields.

    Field

    Description

    Applies To

    Autoplay Carousel

    Check this box to automatically scroll to the next image in the carousel. For more information, see Configuring Carousel Images.

    All themes

    Carousel Speed (milliseconds)

    Enter the duration in millisecond before the carousel scrolls to the next image. The default value is set to 5000 milliseconds. For more information, see Configuring Carousel Images.

    All themes

    Announcement

    Enter the text to display in the announcement area on the Home page.

    Horizon Theme

    Free Text Title

    Enter the title to display in the carousel.

    • Bridge Theme

    • Summit Theme

    • Threads Theme

    Free Text Subtitle

    Enter the subtitle to display in the carousel.

    Threads Theme

    Free Text

    Enter the text to display in the carousel.

    • Bridge Theme

    • Summit Theme

    • Threads Theme

    Button Text

    Enter the text for the button that appears on the image in the carousel. If you leave this field blank, the button does not display.

    Threads Theme

    HREF

    Enter the URL address to open when a user clicks the button.

    Threads Theme

  6. When you are finished making changes, click Save.

Configuring Carousel Images

Carousel images are a collection of images that display on a Commerce theme’s home page. You can upload several images, adjust the display options, and set the overlay text. Each image can be linked to an external or internal URL and you can add a call-to-action button. You can also choose to have the images slide automatically and select the duration in milliseconds between each transition. For details, see Configuring General Settings. Most of the settings that you can configure are common across all six themes, unless otherwise noted.

To configure carousel images:

  1. Go to Commerce > Websites > Configuration.

  2. Select the website and domain where the theme is activated and click Configure.

  3. Go to the theme name subtab.

  4. Go to the Home subtab.

  5. In the Enhanced Carousel field group, click a line in the list.

  6. Using the table below for reference, fill out the fields.

    Field

    Description

    Applies To

    Title

    Enter the title to overlay on the carousel image.

    All themes

    Text

    Enter the text to overlay on the carousel image.

    All themes

    Image URL

    Select the image to display in the carousel when viewed on a desktop. Image width should be 1600 pixels. To avoid display issues, image height should be the same for each image. All images should be uploaded to the NetSuite File Cabinet, and stored in an image folder you create under Website Hosting Files > Live Hosting Files. For details, see File Cabinet Overview. If you use Cascading Style Sheets (CSS) to insert images, they are overridden by the images stored in the File Cabinet.

    All themes

    Image URL Mobile

    Specify the image to display in the carousel when viewed on mobile devices. All images should be uploaded to the NetSuite File Cabinet, and stored in an image folder you create under Website Hosting Files > Live Hosting Files. For details, see File Cabinet Overview. If you use Cascading Style Sheets (CSS) to insert images, they are overridden by the images stored in the File Cabinet.

    • Bridge Theme

    • Manor Theme

    • Posh Theme

    • Summit Theme

    • Threads Theme

    Link Text

    Enter the link text.

    All themes

    Link Location

    Enter the URL to the internal page to take the users to when the link is selected.

    All themes

    Class Name

    Select how to align the carousel on the home page. Choose from Carousel-Left, Carousel-Center, and Carousel-Right.

    • Manor Theme

    • Posh Theme

    • Threads Theme

    Image as Background

    When this field is enabled, you can set which side of the image to crop when your site is viewed on smaller devices. By default, this field is enabled.

    • Bridge Theme

    • Manor Theme

    • Posh Theme

    • Summit Theme

    • Threads Theme

    Background Crop Side

    When the Image as Background field is enabled, you can set this field to specify which side of the image to crop. Choose from left, center, and right.

    • Bridge Theme

    • Manor Theme

    • Posh Theme

    • Summit Theme

    • Threads Theme

    Caption Position

    Select where to position the caption on the carousel image. Choose from the following:

    • Left — Select this option to left-align the caption on the carousel image.

    • Right — Select this option to right-align the caption on the carousel image.

    • Centered — Select this option to center the caption on the carousel image.

    • Left-box — Select this option to apply a background to the caption that is left aligned. This applies only to the Summit Theme.

    • Right-box — Select this option to apply a background to the caption that is right aligned. This applies only to the Summit Theme.

    • Centered-box — Select this option to apply a background to the caption that is centered. This applies only to the Summit Theme.

    • Bridge Theme

    • Summit Theme

    Caption Text Align

    Select how to align the text inside the caption. Choose from left, right, and centered.

    • Bridge Theme

    • Manor Theme

    • Posh Theme

    • Summit Theme

    • Threads Theme

    Text Color

    Enter a HEX or an HTML color value to use for the text. The color entered here overrides the color set on the CMS page in Site Management Tools. For more information about CMS page types, see Pages.

    • Bridge Theme

    • Manor Theme

    • Posh Theme

    • Summit Theme

    • Threads Theme

  7. Click Add.

  8. For each image you want to add to the carousel, repeat steps 5 to 7.

  9. When you are finished making changes, click Save.

Configuring Infoblocks

Infoblocks are a collection of image banners that link to internal or external pages on the theme’s home page. Most of the settings that you can configure are common across all six themes, unless otherwise noted.

To configure infoblocks:

  1. Go to Commerce > Websites > Configuration.

  2. Select the website and domain where the theme is activated and click Configure.

  3. Go to the theme name subtab.

  4. Go to the Home subtab.

  5. In the Infoblocks field group, click a line in the list.

  6. Using the table below for reference, fill out the fields.

    Field

    Description

    Applies To

    Title

    Enter the title to overlay on the infoblock.

    All themes

    Link Location

    Link the infoblock to an internal or external page by entering the URL here.

    All themes

    Text

    Enter the text to overlay on the infoblock.

    • Bridge Theme

    • Horizon Theme

    • Summit Theme

    • Threads Theme

    Background Color

    Set the background color to display in the infoblock. The background color only appears when there is no image supplied. This fields supports HEX and HTML color values.

    • Bridge Theme

    • Horizon Theme

    • Summit Theme

    • Threads Theme

    Background Image URL

    Enter the image to display. All images displayed in the same row should be the same height in pixels. Image width should be adjusted according to the number of blocks. The full width is 1600 pixels, therefore if two infoblocks are displayed they should each be 800 pixels.

    All images should be uploaded to the NetSuite File Cabinet, and stored in an image folder you create under Website Hosting Files > Live Hosting Files. For details, see File Cabinet Overview. If you use Cascading Style Sheets (CSS) to insert images, they are overridden by the images stored in the File Cabinet.

    • Bridge Theme

    • Summit Theme

    • Threads Theme

    Image URL

    Enter the image to display. All images displayed in the same row should be the same height in pixels. Image width should be adjusted according to the number of blocks. The full width is 1600 pixels, therefore if two infoblocks are displayed they should each be 800 pixels.

    All images should be uploaded to the NetSuite File Cabinet, and stored in an image folder you create under Website Hosting Files > Live Hosting Files. For details, see File Cabinet Overview. If you use Cascading Style Sheets (CSS) to insert images, they are overridden by the images stored in the File Cabinet.

    • Horizon Theme

    • Manor Theme

    • Posh Theme

    Link Text

    Enter the text to display for the link.

    Horizon Theme

    Span Columns

    Check this box to span the infoblock across all columns.

    Posh Theme

  7. Click Add.

  8. Repeat steps 5 to 7 for each infoblock you want to add.

  9. When you are finished making changes, click Save.

Related Topics

General Notices