Store Builder tools

Use the Store Builder tools to control the look and feel of your store, as well as manage the pages and related files used throughout the site.

You can use Extended Download Service (EDS) to the increase average order value (AOV) in your store. EDS is a service that you offer your shoppers for their digital or download purchases. EDS allows your shoppers to download their product again if something happens to their initial download (or computer) and increases the amount of time after purchase in which they can download their products.

Note: To use EDS in your store, contact your Account Team. To get EDS set up and running in your store requires additional site design work.

You can customize EDS to operate in your store according to your unique setup. When customizing EDS, note the following:

  • EDS appears in the shopping cart as an additional option a shopper can add to their cart and purchase for their digital and download products. Some stores use the all products bundle offer to add EDS to the shopping cart when a shopper adds a digital or download product
  • Shoppers can purchase EDS for some or all of the digital and download products in the order. EDS appears only once in a shopping cart regardless of the number of products purchased because it is a service and not a physical product.
  • EDS increases the timeframe when a shopper can download their purchased products. Without EDS, most sites have a 30-60 day window after purchase date when shoppers can download their purchased products. EDS usually extends this time to one or two full years after the purchase date. However, your store can choose any period of time you want.
  • A shopper can purchase EDS with the order or after they place the initial order. The timeframe when a shopper can purchase EDS after their initial order varies and relates to the "refund timeframe" set up for your store. The refund timeframe is the amount of time after an order (digital or not) when a shopper can request a refund.
  • You set pricing for EDS within the default price list for your site. To vary the price of EDS by the product purchased, you can use marketing offers to discount the price based on the product or category of the product.

As you work with styles, the status and version will change depending on the actions you take on the style. The following list describes the possible statuses for a style:

  • Design—Indicates a user changed the style but did not deploy the style in your store. When you first create and save a style, it is in the "Design" state. Shoppers cannot see this style in your store.
  • Deployed—Indicates a user deployed the style in your store. This version has no outstanding changes, and the shopper can see the style in your store.
  • Retired—Indicates a user retired the style. It will not appear in your store even if an active theme in your store uses this style.
  • Pending Deployment—Indicates a user deployed the style, but the system has not fully deployed it on your store. The Pending Deployment status usually appears briefly (no longer than a few minutes).

Versions and modified dates

When you view an existing style, the version number and last modified date for the style appear near the top of the page. Depending on the style, this area may also show the themes associated with the style and when the style's last deployment time.

The style's version number shows the number of changes applied to the style.

When you edit a deployed style, the system saves the changes with a new version of the style. You have to deploy the new version (which will be in the Design state) for those changes to appear in your store. This is true whether the style is part of an active theme or not.

When you change an undeployed style associated with a theme, the theme will use the last deployed version of that style until you deploy the latest changes. Once you deploy a style, any changes to that version become part of the most current version of the style.

Deploying a Previous Version of a Style

The system saves the last five versions. If needed, you can deploy a previous version of a style while editing the style. Essentially "rolling back" the style deployed on your store to the selected version.

You can use the themesClosed A collection of styles and layouts that determine the appearance of your store and the checkout flow. You can apply a theme to all pages, a group of pages, or individual pages on your store. A theme controls the styles and the content layouts for pages and locales. and stylesClosed The overall appearance of the store's website, including the colors, fonts, buttons, images, and other stylistic elements. to control the look and feel of pages in your store. You can group the styles into themes that you apply to some or all of the pages used in your store. If your store supports multiple locales, you can choose which locale uses a specific style in a theme. Depending on your site's requirements, you may have more than one theme.

Example: You are a reseller for two large companies: Company A and Company B. Both Company A and Company B have unique branding schemes, and you want to customize your site to use those same themes, so shoppers feel they are shopping at those companies. To do this, you create one theme for Company A that uses the same styles (colors, fonts, and so on.) as Company A and then you would create a second theme for Company B that uses the same styles (colors, fonts, and so on.) as Company B.

When you create a theme, you choose the styles associated with the theme. The pages on your site will use the styles in that theme. You can apply styles in a theme to individual pages or page groups and define shopping cart options by style for your site. You can also use themes to control the branding of your Private Stores.

Note: If your store uses the Headwater template, you will not see the themes and styles options in the Store Builder menu as these Help topics indicate. To find out what template your store uses, contact your Account Team.

If your site supports multiple locales, you can apply the styles in the theme to all or some of the page for each supported locale on your site. You can also define the shopping cart options by page and locale.

Depending on the needs of your site, you may have more than one theme.

You can use content layouts to customize the page content and design for your store, including checkout and product or category detail pages. When you create or edit a content layout, you can define the elements on a page.

