How to Design Your Site Using Cart Designer

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

1. Click Design.
2. 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.
3. To activate the template, click on the Activate button.
   
   
   
   
4. 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've added them inadvertently, you can remove them anytime 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 around them when you hover your cursor. 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. Know more about the Styles Editor here.

WYSIWYG Editor -  In the web design industry, the What You See Is What You Get or WYSIWYG Editor is an HTML creator that 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 here.

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 them 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 the 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 to.

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. Click Save after you make any changes.

Widgets - Widgets allow you to push pre-made or custom-made boxes into the left or right column of 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 in whatever order you like. After you've established which columns are enabled and where the 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 - 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 of 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

Cart Designer 101

Adding / Editing Your Logo Using Cart Designer (with Video)

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.