Use the Page Editor
Shift4Shop's HTML Builder can help you add design elements to some of your content pages. This guide will provide you with some steps to get started with the builder and its interface.
Where to find the HTML Builder
The HTML Builder is currently available for use on your store's Home page as well as your non-linked Site Content pages (i.e., Menu Link and Extra Pages) and blog articles.
To access the HTML Builder for the Home Page:
Log into your Shift4Shop Online Store Manager.
Using the left navigation menu, go to Content > Site Content.
Click on the Edit button located in the "Home Page" section.
Once the page is open, click on the Launch Page Editor button.
To Access the HTML Builder on your Menu Pages:
Log into your Shift4Shop Online Store Manager.
Using the left navigation menu, go to Content > Site Content.
Click on the Edit button located in the "Top Menu Links" section.
Locate the page you would like to use the HTML Builder on and click on its Action Wheel located on the far right of the grid listing.
Select Content from the Action Wheel to proceed.
Once the page is open, click on the Launch Page Editor button.
To Access the HTML Builder on your Extra Pages:
Log into your Shift4Shop Online Store Manager.
Using the left navigation menu, go to Content > Site Content.
Click on the Edit button located in the "Footer Extra Pages" section.
Locate the page you would like to use the HTML Builder on and click on its Action Wheel located on the far right of the grid listing.
Select Content from the Action Wheel to proceed.
Once the page is open, click on the Launch Page Editor button.
To Access the HTML Builder on your Blog articles:
Log into your Shift4Shop Online Store Manager.
Using the left navigation menu, go to Content > Blog.
Click on the Add New button located at the top right of the page to add a new blog post.
Enter information for the blog post's Name, Author, Post Date, etc.
Scroll down to the "Article Content" section and click on the Launch Post Editor button.
Using the HTML Builder
When you first open up the HTML Builder, you will see an empty building space with a message labeled "Click to add content" in the center.
This is your workspace for the HTML Builder. In the case of the Home Page, you will have this section available in the Header and Footer of the Home Page. For extra content pages, you will see only one workspace.
Adding Content
When you click on the initial workspace, you'll see a few options of design elements to add including paragraph, image, headings and other common design elements.
Clicking on the MORE... button will show you additional elements to choose from. These will be categorized into Article, Headline, Photo, Profile and other formats to help you locate the elements you need.
Each element you add to the workspace will be contained within a visible block. As you click on areas of the block, you will have various ways of controlling the content found in each block.
Additionally, on the right side of your page, you will also see content components which can be dragged into the workspace as needed.
Editing Tools
As mentioned, each element you added to the workspace will be contained in its own block. As you click on a design block, you will see some tools that will let you edit the element. The following is a brief description of these editing tools.
Text Control
When clicking an element at the top of the workspace, you will see your Text Control tools. It will look similar to the UI in a word processing software. The following list goes over the various tools as they appear from left to right:
Bold - Use this icon to bold the text:
Italic - Use this to italicize your text:
Hyperlink - This icon may be used to link selected text. When clicking this, you'll have the following options:
URL - The path to the link's destination
Open in New Window - Select this checkbox if you'd like the link to open up in a new browser tab
Text - This will be the text that is used on the link
Title - While this will be the title that is shown when someone hovers over the link
Align - This icon will let you select the text's alignment (left, center, right, full):
Color - This will let you select the text color as well as the background color behind the text
Paragraph - Use this icon to select the text's heading size (heading 1, 2, pre, etc)
Font - This icon will let you select the text's font
Next - Click this icon to see the next set of Text Tools
Previous - Click this icon to see the previous set of Text Tools
Formatting - Use this icon to format the text's properties (underline, superscript, etc)
List - This icon will let you set the text as a numbered or bulleted list, as well as indent and outdent the text.
Text Settings - This icon will let you manipulate the following text properties:
Font Size
Line Height
Letter Spacing
Icon - This icon will let you select text based iconography to be used instead of text.
Image - This icon will let you insert an image in place of text. You can either drag and drop the image into the box, or otherwise select the image from your store's File Manager.
Clean - This icon will effectively reset and remove whatever formatting you may have placed on the text (before saving).
Element Controls
When clicking on each element block, you will have access to the following tools.
Add - Lets you add a new element along/within the one you've selected
Move Up, Down, Left Right - Lets you move the elements directionally.
Note that in some cases, moving the element into certain directions will place it into its own block. Experimentation may be required.
Duplicate - Lets you copy and insert the element
HTML - This icon will show the specific element's HTML coding in case you'd like to manually edit it. (Click OK after making edits)
Delete - Use this icon to delete the whole entire element.
Image Controls
When adding and selecting images on your workspace, you will have access to these tools:
Link - Clicking on this icon will let you specify the image being used.
URL - Specify the path to the image
Select - Click this icon to browse your site's File Manager for the image
Title - This will act as the image's ALT tag. It will also appear on the image when someone hovers over the image.
Link - Use this field if you'd like the image to click through to another location.
(Use the "Open New Window" checkbox to have the link open as a new browser tab.)
CSS Styling
The elements will also have a "Settings" icon that will take you to the element's Style Settings. Essentially these will let you edit the element's CSS attributes and effects like border settings, shadow, position, color and other styling effects.
Saving Your Work
Once you are done using the HTML builder on the page, click on the Save button at the top right to publish your work.