Knowledgebase: Site Design

Website Content Guide - Part 1


This article will show you how to manage content on your online store. Content can be created and customized on your home page, category pages, checkout pages, contact page, and any webpage you develop. This guide will give you a basic overview on the tools to make these customizations and how to manage your content.

This is Part 1 of the Content Design Guide and we will mention the more basic ways of editing your store's Content Pages.

Click here to Access Part 2 of the Content Design Guide which will cover more advanced content editing topics.

Back to top

Before we get into editing content, it is important to lean how to use the WYSIWYG (what you see is what you get) editor. WYSIWYG mode allows you to edit, change, and add content to your web pages without having the knowledge of HTML.

Additional Information
WYSIWYG is turned off by default. To turn WYSIWYG on, log into your Shift4Shop Online Store Manager and look to the top right of the interface - where your username will be listed. Clicking on the username will bring about a special drop down menu with a series of links contained in it. One of these links is labeled "Turn On WYSIWYG" and can be used to turn the function on for all applicable areas of your Shift4Shop Online Store Manager.

The built-in WYSIWYG editor will be found in the following locations of your Online Store Manager

  • Products >Product List
    • Product Information Tab - Extended Description
    • Product Information Tab - Extra Fields 6 through 10
  • Product >Categories
    • Category Details - Category Header & Footer
  • Marketing >Autoresponders
    • When creating individual Autoresponder emails
  • Marketing >Newsletters
    • When adding a newsletter
  • Content >Blog
    • When adding or editing an article, WYSIWYG is available for the Short Post and Post Content areas
  • Content >Site Content
    • When editing the content for an extra page or menu link page
  • Content >Header and Footer
    • Available for the global header, footer and left/right banners
  • Content ->Titles & Content
    • WYSIWYG is available for each page's Header and Footer sections
  • Settings >General >Manufacturers
    • When adding a new manufacturer, WYSIWYG is available for the Manufacturer's page header
  • Settings >Design >Close Store
    • Available for the Message portion of your Closed Store page.

The top of your WYSIWYG editor will be presented inthe form of a toolbar that will look like this:

The following information will briefly explain each of the available functions of the built-in WYSIWYG editor toolbar. Most of these functions will take effect the moment you click on the button. In other cases, clicking on the icon will bring about a small drop down menu with additional formatitng options.

When adding formatting to your text, you can either click the format option and begin typing to get the selected result -- or otherwise type your text, highlight it and then click the format option to have it added to the selected text.

From left to right, your icons are:

  • HTML
    This will turn let you switch WYSIWYG into a straight HTML/Text editor with no formatting options whatsoever.
    Note that this action will only apply to the current Editor window and not all of the WYSIWYG editrs in the Online Store Manager as described at the start of this article.
  • Formatting
    This will let you change the formatting of the text so that it uses special formatting (header, code, quote) or normal text .
  • Bold
    This will add bold formatting to your text.
  • Italic
    This will add italic formatting to your text.
  • Deleted (Strikethrough)
    This will add a strikethrough effect on text.
  • Unordered List (Bullets)
    This icon will let you create a bulleted list
  • Ordered List (Numbered)
    While this icon will let you create a numbered list.
  • Outdent
    This icon will let you remove an indent (see next)
  • Indent
    This icon will let you indent your text.
  • Table
    This icon will allow you to add tables and table elements to your content. Tables will be formatted with no size data to remain responsive.
  • Link
    This icon will be used to create a link. Simply highlight the text you'd like to link, click this icon and enter the destination URL to add your link
  • Alignment
    This icon can be used to set your text's alignment options like centering, right, justified, etc.
  • Insert Horizontal Rule
    This icon will add a horizontal line to your text
  • Change Font Family
    This icon will give you selectable options for web-friendly font families that can be used for your text.
  • Change Font Size
    Alter the font sizes as needed.
  • Font Color
    Alter your text coloring as needed.
  • Back Color
    Allows you to add a background color to text areas.
  • File Manager
    This icon will navigate you to the file manager for situations where you'd like to add an image to your content.
  • Insert Video
    This icon will let you embed YouTube or Vimeo URLs to add video to your content.
  • Fullscreen
    This icon will expand the view to full screen view to help you design content more easily.

Titles & Content
Back to top

Another section with access to WYSIWYG mode, is the Titles & Content section of your store.

This is an area in which you can designate a header and footer to just about any page that makes up your store's overall navigation. Furthermore, since it allows you to specify a header and/or a footer to these pages, the interface also gives you access to the same WYSIWYG mode described above!

Aside from HTML edits, you can also control SEO specifications like Page Titles and Meta Tags for those pages.

To get to the Titles & Content section of your Online Store Manager, go to Content >Titles & Content. Select a page you'd like to specify a header or footer for and click on its respecitve "edit" button to access its own WYSIWYG mode.

Here's are a few of the pages available in Titles & Content

  • Account Pages
    Pages pertaining to the shopper's customer record such as registration, addressbook, my account, etc
  • Affiliate Pages
    Pages pertaining to the Affiliate program including signup and detail pages.
  • CRM Pages
    Pages pertaining to the store's built-in CRM module.
  • Gift Registry Pages
    Pages pertaining to the Gift Registry including registry creation, view and more.
  • Main Pages
    These will be the main pages used in your store including the Home, Product Listing, Category, View Cart and checkout pages.
  • And more...
    Including Title Pages for your Reward Points, RMAs and Wishlist pages.

As an alternative to editing the HTML templates of your store (which is more advanced editing), it is usually recommended to have a look at the Titles & Content pages first for basic changes to your store pages.

System Messages
Back to top

Your Shift4Shop Website has system messages already built in to warn, thank, or inform customers during certain situations on your online store. These system messages range anywhere from adding invalid credit card information to thanking them for signing up for the Mailing List. As with most functions in Shift4Shop, you have the ability to customize these messages to display whatever you want.

Edit System Messages

To edit the system messages

  1. Go to Settings >Design >System Messages
  2. In the Message field, edit the message you would like to display to the customer.
  3. Click Save Changes.

Also, as with most text fields you can edit within Shift4Shop, basic HTML coding can be used to accentuate your text if/when necessary!

Store Language
Back to top

Lastly, there's the Store Language section. This area was originally intended for changing the store from English to a different language. However it can also be used for design changes as this section will control approximately 97% of the labeling your store uses. For example, let's say that instead of having the buttons read "Add to Cart" you'd like to have them to read "Add to Basket." Store Language is your place.

You'd be surprised at the amount of information you can find in Store Language, so before editing any HTML template, always check Store Language first. Some of the sections you can change include:

  • Remove the Powered by Shift4Shop tag on your store's footer.
  • Change the default "Free Shipping" label
  • List your product features with individual tags instead of "Feature 1, Feature 2:" etc
  • Much much more.

As mentioned, the Store Language section is also where you'd go if you'd like to change the actual language of your site. For more information on this topic, please click here.

Changing Store Language Elements

  1. Go to Settings >Design >Store Language
  2. In each section, replace the default terms with your desired terms to replace the labeling displayed on the website.
  3. Click Save Changes.

You can also use the search bar located at the top of the page to search for a term or phrase that you'd like to chage!


Help Desk Software by Kayako fusion