Global Theme Settings (Covent Garden)

In your control panel, go to Storefront > My Themes, and click the blue "Customize" button to launch Theme Editor. In the left hand column of the Theme Editor, click the panel labelled 'Global Theme Settings'

Global Container Width

You can easily control the maximum container width for the entire site with this field. Set up the value with a number only, correlating to the maximum width in pixels, i.e. 1800 or 1600.

This will limit the width of the main page container on large screens to whatever value you set.

Editorial Mode

We have developed a module that can link products to blog posts and list them in an article, and link related blog posts to product pages. To enable this feature, check the option in Theme Editor.

Linking Products to Articles

Our module allows you to include a shoppable list of products to the end of your blog article. This is useful if you want to write about product recommendations or review and compare products you sell.

Setting Up The Product List

To set up linked products in a blog post, you can do so by adding a tag on the blog post edit screen in your BigCommerce control panel, that begins RP: followed by the ID of a product you want to link.

For instance, RP:90 will link the product with the ID of 90 to the post on the frontend.

Include further products by delimiting the ID's with colons, i.e. RP:77:78:90. This will pull product ID's 77, 78 and 90 into the post when rendered on the frontend.

These special tags will not appear in the blog post tags section on the frontend.

To find the ID of a product in your BigCommerce control panel, search for a product you want to link and edit it. In your browser's address bar you will see the following: https://www.yourstore.com/manage/products/XXX/edit, where XXX will equal the product ID.

Adding Extra Content to the Related Product

You can pull related content into the product listings that have appeared in your blog post by setting up a custom field on the product edit screen in your store control panel. In the custom fields tab, create a new custom field with the label Blog Post Description (the label is case sensitive), and assign the value field content that you would like to display on the listing. Note that there is a 256 character limit on custom field values. This may include HTML.

Linking Articles to Products

You can add a featured blog post to a product page with our Editorial Commerce module. This is useful if the product has been featured in one of your articles and you want to give your customers further insight into the product, while keeping them on your site.

Linking the Article

To include a related blog article on a product page, in your control panel set up a custom field on the product with the label Related Content. Note that the label is case sensitive. In the value, paste the URL of the related blog post. Note that you must be using the blog on your BC site, not an external blog. Note that you are limited to 256 characters.

You can either enter the full URL, i.e. https://www.yourstore.com/blog/article-title/ or the absolute path, i.e. /blog/article-title/ (note the leading /).

Both the "Related Content" and "Blog Post Description" fields will not show up in the "extra details" section of the product page.

Animate Page Elements

Turn this option on to activate animations on scroll. This subtly slides and fades in elements as you scroll down the page.

Conversion Optimization Mode

Enabling this option overrides all other settings with our recommended settings to optimize for conversions. Currently this hides social sharing links on the product page and removes tabs (if the theme supports them).

As our CRO team continue to find proven methods of increasing conversions, we will bring in more features to this mode.

Price Ranges

If you have set up options that change the price of a product, enable this option to show the range of prices it can be purchased for on the product grid.

Restrict Purchase to Login

Enabling this option will hide prices and add to cart buttons until your customers sign in to the website.

Breadcrumbs

Here you can choose to display or hide the breadcrumb trail on small screens. We recommend hiding them on mobile devices as they can take up a lot of space at the top of the screen if they flow over more than one line.

Custom CSS

Enable custom store and checkout CSS to add overrides and additional CSS without having to edit your theme files. This allows you to use the master copy of the theme and still benefit from updates.

These files are loaded last so override all built in styles.

Before activating, you will need to create files named  custom.css and checkout.css locally. These correspond to the two options in the settings panel. You will need to upload these files via WebDAV to your store. Inside the Content folder, create a new directory called css, and upload your new CSS files to this location.

Developer custom CSS is an option used by Flair when setting up paid customisations.