Note: You can only use content layouts when your store uses the Self Service (Rivulet) template. To find out what template your store uses, contact your Store Operations team.

Content layouts and Splash markup language

When you create or edit a content layout, you use the Splash markup language to define how you want the page to behave and how you want the page to look. Before you create or edit a content layout, you should be familiar with the Splash markup language. You need to use it to construct the content layout pages. See the Store Builder tools for more information.

Content layouts you can create

You can customize several pages. This includes the checkout pages for one of the checkout flows your store can support and other pages that provide product or marketing offer information. To customize a page, you need to create a content layout for that page and then apply a theme to that content layout.

Checkout pages you can customize

Shoppers see checkout pages when they complete a purchase and go through the checkout process. Each checkout flow uses a different set of pages.

Prerequisite: Before you edit the pages in a checkout flow, you must enable the checkout flow for your store. To find out which checkout flow your store uses, contact your Store Operations team.

Depending on your store, you may use one of the following checkout flows:

  • QuickBuy Checkout Flow—Includes the following pages:

    • Quick Buy Confirm Order Page—The layout for the Order Confirmation page. Shoppers see this page after they enter their billing and shipping information in the shopping cart. Shoppers can review their order from the Order Confirmation page before they submit it.
    • Quick Buy Shopping Cart Page—The layout for the main Shopping Cart page. Shoppers see this page when they go to the cart to view the products they intend to purchase. A shopper can also enter their billing and shipping information from this page. Shipping information only appears on this page when your site requires shipping.

  • Three Page Checkout Flow pages—Includes the following pages:

    • Confirm Order Page—The layout for the Order Confirmation page. Shoppers see this page after they enter their billing and shipping information. This page allows the shopper to review their order before submitting it.
    • Shipping Address Payment Information Page—The layout for the Shipping and Billing page. Shoppers see this page when they begin the checkout process. A shopper can also enter their billing and shipping information from this page. Shipping information only appears on this page when your site requires shipping.
    • Shopping Cart Page—The layout for the main Shopping Cart page. Shoppers see this page when they add products to the cart and want to view the products they intend to purchase.

  • Two Page Checkout Flow pages—Includes the following pages:

    • Shipping Address Payment Information Page—The layout for the main Shipping and Billing Page. Shoppers see this page when they begin the checkout process and enter their payment, shipping, and billing details. Shipping information only appears on this page when your site requires shipping.
    • Shopping Cart Page—The layout for the main Shopping Cart page. Shoppers see this page when they add products to the cart and want to view the products they intend to purchase.
  • Thank You Page—(Used by all checkout flows) The layout for the Thank You page. Shoppers see this page after they submit their order. Depending on the purchase, this page may include additional information such as details on how to download or obtain the product or submit any additional billing or payment information if required.

Shopping pages you can customize

A shopping page appears when a shopper views product information or marketing offers. The following list shows common shopping pages.

  • Category List Page
  • Category Product List Page
  • Home Offers Page
  • Products Cross Sell Page
  • Product Details Page
  • Product Search Results Page
  • Product Up Sell Page

Using content layouts

After you create a content layout, you can apply that content layout to pages in your store by using a theme.

Use the custom pages feature to create or upload HTML pages and body content for use on your site. After you create or upload a custom page, you then use the files feature to upload the images, CSS, video files, and other resources used by the custom pages you have created or uploaded. See Files for more information.

What is a custom page?

A custom page is an HTML file that will serve as the "body" content for a static page in your store. You can use custom pages as landing pages for marketing offers and promotions. You can also use them as static content pages (pages where the content does not change) such as the "Company Information" page, and so on.

Tip: If you want to use images or other resource files in your custom page, upload those files before you upload or create the custom page. Copy and paste the paths to those images into the body content of your custom page.

Creating and uploading custom pages

There are two ways to get a custom page. You can either create the page using Global Commerce or create the page outside Global Commerce (using a third-party application) and upload it to Global Commerce when finished. Regardless of how you create the page, the basic rules and requirements are the same.

  • The extension for the custom page files must be either .htm or .html.
  • The file name for the custom page cannot contain spaces or special characters.
  • The file contents should only include that content that you want to appear between the <body> tags of the page. See Using HTML in Global Commerce for more information on using HTML to create a custom page outside of Global Commerce.
  • Before you upload a custom page, make sure that the page content contains valid HTML code. Also, make sure the page appears the way you want it to appear when viewed in a browser.

Statuses and versioning

