Theme settings
Within the theme editor, select Theme Settings to adjust the following settings that affect the whole theme:
• Theme Name
• Theme Width
• Font
• Colours
• Welcome popup
• Age verification popup
• Icons
• Lazy load images
• Customer accounts
• Hiding pricing
• Advanced options
Once you have finished adjusting any of your settings, don't forget to save your changes.
Theme Name
Use this setting to edit the name of the theme. This is for your internal use only.
Theme Width
Use the 'Theme Width' setting to determine the maximum width at which the theme will display. If you want to change the maximum width, simply drag the slider.
To restore the setting back to its default and recommended setting, select reset defaults.
Font
Use the ‘Font’ settings to change the fonts used in your theme. You can change the font used for the headings and the font used for the body. Select Change font and then select a new font from the list:
In the live preview editor you can see what the font you select looks like throughout the theme.
Colours
Use the ‘Colours’ settings to adjust the colour scheme on your theme.
If your theme is using the colour schemes system, consult the help guide here.
Global theme colours
By default your entire website will use the global theme colours that are preset for the theme:
You can adjust these global theme colours to change all instances of that particular colour where it appears in the theme.
Individual colour settings
If you want to adjust colours for a specific part of your website, for example the ‘product page’, then under the global colours is a list of different parts of your website.
Select which part you want to change the colours for, and the list of colours in that part will display. Untick the box beside ‘Use global theme colours’, and you’ll then be able to change the colour for each aspect of that page:
Changing colours
To change a colour (either global or individual) select the box that displays the current colour. A colour picker will display for you to select a new colour, or you can enter the hexadecimal colour reference if you know it:
You can see any changes you make in the live preview editor.
If you want to return to the default colour settings for the theme, select reset defaults.
Welcome popup
Use the ‘Welcome Popup’ settings to configure if you want a popup to appear to users when they first visit your website. The exact design of the popup depends on the theme you are using.
Use the tickbox beside ‘Enable popup’ to determine if the popup should appear. Place a tick in the box if you want it to appear, and untick the box if you don’t. Use the Trigger popup in preview button to force the popup to appear in the preview so you can see what it looks like.
Use the ‘Popup title’ and ‘Popup text’ fields to enter the text you want to display in the popup.
If you want to include an email field in the popup for users to enter their email address, place a tick in the box beside ‘Enable email field’. If you don’t want to include an email field, untick the box.
In the ‘Email instruction text’ field enter what text you want to display in the email field.
If you have installed one of the email campaign apps (MailChimp, Mailerlite or Klaviyo), and you have enabled the setting in the app page, email addresses entered in this field will be submitted to your account with them.
Age verification popup
Use the ‘Age verification popup’ settings to enable an age verification popup on your website. You might need one of these popups if you are selling age restricted items. The exact design of the popup depends on the theme you are using.
Use the tickbox beside ‘Enable popup’ to determine if the popup should appear. Place a tick in the box if you want it to appear, and untick the box if you don’t. Use the Trigger popup in preview button to force the popup to appear in the preview so you can see what it looks like.
Use the ‘Popup title’ and ‘Popup text’ fields to enter the text you want to display in the popup.
In the ‘Age verification fail URL’ field, enter the URL for where you want customers who fail verification (by selecting that they aren’t of age) to be sent. This URL must be to an external website and cannot be a page on your ShopWired website.
Icons
If you want to change an icon that displays on your website, you can find a different icon using Font Awesome and then replace the current one in the 'Icons' settings section.
To use Font Awesome’s icons, you will first need to create a free account with them. A free account only allows you to use their free icons, so if you want to use any of their ‘pro’ icons you will need to upgrade your account.
Once you have created your account, find ID of the kit you are using by selecting Kits from the top menu in your Font Awesome account. Unless you’ve changed the name of the kit, the name is the ID that you need. The ID should look something like this:
Enter the ID into the theme customiser under ‘Font Awesome ID’:
You can then change any of the listed icons. To change to a Font Awesome icon, select the icon you want to use within Font Awesome and a pop-up window will appear which displays some code. You will need to take part of this code and paste it into the field for the icon you wish to change. Copy all of the code that exists between the quotation marks, ensuring you haven’t included the quotation marks.
For example, for this icon:
You would copy and paste fa-solid fa-address-card.
Once you’ve added the code to the field, you will then be able to see the change in the live preview editor.
Lazy load images
Lazy loading can be used by websites to make their website load more quickly as it defers the loading of images until they are needed on the page. When lazy loading is enabled, the browser is told to not request images that cannot be immediately seen until the user scrolls down the page to where they are displayed.
To enable lazy loading, place a tick in the box beside ‘Lazy load images’. Untick the box if you want all of the images on a page to always load immediately when the page is loaded.
Customer accounts
If you have installed the reward points app and you are using it to run a referral scheme through your website, you can enable the ‘Display a referred friends page within the customer account area’ setting to allow customers to access a page within their account that displays a statement of the orders that have been received on your website from visitors they have referred.
Please note:
Specific details of the orders that have been placed (e.g. the address or products that were ordered) would not be visible.
Hiding pricing
If you have installed the trade accounts app, you can use the setting in 'Hiding Pricing' to determine if product prices should be hidden unless the visitor is logged into a trade account. Place a tick in the box if you want prices to be hidden, or leave the box blank if you don't want them to be hidden.
Advanced options
The advanced theme options available on your theme should only be used if you are making coding changes to your theme that involve SCSS changes and where you encounter a problem that you need to debug. These settings should only be used by advanced users. Most users will not need to activate these settings.
Enable source maps
Allow the browser to map CSS to its original SCSS file to help you pinpoint which SCSS file (and which line number) to look for the styles associated with a particular element.
Disable automatic SCSS compilation
Enabling this setting will disable SCSS compilation into CSS.
Show SCSS compilation errors
If your SCSS files fail to compile into a new CSS file for your theme, this setting can be used to help identify the problem. Once you’ve enabled the setting, open the page editor on your theme and access the theme's theme.scss file and open the browser console. Any compilation errors detected by the platform will appear here (although please note that ShopWired will not output compilation errors in all circumstances).