Custom Display Controller

Some newer website theme designs have a feature that allows you to specify custom titles, tags, text, etc on the site.

Matthew Schwartz avatar
Written by Matthew Schwartz
Updated over a week ago

Overview

Some of our themes have sections on the homepage in which you can control some of the product display titles, tags, products, and text areas. (What you can control depends on the theme). Prior to customization, everything will have placeholder / default values.

Where to find the Custom Display Controller page code

--> Design > Site Pages > Custom Display Controller [then click edit]

Types of Controller Displays

There are multiples types of "Custom Display Controller" displays:

1. Product displays which pull automatically from a specified category

2. Product displays which use product tags

3. Text areas which allow you to customize various headings, blurbs, etc

4. Graphic / icon displays which allow you to specify a tag or other info to display an image.

See details and instructions, for each type of controller display, below

1. Category Autopull Product Displays

Some product displays automatically pull products from specified categories.

See example of those displays below, and the associated controller code.

Example product carousels using 'autopull' from categories. See example Custom Display Controller code below

Example product carousels using 'autopull' from categories. See example Custom Display Controller code below

Example "Custom Display Controller" page code, associated with the autopull display example shown earlier.

Example "Custom Display Controller" page code, associated with the autopull display example shown earlier.

How to update autopull displays (which are using Custom Display Controller)

Note: The display codes are listed in the same order as the product displays are shown on the site (the displays go from left to right, row by row)

1. HeadingIconTag: If you want to show an icon image next to the title, you can create a "banner" in the admin and then assign this tag to it. If you don't want to add an icon, you can simply ignore the HeadingIconTag setting. Note: if you add icons, please make sure they fit within a 40px by 40px area.

2. HeadingText: Type the text you want to be the title above the products in the display.

3. ProductCategory: The category name must be entered exactly as it is shown in the category tree or the category browse page. Any differences will prevent this from working properly.

4. CategoryLink: The URL link which goes to the category you are pulling products from. Use a relative link (does not include the beginning of the site URL; just starts with '/catalog', as shown in the screenshot examples)

2. Tagged Product Displays

Some product displays use tagging. Generally the tags will override automatically shown products, but in some cases a display may require tagging in order to show anything.

Example of tagged product displays. See associated Custom Display Controller page code below.

Example of tagged product displays. See associated Custom Display Controller page code below.

Example "Custom Display Controller" page code, associated with the tagged display example shown earlier.

Example "Custom Display Controller" page code, associated with the tagged display example shown earlier.

How to update tagged displays (which are using Custom Display Controller)

Note: The display codes are listed in the same order as the product displays are shown on the site (the displays go from left to right, row by row)

1. listtitle: The text heading above the product display

2. listtag: The tagname used to display products.

3. You will need to assign your chosen tag to some products in the "Admin > Inventory > Products" area, if you haven't already. Here is a Tagging Help Article

NOTE: Some product displays, which allow you to customize the title, may not show the custom title unless you also use product tags to override the default products (however, this is not always the case). If your custom title for a display is not showing, please ensure you have tagged some products with the tag specified in the controller code.

3. Text Areas

Some text areas and widgets can be customized.

Example of a text and button widget area which can be customized. See the associated code example below.

Example of a text and button widget area which can be customized. See the associated code example below.

Example of the controller code for the text and button widget area example shown earlier.

Example of the controller code for the text and button widget area example shown earlier.

How to update text areas (which are using Custom Display Controller)

Simply change the text and other values in the Custom Display Controller page code as desired.

By comparing the actual website against the page controller code in the admin, you should easily be able to tell which parts of the code to edit to accomplish what you want.

Note that not all text on the site can be controlled with Custom Display Controller. Only that which is in the controller code can be edited, although some sections of the site may be editable via other methods, such as settings in the admin, or content in other pages (Design > Site Pages).

4. Graphic / Icon Displays

Some areas on the site may have controllable icons or image areas in the Custom Display Controller. (If the images you want to edit are not in the display controller page, they might be directly controllable via the normal tagging process)

An example of a widget area with controllable icons. See associated controller code below.

An example of a widget area with controllable icons. See associated controller code below.

Controller code associated with the icon blurb section shown earlier.

Controller code associated with the icon blurb section shown earlier.

How to update icon / image sections (which are using Custom Display Controller)

The following instructions are for the examples shown above. Your theme and the associated options may vary, but this should give you the idea of how it works.

IconTag: The tagname for the icon / image. You need to apply that tag to some "banner products" in your Inventory > Products area. (Banner Manager Help Article) (Tagging Help Article)

The other code and blurb text in the example above works exactly the same as the "Text Areas" section explained earlier in this article.


โ€‹

Did this answer your question?