Knowledge Base


  • Video block
  • Video Tutorials

  • Watch our easy-to-follow video tutorials for quick tips on designing and managing your store.
  • View Video Tutorials

Creating a Frontend App

The process of creating a Frontend App is nearly the same for each type. You can follow the first part of the instructions, which is the same for all types, and then complete the last part that is specific to the type of app.

Step 1: Choose the App Type

  1. From the Admin menu, select CMS > Frontend Apps.
  2. Click the Add New Frontend App Instance button.
  3. In the Settings section, select the Type of app you want to create. Then, click the Continue button.
  4. image
    Select Type

  5. In the Frontend Properties section, do the following:
    1. In the Frontend App Instance Title field, enter a descriptive title for your app. This title is for internal use only, and won’t be visible to your customers.
    2. Enter a number in the Sort Order field to determine the order of the block when listed with others in the column. The top position is zero.
    3. Set Assign to Store Views to “All Store Views,” or to the view where the app will be available. To select more than one, hold the Ctrl key down, and select each option.
    Frontend Properties

Step 2: Specify Where It Goes

  1. In the Layout Updates section, click the Add Layout Update button.
  2. image
    Add Layout Update

  3. Set Display On to the type of category or product page where you want this banner to appear.
  4. In the Block Reference list, select the block or section of your page layout where you want this banner to appear.

Step 3: Select a Template

  1. Set Template to one of the following:
    Block Template Formats the content to it can be placed as a standalone unit on the page.
    Inline Template Formats the content so it can be placed inside other content. For example, a link that goes inside a paragraph of text.
  2. Click Save and Continue Edit to save your changes and continue editing.

Step 4: Complete the Instructions by Type

Step 5: Save Your Work and Check It Out!

  1. Click the Save button to save your settings.
  2. Go to your storefront and see how it looks.