The Front-End Designer is a tool that allows you to easily customize the look of your website without having to know how to code. Here is a comprehensive guide on how the Front-End Designer works.


Applies to Version(s): 3.9.0


In this article, you will learn:

How to Select a Theme for your Site

How to Edit Site Colors

How to Edit Text

How to Upload, Change, and Remove Images

How to Publish your Site


How to Select a Theme for your Site


To access the Front-End Designer, click on Front-End on the left-hand side of your cart.


How to access front end designer


After clicking on Front-End, it should open a menu containing the different Front-End Settings. Click on Manage Themes.


Manage Themes


On the Manage Themes page, pick the theme you want to apply to your store. You can go for the default theme that's shown at the top of the page, as shown below, and click the Edit Theme button. This should take you to the Front-End Designer.


Default theme


Or you can scroll down and choose from the other available themes. Then, click on the Edit/Publish button of your chosen theme. This should also take you to the Front-End Designer.


Available themes


After clicking the Edit Theme button or the Edit/Publish button, you will be redirected to the Front-End Designer.


Front-End Designer


How to Upload and Change Images


On the left-hand side of the Front-End Designer, click on Common Colors.


Common Colors


On the Common Colors page,  you can change the colors of the various elements of your site including Primary Buttons, Secondary Buttons, and Badges. To select colors, click on the box indicating a color next to its corresponding element as shown below.


Common Colors page


Once you've clicked the bo containing the color of a particular element, it should open a color picker box as shown below.


color picker


Once you've chosen a color, click on Choose.


choose


How to Edit Text


To edit your site's text, click on Typography on the left-hand side of the Front-End Designer.


Typography


In Typography, you will be able to edit the font styles, sizes, and colors of your site's Headings, Buttons, and Base Font.


Typography tools


You also have the option to upload other font styles that are not available in the Front-End Designer. Simply click on the button next to the text box containing the default font style.


A button


This should open a window containing the available fonts. Click on the Add Font button on the top-right corner of the Available Fonts window.


Upload fonts


To add a new font, enter the Font Name, Font Family, and Font File URL. Then click on Save Changes.


adding a new font


You should be able to see your new font under the Custome Fonts category of the Available Fonts window. Click on Use.


new font


To edit the appearance of links, scroll down the left-hand side of the Front-End Designer. You may choose to Underline Text Links or Underline Button Links by clicking on their respective checkboxes.


Links appearance


How to Upload, Change, and Remove Images


To upload, change, or remove images on your site, click on the settings that correspond with the section where the image is located. For example, click on the Site Content Settings.


Settings with Image Upload feature


In the Site Content Settings, scroll down to the Ad Settings section. Click on the Image icon next to the text box containing the filename of the image you wish to change.

Ad settings


After clicking the Image icon, a window should appear containing the File Manager of your site, as shown below. Click on the folder name preceding the file name of the image.


File manager


Once you've opened the folder where you wish to upload a new image, scroll down and click on the Choose File button to select an image from your device.


images folder 1

images folder 2


Once, you've chosen an image, click on Upload.

upload


Your uploaded image should appear on the list of files within the images folder. Click on the Pencil icon on the right side of the file name. This should open the newly uploaded image.


edit icon


To apply the image, click on Use.


image


To remove images, click on the Square icon next to the Image icon that corresponds to the element with the picture you wish to remove.


unassign image


A prompt asking you to confirm the removal of the image should appear. Click Confirm.


Confirm removal


How to Publish your Site


To publish your site, click on Revisions on the left-hand side of the Front-End Designer.


Revisions


In Revisions, click on Publish.


Publish


Note: If your wish to make a new revision, click on Create New Revision.


create new revision


A prompt asking you to confirm the creation of a copy of the previous revision should appear. You may also rename the duplicate revision here. Once you're satisfied with your changes, click Ok.


copy revision



Links to Related Articles


If you didn't get your question answered, please contact the Pinnacle Cart Support Team. To submit a ticket, go to the My Account drop-down menu at the top right of the admin area and select Support.