(V5) How do I configure the theme settings? Print

The theme settings screen is set up in tabs, giving you the ability to set a number of options for the design of your site:

General Tab - Change things like which footer sections are visible, the width of your theme, and what menus are displayed in the left fly-in side menu (note fly-in menus are called "off-canvas" menus in technical jargon because they are positioned off the side of the screen and are scrolled into view when needed).

Pages Tab - Change default grid and image sizes for the category page (where the list of all the products is shown), for an individual product page.

 

Font Tab - Edit Custom and Google Fonts for your site. See this article for more information.

Layouts Builder (formerly Layouts Management) - Where you can place blocks of content to personalise the website to the look and feel you are trying to achieve.

Customization - Access to a live visual design editor where you can make changes to the colours and styling of your whole site, or for a specific page. You also get a button that leads you to the custom CSS, custom JavaScript, and custom code page to add your own code.


Some are covered below.




General Tab

Theme Layout Width - Manually set your website's width. You can make it narrow or wide (full screen/edge to edge). Try different settings and find the one that works for you. It affects the width of your slideshow, products, footer, and everything else.

Enable Menu Footer - The menu footer is where the columns of links appear in your footer. You can hide this whole section if you wish by setting this option to 'No'. You can edit the actual menus that are shown in this section under Design > Footer Menus.

Enable Widget Footer - The widget footer is the area directly above the footer of links. In the demo store, it is used to display a newsletter subscribe box, but you could put different content there. If you wish to disable this whole section, then choose 'No' for this option. If you choose 'Yes', you can add a block to it in Layouts Builder. 

Template Layout Mode - Tells the cart whether to display the site as the full screen width or a fixed set layout size.

Layout Header - Choose from some pre-defined layout placements for your header piece. You can customize them using the Visual Editor or Custom CSS in Customization.

Offcanvas Menu - The cart includes a fly-in menu for customers with helpful and useful information in it. Whilst you can add/remove content to the flyout, this block position must include at least one menu type - either a standard categories tree, or the mega menu. 

Enable Quickview - whether you want to enable quick view pop up when you view products in a category page.


Pages Tab

The pages tab allows you to set page-specific theme settings. There are three sub-sections here: for Category Listing pages, Product Pages and the Contact Us page.

The Category Listing - Products section lets you configure how category pages appear where your catalogue of products in a particular section are shown. In this section, the Display Product Modes tells the shopping cart whether products in a category screen should be shown in grid format (where products appear side by side in rows), or list format where they're displayed one per line.

Grid format is like this:



List format is like this:



Customers have a button on the category page where they can set their own default, and future page listings will be shown to that visitor in that format until they change their mind. But, a new customer coming in for the first time, will get the setting that you have chosen as the default view.

The Desktop size, Tablet size and Mobile size settings will usually be set to auto. If you want to manually override the cart's settings about how content is displayed you can make this setting change here. The cart's graphics engine divides the screen up into 12 invisible columns and then one column of website content is placed into those 12 columns. The choices are a proportion of the 12 total columns. For example, to have 3 columns, you would choose a width of 4, whereas to have content displayed in halves, you would choose 6. 

You can also control what happens when a visitor hovers over an image in a category. By default, the cart will show an add to cart button on hovering over an image. If you don't want this to happen set the Enable Product Popup setting to No.




The Product section of the Pages tab controls the display of an individual product page. By default, the cart has a built-in image zoom feature that zooms in on products to show visitors a closer up version. You can turn this feature on or off and control how it looks. 



There are three zoom styles to choose from - the default that's set up for you (shown above) is the inner zoom. There are two alternatives - lens zoom:



Lens zoom can be set up to have a square lens or a round lens by the setting Lens Zoom Shapes. Basic is square, or Round is circular.




and basic zoom:





If you expect to serve a lot of customers on mobile devices, you may find that inner zoom works the best for you as the zoomed image sits inside the original container of the product - which makes it easier to fit on small screens.

The other zoom option is Easing. This controls the transition from showing the original to showing the zoomed box. For an on/off effect, choose 'No'. For the zoom box to gradually appear or disappear then choose 'Yes'.

Other theme related options on the product page include:

• The width of columns for related products shown on the product page. Full width is 12 columns, choosing a different number gives you a proportion. Unless you wish to override the default behaviour, just leave it at auto.
• Show QR code on product page. QR codes are like special bar codes that can be scanned by mobile phones. You can add a QR code with your page URL to the page so if it gets printed out, visitors can get back to your page quickly by scanning the printout. Useful for printed product promotions.
• Add custom tab. If you want to display a tab of content on every product in your store then you can use a custom tab. This is very useful if all the products in your store are similar and you want to include some general information that you don't want to have on another page. Your tab can include any information in it, including video. It gets automatically added to all of the products in the store.

In the Contact page sub-section you can put in the co-ordinates of your store if you would like to show your visitors where you are located on a Google map. You need your own API key from Google - see the Google Maps API knowledge base article for more information on this.

You can then enter the latitude and longitude of your location. If you don't know how to do this - here's how to find out the co-ordinates of any location.

You can also enter the text that appears above your Contact Us form. The box accepts HTML.

Layouts Builder Tab
Layouts and blocks are the basic building block of your site - for detailed instructions on how to configure this see the Layouts Builder article.

Customization
You can edit and adjust the styling of your website, like setting the colours of various screen elements and changing the fonts or padding for any individual page or the site as a whole. You can do this in front of your eyes using our Live Visual Editor. Click the Customize button to open your site up in the live editor and start editing. Please refer to this separate article about how to use the live editor for more information about how this works.