How do I use the FRAME_CATEGORY_X code block?

The FRAME_CATEGORY_X code block provides you the ability to separate main categories into groups whereby they can be displayed in different locations of the store's frame.html. The process itself requires manually adding special blocks of HTML (FRAME_CATEGORY_X) coding to your frame in order to activate the feature.

This article will describe how to do this.

Part I: The FRAME_CATEGORY_X coding

To begin this process, you will first need to download a copy of your theme's frame.html file and add the required code to it. Please be sure to make backups of your frame.html file before making any changes to it.

The following is the basic HTML code you will need to add to the frame.html file. It does not include any special style references which may be present in your theme's specific frame.html coding. Those will need to be copied/added by you, but the code example below is the base coding necessary for the feature to work.

The coding itself can be placed anywhere you would like on the frame.html page. However, regardless of where it is placed, the coding will absolutely require the START: and END: tags to be present as illustrated below. These are needed in order to have the feature selection shown inside of your Shift4Shop Online Store Manager. (more information on this in just a moment)

Please note that we've color coded a few of the parameters here to explain some basic variables that need to be tailored when adding your coding. Below the code we've included a legend to explain each.

Legend
Regarding the color codes above:

• X
  This will need to be changed to a numerical value for the category group you'd like to use for the block of coding.

When you designate a category as its own group, you will be selecting the group from a drop down menu. Therefore, if you make the X a 1, the group will be labeled Group 1 in your Online Store Manager. Making the X a 2 will be listed as Group 2, and so forth.

• CATEGORY
  The word "CATEGORY" should be left as it is in the coding. However, if you plan to designate multiple categories as their own groups, please be sure to add a blank space at the end of the word for each additional category.

For example, your first Category Group can be listed as CATEGORY</a>, while your second Category Group will be listed as CATEGORY</a> (with one space), and your third will be listed as CATEGORY  </a> (with 2 spaces), and so forth.

For the most part, merchants will likely want to add their category groups onto their store's left or right banners and emulate the same basic look of their regular banner elements. Therefore, you should copy the coding of your existing categories, and incorporate the FRAME_CAEGORY_X coding above into it. Again, this is not something that support can assist with, but a good working knowledge of HTML design will help.

Typically, the coding for your frame file's existing categories can be found with the following comment tag:

Part II. Specifying your categories as groups

The second part of our process will involve specifying category groups for your store.

As mentioned earlier, the START: and END: tags listed in the code above are directly responsible for showing the Category Group selector on your Main categories, so please be sure you've uploaded your edited frame.html file before proceeding.

once your edits are made and updated:

1. Log into your Shift4Shop Online Store Manager
2. Using the left hand navigatio menu, go to Products >Categories
3. Select the Category that you'd like to use as its own group and click on its name.

4. While viewing the category settings page, click on the "+Page Settings" icon to expand the area.
5. Look for the "Category Menu Group" dropdown menu at the bottom of the left column and select this category's menu group.
   (Group 1, Group 2, etc)
6. Click "Save" at the top right to commit your changes.

Depending on where the coding was placed, your designated category will be displayed as its own group away from the main categories.