The theme customizer is a default WordPress feature, and it is part of every WordPress website. This allows you to see a live preview of theme settings and make changes before you activate it.
To do that, you need to head over to Appearance » Customizer page.
How to Use the Theme Customizer #
After opening the theme customizer, you’ll see all customization settings on the left side of your screen, and the live preview of your website on the right side. Ecomly customizer just consists few settings that can be set up globally, like logo, typography, colors, buttons, and a few woocommerce basic settings.
Theme customizer comes with a set of default panels regardless of the theme you’re using. You need to click on the individual panels to make changes to them.
Global settings #
NOTE: In Customizer, you can set global values for typography and buttons padding, font size, font-weight, etc. All settings can be applied fully responsive for desktop, tablet, or mobile. These settings can be overridden with the Page builder settings for every page or template.
Typography #
Typography plays the most important role in the UX of a website. Therefore, we’ve focused on giving you a number of typography options that will help you customize your fonts using the Ecomly theme. Ecomly provides global typography options where you can make changes in one place and they will reflect globally.
From the Ecomly store dashboard, you can find settings under Appearance > Customize > Global > Typography
Base Typography #
This is the default typography that will apply to the entire website. Available options are –
- Family – Make your choice of Font Family from Nunito, Times New Roman, Sans Serif, etc. for the content on your website
- Variants – It is necessary to select font variants that you will be using on the website. Read more here
- Size – Select the default Font Size of the content on your website, you will also find the option to set the Text Transform i.e [None, Capitalize, Uppercase, Lowercase]
- Weight – Select the default Font Weight of the content on your website
- Line Height – Setting a value here would add a line-height to the website’s body and content
- Paragraph Margin Bottom – Set a default Paragraph Margin Bottom for the Body and Content
Font Family
Ecomly allows you to use System Fonts, Google Fonts, Typekit Fonts as well as Custom Fonts on your site. You can easily include Custom Fonts with Ecomly without adding a single line of code.
Headings #
Headings Typography can be found under the Customizer > Global > Typography > Headings. You can set common font style and individual font size for all Headings – H1 to H6.
Note: If you are using a page builder, you can override the above Typography with the page builder’s Typography settings for specific sections.
Colors #
With Ecomly, you can keep a uniform color scheme on your website with global color options. These colors will be applied to theme sections throughout the website.
From the Ecomly store, dashboard navigate to Appearance > Customize > Global > Colors.
Base Colors #
This is the default basic color option available with the theme. Following are the options you will find:
- Text Color – Color for body text and description on the website
- Theme Color – Color for all theme elements like button, selected text background color, etc.
- Link Color – Color for all text to which links have been added
- Link Hover Color – Hover color for all text to which links have been added
- Background (Color and Image) – This color will be applied as a background color to the body on the entire site. If you set both – color and image – make sure to adjust the opacity of the color to make the image visible.
If you are using a page builder, you can override the above colors with the page builder’s color settings. Also, overriding the theme colors can affect your color consistency across pages. Page builder colors will be applied to your content build with the page builder. On the other side, other pages and posts (not built by that page builder) will still use the theme settings. Thus, it could happen, for example, that your text or heading font color is different on your pages (created using page builder) and your Blog Archive or Posts. It’s important to keep in mind that this should be checked, as the settings will not be automatically synced.
Content #
Color setting for each heading.
Global Container #
A container is an area where we display the content. In general, the container encloses the whole page. The content area and the sidebar are parts of the container. The content area is technically called the primary container, whereas the sidebar is the secondary container.
You can apply container layouts globally for the entire website through the Customizer option at Appearance > Customize > Global > Container.
Different containers can be applied for individual pages and posts from meta settings. These are page-specific settings that have high priority than customizer settings. If this setting not work for all pages, please refer to contact our support.
Note: Container settings are set up for the best UI/UX experience, and pages are designed to match container layout from current settings. If you want to make changes, please contact our support first for advice.
Buttons #
The Ecomly Button Presets are premade sets combining different Customizer settings, which you can use to style your buttons. Furthermore, you can apply these presets to any of your website’s buttons with just one click.
Each preset contains different button settings like padding and border-radius, text, background, and border color. These presets provide different button styles for you to choose from.
Once a preset is applied, it will automatically apply all settings for that button. Thus, you don’t need to do the settings over and over nor add CSS manually to design multiple buttons. Just choose a style you wish to apply, and that’s it.
Follow these steps to apply your button styles:
Step 1 – Navigate to Appearance > Customize >Global > Buttons
Step 2 – Click on the desired Button Style. You can try them all. Applying the new presets will change all button settings to adjust it to the selected style.
Step 3 – If needed, you can modify these buttons after the style is applied.
Step 4 – Click the “Publish” button to save the changes.
If you need to revert the button style, you can use the “Reset” button:
Scroll to Top #
When enabled, a simple click on the icon will take you right to the top! It allows the visitor to easily scroll back to the top of the page. The button appears only when the user scrolls down. It is useful for one-page websites as well as long content-based websites.
To disable this feature, just change the icon size to “0”.
Logo and favicon #
To change logo and favicon navigate to Appearance > Customize > Header builder > Site title & logo
This is your Site Identity & Logo element. In the General tab, you can add your Logo, set Logo width, and add a Different Logo for Retina devices.
Using this element, next to Logo, you can set your Site Title, Site Tagline, and your Site Icon (favicon). This information is also displayed on the top of your website tab in your browser.
Woocommerce settings #
Store notice #
Enable store notice while your store is still in development.
Product images #
Set up product images cropping format.
Cart #
These options let you change the appearance of the WooCommerce checkout. Note that checkout is built with the template, so most of the settings will not work and can be set up directly from the checkout template.
Additional CSS #
Add your own CSS code here to customize the appearance and layout of your site.