As you work with custom pages, the status and version of the custom page will change based on what actions you take on the custom page.

  • Status shows the current state of the custom page. The status of a Custom Page changes when you create, deploy or retire the custom page. The following table outlines the statuses a custom page may have.
    • Status Definition
    Design The custom page was created and saved, but not deployed.
    Deployed The custom page was deployed.
    Retired The custom page was retired.

  • Version indicates what version of the custom page you are currently viewing. Each time you save a custom page, the system creates a new version and saves the last version. The system saves the last five versions of a custom page so that you can view or edit a previous version of a custom page if needed.

Localizing custom pages

When you create a custom page, you can select which locales you want the custom page to use. If a shopper in an unsupported locale tries to access the custom page, the system loads the custom page for the default locale.

Using tokens

When you create a custom page in Global Commerce, you can use "tokens" to automatically apply attributes or insert content into the page.

Example: You can use a token to change the page's background color or insert the total price of the shopping cart.

You set up tokens when you create your site, and you customize tokens by the site. Some tokens are available on all sites, but you create most tokens for a specific site. Contact your Store Operations team if you have questions about adding tokens to your site.

Providing access to custom pages

You cannot access custom pages through your store until you create links to them. After you create or upload a custom page, use the Links feature to create a link to the page so your shoppers can access it. You can also use links in your custom pages to perform actions such as adding a product to the cart.

Use the Files feature to import images and other resource files you want to use with custom pages and styles. These can include images for marketing landing pages, button images, CSS files, videos, and so on. Once you have imported your files, you can copy and paste the URL for the file into your custom page or reference the files in your style.

Note: Access to the Files features requires the Page Designer or Content Manager role. For more information on roles and user profiles, see User roles.

Selecting the right location to import

When you view the Files page, you will see two tabs: Images and Resources. Use the Images tab to upload images for use in your store. Use the Resources tab to upload all other files for your store.

Depending on where you will use the files, you must select either the Custom Pages or Themes & Styles directory before you upload the files.

Example: If you want to use the file with a style, select the Themes & Styles directory. Conversely, if you want to use the file in a custom page, select the Custom Page directory.

Note: Take care when selecting the tab and folder location when you import files. You cannot move the files once after you import them (but you can re-import a file into a different location), nor can you delete imported files.

Supported file types

When you create custom pages, you can use the uploaded image and resource files. To do this, upload the files you want to use, copy the URL to those files, and paste that URL in the custom page where you want to use the image or resource file. See Custom pages for more information.

Image files

You can upload images from the Images tab on the Files page in Store Builder. Make sure you select the directory you want to upload the file to before you actually perform the upload. After you upload an image, you can:

  • Preview the image
  • Copy the image path or URL and paste that path in a custom page or other file.

The following list shows the types of image files you can import:

  • GIF (Graphics Interchange Format)
  • JPG or JPEG (Joint Photographic Experts Group)
  • PNG (Portable Network Graphics)
  • BMP (Bitmap)
  • ICO (Icon)

Resource files

You can upload resources from the Resources tab on the Files page in Store Builder. Make sure you select the directory you want to upload the file to before you actually perform the upload. After you upload a resource file, you can copy the file path or URL and paste that path in a custom page or other file.

The list below outlines the types of resource files you can import:

  • CSS (Cascading Style Sheet)
  • JS (JavaScript)
  • SWF (Shockwave)
  • PDF (Portable Document Format)
  • FLV (Flash Video)

The locking/unlocking feature protects two users from changing certain Store Builder items at the same time. When a user edits an item, the system locks that item. A user must unlock the item before any other user can edit the item again.

Requirement: You must enable the Store Builder Locking feature before you can lock or unlock items. See Store Builder Locking for more information.

Note: You can only disable the Locking Feature after you unlock all locked items in Store Builder.

Items that you can lock

When enabled, the Store Builder Locking feature allows you to lock or unlock the following items:

How the locking feature behaves

The following list describes how the locking feature behaves:

  • Locking occurs automatically when you edit an item. To edit an item, click the Edit button when you view the details for an item.

  • When a user locks an item:

    • A Lock lock icon appears next to the locked item in a list.
    • Only the person who locked the item or someone with the Storefront Supervisor role can edit, deploy, revert, retire, or unlock the item. If the person who locked an item deploys or retires that item, that also unlocks the item.
    • Users who did not lock the item can only view, copy, or preview the item. They cannot edit, deploy, revert, or retire the item.
  • If you click Cancel or navigate away to another page while editing an item, the item remains locked.
  • If you click Apply or Save while editing and item, the system unlocks the item.
  • Users can view the history for locked custom pages and locked content layouts.

Note: If you click the Edit button associated with a deployed item, the system locks the deployed item and the item behaves as described in the list above.