Designing your site is essential to making it profitable. The Cart Designer tool makes designing your site very simple. You can choose a theme, upload your logos, change your colors/fonts, and adjust your layout. This guide is a basic overview. For a more detailed training manual, see Cart Designer 101.
Applies to Version(s): 3.8.0 series
How to change your site theme
- Click Design.
- Use the scroll bar to take a look at the different templates available to your site. To preview the template, click on the Preview button.
- To activate the template, click on the Activate button.
- You will be presented with two options:
- discard my previous layout changes and use default layout (recommended) - This will set the theme with the default images and CSS of the theme.
- leave the layout changes I have already made - this will leave the images and layout changes from your existing theme. This includes left and right columns, as well as widget layout.
- Click Activate.
- Click Confirm if you want to install the demo products for the theme, otherwise click Cancel. If you add them, you can always remove them later with the click of a button.
How to edit your theme
Go to Design > Cart Designer.
The first thing you will notice in Cart Designer is that the elements of your site now have a red dotted line surrounding them when you hover over them. You will also see Right-click to edit. Whenever you see this appear around an element, it means the element's CSS and HTML can be edited.
Go ahead and right-click any section to see the options available to you. For most elements, you will see Edit Visual Properties and Edit Source Code. For the home element, the header, and the footer, you will see a third option, WYSIWYG Editor. These are explained below:
Edit Visual Properties - This brings up the Styles Editor, which is the tool that allows you to edit CSS. The Styles Editor will open up directly the element you're right-clicking on. See more about the Styles Editor here.
WYSIWYG Editor - In the web design industry, a WYSIWYG is a standard tool. It stands for What You See Is What You Get. It's an HTML creator. Again, this tool can only be used on the Home element (hover over the home page image for most themes), the header, and the footer. You can learn more about the WYSIWYG at How to Use the WYSIWYG Editor.
Edit Source Code - This will open up the HTML file for the element. Each section of your cart has it's own HTML file. Advanced users can use this tool to access their content.
The other thing you'll notice in Cart Designer is the Design Toolbar at the bottom. There are 5 different primary options; Edit Theme, Widgets, Themes, Settings, and Advanced Tools. The sub-options will appear above each of these once clicked:
Edit Theme - This is the default option selected. It gives you the following options:
Edit Site Images - This will bring up all of the images associated with a theme. You can use this tool to swap out the home page image, the logo, site slogan, and a host of others. Just click Browse next to the image you want to replace, and locate the new image on your machine.
Edit Site Colors - This tool gives you most elements and the color code currently assigned to them in the CSS. You can use this to assign your own colors to these elements. When you click on the color code field, a color picker will pop up that you can use to assign the color. Or you can simply enter the color code if you know it.
Edit Site Fonts - Similar to the Edit Site Colors section, this tool allows you to change most of the fonts on your site. The currently assigned font is listed, and you can choose a different one from the drop-down menu. We recommend any font except for Comic Sans. That font can go away forever. Click Save when after your changes.
Widgets - Widgets allow you to push pre-made or custom-made boxes into the left or right column on your website. If you click the check-box next to one or both of these options, you will see an empty column appear next to your main content. You can then drag boxes up to these columns and drop them in. Once boxes are dropped in, you can click and drag them to re-arrange them in whatever order you like. After you've established which columns are enabled and where boxes will sit, click the Save button at the bottom right corner. If you want this layout to appear on every page, choose to Save for All Pages. If you only want it for the page you're on, Save for Current Page Only.
Themes - This will allow you to choose different themes while in Cart Designer. Click Get More Themes to see others.
Settings - Here you can set how many products appear on Catalog pages, or how many Recommended Products appear on Product pages and whether Email to a Friend appears or not.
Advanced Tools - This section has tools for editing CSS, restoring your layout or theme, and refreshing your theme. You can find out how to use these tools here.
To the right on the Toolbar, you have a few more options:
- Outline - Unchecking this will turn off the red dotted lines around your elements, but still allow right-click functionality.
- Save - This will save the layout of your site. You do NOT need to click this for HTML or CSS changes; those save automatically. You only need to click Save when you add/remove columns and boxes.
- Exit - This will leave Cart Designer and return you to the admin page. Also, when you activate Cart Designer, a cookie gets set in your browser which will turn Cart Designer on for any page of your website that you load. Exit will remove the cookie.
- Hide - this will minimize the Toolbar.
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.