Knowledgebase: Site Design

How Do I Use Different Listing Templates?


By default, your Shift4Shop store uses the same HTML template for all of your products. However, you do have the option of creating your own variations on the default listing template and use them for different products.

To do this you will need FTP access to your store and at least some basic HTML knowledge.

Please Note
This article is provided for informational purposes and guidance. Please be aware that HTML design does not fall under the scope of Shift4Shop's technical support department. If editing HTML is beyond your capabilities, we have Design Services available that may help. Please check with our Support Team for more details.

Retrieving The Default Listing Template

The first step in the process is to download a fresh copy of the default listing template. To do this, you will need to connect to your store's FTP access. Your FTP access credentials can be found in your Shift4Shop Welcome Email or contact Shift4Shop to have it supplied to you (after verifying you as the account holder).

After connecting to your store's FTP access:

  1. Navigate to /web/assets/templates via FTP
  2. Look for a folder labeled common-core and go into it.

Additional Information
If you are using one of the latest CORE themes for your store, the common folder will be common-core. However, if you are using an older HTML-5 theme, the common folder you will need to go into is called common-html5

Once you're in the common folder:

  1. Locate the listing_0.html file and download it to your computer.

This listing_0.html is the default template file used for all products on the store. Once it is on your desktop, rename it to replace the 0 with a 1 so that its new name is listing_1.html.

  1. Using your favorite HTML or text editor, make whatever changes you'd like to the listing_1.html template
  2. Save your template file.

Uploading Your Altered Listing Template to your Store

Once you've made your HTML changes to the template file, you will need to upload it to your store so that it can be used.

Again, after connecting to your store's FTP access:

  1. Go to /web/assets/templates/[theme_folder]
    (Substitute [theme_folder] for your store's current Theme. For example, veniam-core)
  2. Upload your edited listing_1.html file to the theme folder.

Assigning The New Template To Products

Now, you will assign your newly uploaded template to the product(s) that you'd like to use it with.

  1. Log into your Shift4Shop Online Store Manager
  2. Using the left hand navigation menu, go to Products >Product List
  3. Click on the name of the product you'd like to edit to open it up.
  4. Once the product is open, click on the "Advanced" tab at the top.
  5. Using the "Listing Template" dropdown menu, select Style 2*

*Additional Information
If you've followed these instructions so far, the template is called listing_1.html, but we're selecting Style 2 as the listing template. This is not an error. It's just a slight idiosyncrasy of the listing template naming scheme.

The name of the style (Style 2, Style 3, etc) is determined by the name of the template file. However, it can be a bit confusing because the name of the Style is always one number more than the name of the template. This is due to the fact that listing_0.html is actually reserved for Style 1. So when you select the style, just be aware that it will be one number more than your template's name.

The following may help:

  • listing_0.html - Style 1 (also "Default")
  • listing_1.html - Style 2
  • listing_2.html - Style 3
  • etc

You may upload as many template variations as you'd like, but just be sure to name them with the same listing_x format described so far.

  1. Click "Save" at the top to set your changes.

Your product is now using the alternate listing template you've edited and uploaded.

You can also assign your alternate product listing templates to all products within a category using the "Product Display" section of the category details page.

Other "Style" Templates

The steps outlined above will let you assign alternate style templates to your products. But there are some other style selectors available in the store which you can use to give a custom look and feel to other select areas of your store. These other style templates include:

  • category_0.html For the category look and feel
  • listing_ebay_0.html For eBay Listing Templates (if available on your plan)
  • purchase_order_0.html For the layout of the purchase order if using the PO System module.
  • registration_0.html Can be used if you allow registration for different pricing groups

The process is basically the same as for the alternate product listing templates:

  1. Download a clean copy of the file from common folder
  2. Rename to [filename]_1.html
  3. Make your changes
  4. Upload to your theme folder
  5. Select the relative Style in the Shift4Shop interface.

You can also make alternate versions of your Frame file for use on the store's extra pages! Click here to read more on that topic.

Help Desk Software by Kayako fusion