It’s easy to create a custom Shift4Shop website. All you need to know is HTML, CSS, FTP and how to use the Shift4Shop code blocks and variables within their respective template pages. Frontend developers and web designers can usually start creating Shift4Shop websites in a matter of hours. It’s really that easy!

There are two main building blocks to design a Shift4Shop website/store: Code blocks and Variables. These are then found within our 3rd building block; the various Shift4Shop Templates that make up the bulk of your site's structure.

Your Shift4Shop store's design is composed of a global frame file (HTML) and a cascading style sheet (CSS) which control the basic appearance of your site's overall "Look and Feel."

The majority of template edits you should be making will be to the frame.html file. In fact, most of the time, this is the only template you will ever need to edit! This file contains references to the global areas of the site such as the top header, the bottom footer, and the left/right banner areas as well as a middle content area to display the additional pages.

Here, we will list each additional template page that is present on your store along with their relevant code blocks and variable. Click on each page for more details.

Think of our Code Blocks as code includes within your HTML document. For example, if you wanted to add a breadcrumb to your page, you need the breadcrumb code block, plus the necessary variables inside that codeblock.

Code blocks will typically begin and end with commented out areas of HTML code which will contain the name of the block for easier reference.

Note: It is important to preserve the commented tags to ensure the software performs correctly.

For example:

    <!--START: BODY_HEADER-->- Breadcrumb area begins.
        [CATEGORY_FULLLINE]  - Displays breadcrumbs.
    <!--END: BODY_HEADER-->- Breadcrumb area ends.