Theme Settings

This article provides instructions on how to configure the theme settings in Electro theme. You can find the theme settings by clicking on the second icon on the menu bar.

On this page:

• Colors
• Typography
• Search
• Quick shop
• Product card
• Filter & sort
• Appearance
• Product information
• Collection card
• Breadcrumb
• Email address & phone number
• Blog post card
• Cart
• Social media
• Favicon
• Currency
• Quick links

Colors

You can change the colors used throughout your website by clicking on the left-side circles in the Colors category of Theme Settings. You can also click on each type to open the color selecting modal, where you can select the color or enter the color code. When choosing colors, be sure to follow accessibility guidelines.

General Color

General colors are only applied to sections that do not use a card scheme.

• Text: The default text color is applied to all texts, including headings, text links and outline button, when they are not inside a card scheme.
• Accent: The default accent color.
• Accent gradient: The default accent linear gradient.
• Page background: The default website background color.
• Field background: The default field background color. This setting is only applied to sections that do not use a card scheme.

Button Color

Button colors are used for both the labels and backgrounds of buttons.

• Button label: Apply for the primary button label
• Button background: Apply for the button backgrounds, borders, and also labels
• Button background gradient: Apply for the primary button background

Color schemes

The Electro theme supports two color schemes for texts and backgrounds, which are applied when the section uses a card scheme. There are two color schemes that can be set which are Scheme 1 and Scheme 2.

• Text: Apply to all texts, including headings, when the section uses a card scheme.
• Background: Apply for the background, when the section uses a card scheme.

Product badge colors

Product badge colors are used for both the labels and backgrounds of product badges.

• Sale badge label: Applied for the label used in the product sale badge.
• Sale badge background: Applied for the background used in the product sale badge.
• Low stock badge label: Applied for the label used in the product low stock badge.
• Low stock badge background: Applied for the background used in the product low stock badge.

Typography

To modify the Typography, navigate to Theme settings > Typography, where you have the option to change the font family for headings and body texts, as well as adjust the font scale level universally.

Font family

To change the font families of the Heading font and Body font, respectively, click on the Change buttons in each section. The styling of headings and body texts will then follow the default styling of the chosen font families.

Font Scale Level

To change the font size, you can change the value at Font Scale Level slider. Changing the font scale will change the overall font size, both heading and body font.

To change the font size, change the value at the Font Scale Level slider. The changes will be applied to the overall font size, both heading and body text.

Font Scale Level is based on Body Font size. It spans from level 1 to 5, corresponding to body font sizes ranging from 16px to 20px. The default scale level is 1, which is equivalent to a body font size of 16px.

Based on the selected body font size, heading font size will be calculated in geometric progression. Each view mode has a different common ratio, which is:

• Desktop large view (≥1681px): Type scale ratio = 1.414
• Laptop & Desktop regular view (1025px – 1680px): Type scale ratio = 1.333
• Phone & Tablet (≤1024px): Type scale ratio = 1.25

For example, on mobile view, heading font size is calculated by:

• Heading 5 font size = body font size * 1.25
• Heading 4 font size = body font size * 1.252
• Heading 3 font size = body font size * 1.253
• Heading 2 font size = body font size * 1.254
• Heading 1 font size = body font size * 1.255
• Headline font size = body font size * 1.256

Similarly, all font properties are calculated based on selected body font size, following typography formula bellow:

Line height	Body paragraph line height = body font size * 1.5
	Article paragraph line height = body font size * 1.618
	Subtext, heading line height = body font size * 1.618
Paragraph spacing	Paragraph Spacing = body font size / 1.5
Font weight	Heading, body font (bold style), subtext (bold style): font weight = 600
	Body font (regular), subtext (regular): font weight = 400

Search

In this section, you have the option to enable the ‘Show search filter’ on the pages. It’s important to note that the search filter will be generated based on the product type.

The Predictive search results allow you to choose which search results to show beside the product when customers are searching. There are 3 options: Blog posts, Pages and Collections.

In the Search results section, you can choose what will appear for customers on the search result page, including Blog posts and Pages. The products are selected by default.

Quick Shop

In this section, you can choose which information to show on your Quick shop pop up. You can choose to show the sale badge, the product quantity, the stock number, the dynamic checkout buttons, and the shipping policy.

• Sale badge: This will show a badge on product image to inform customers if the product is on sale.
• Product quantity: This will show customers how many units of the product are available.
• Stock number: This will show customers the exact number of units of the product that are available.
• Dynamic checkout buttons: This will show customers the payment methods that are available on your store. Please check more information about the dynamic checkout button here.
• Shipping policy: This will show the button to direct customers to your shipping policy page.

To add a Quick Shop button to each product card and display a pop-up when the button is clicked, you need to turn on the Enable quick shop feature in the Theme Settings > Product Card.

Once you have enabled the Quick Shop feature, a button will appear in each product card. When a customer clicks the button, a pop-up will appear with information about the product, such as the product name, price, and image. The customer can then add the product to their cart from the pop-up.

Product Card

Electro theme offers four different product image ratios to accommodate your preferences:

• Square
• Portrait (2:3)
• Landscape (3:2)
• Adapt to image

The Image fit type setting has 2 options for image fit:

• Cover: The image will scale up to fit its container.
• Contain: The image will zoom in to show that all of the image will be contained in its container.

You can also enable or disable various display options, such as:

• Show second image on hover: When you hover over the product image, a second image will appear. If the product does not have a second image, the product image will be zoomed out.
• Show vendor: Display the vendor name of the product.
• Show product rating: Display the product rating, if available. To display a rating, you must first add a product rating app. You can find more details here.
• Show color swatches: Display the color swatches for the product, if available.
• Show sale badge: Display the sale badge if the product is on sale.
• Enable quick shop: Display the quick shop button.

Filter & Sort

Filter and sort settings apply to both Collection and Search pages. You can select the following options to display:

• Enable product filter: This will allow customers to filter products by criterias that have been set up in the Search & Discovery app from Shopify.
• Expand all filter options by default on mobile: This will show all filter options by default on mobile devices.
• Enable sort: This will allow customers to sort products by criterias.

Appearance

In this section, you can adjust the opacity of the overlay that appears over images in certain sections of your store. This includes sections such as slideshows, content collages, featured product lists, and image cards.

You can select the color scheme for popups. There are two color schemes available: Scheme 1 and Scheme 2. These settings apply to theme components that pop into the screen when activated, such as notifications, modals, drawers, menus, and more.

You can also enable the Show section ID in the product template setting. This will add the section ID to the product template, which can be used to map the section with the product sticky menu item.

Product information

General

The default setting for displaying the low stock threshold is 5, and it can range from 0 to 10. If you wish to have no threshold, set it to 0.

Color Swatches

Electro supports color options that display as swatches. When ‘Color swatches to display’ is enabled, you can configure them following the mechanisms and rules below:

Color swatches rules

To customize the color or other options for your store, you can follow these steps:

1. Enter the variant name along with its corresponding HEX code into the “Color swatches rules” field under the format:  Format: <Variant option>: <value>(separated by lines).
2. If the entered variant name and HEX code match an existing variant in your store, that particular variant will be assigned a custom value.
3. Check if it works in your product details page.

Use image for color swatches

If you want to use an image for variant swatches, you will need to upload the image PNG file onto the Shopify Files. The Electro theme supports both PNG and JPG file formats.

Important note: The image variant can only be used with Color variant options.

Then enter the Name of the variant with the Image-name.png or Image-name.jpg. For example, I have uploaded the image file name ” prd-img ” and want to add it for the “Black” color so I need to add in the Variant swatches rules: ” Black: prd-img.png “.

Product Specifications

To showcase product specifications, provide the product metafield namespace. Please note that only the ‘One value’ metafield type is supported.

Note: If you are new to product metafields, learn more about them and how to use product specifications in this article.

Check this video tutorial below to learn more about How to set up Color Swatch (use Hex code and image for option swatch) in Electro theme:

Collection Card

General

In General, there are 3 settings for the Collection card: Overlay opacity, Image ratio and Show product count.

The overlay opacity setting allows you to adjust the transparency of the overlay that appears over collection images. The opacity can be adjusted from 0% to 90%, with 0% being completely transparent and 90% being completely opaque.

Electro theme offers three distinct collection image aspect ratios:

• Square
• Portrait (2:3)
• Landscape (3:2)

You can also choose to show or hide the product count in this section. The product count shows the number of products in the collection.

Prominent badge

To change the color scheme for the collection card, simply select Scheme 1 or Scheme 2 from the dropdown menu.

To show prominent badges on the collection section, you can select the Enable prominent badges setting in the Collection card section. To use this feature, you will need to create a metaobject named Badge and assign it to the collection metafields. You can then configure the badge appearance in the Collection settings. For more information on how to create metaobjects, please see this article.

Breadcrumb

This section allows you to enable or disable the display of breadcrumbs. Breadcrumb is a navigation trail that shows the user’s current location in a website or app. You can find more details about breadcrumbs here.

Email address and phone number

This is where you can enter your email address and phone number to set up your personal store. If you want to remove this information, simply delete the text in the text box.

Blog Post Card

This section allows you to enable the display of a featured image and select the image ratio. You can choose from:

• Square
• Landscape

In addition, you can enable or disable the following display options:

• Show blog’s tags: Only show the first tag of the selected blog.
• Show excerpt: Show a short summary of the blog post.
• Show published date: Show the date the blog post was published.
• Show author: Show the author of the blog post.
• Show “Read more”: Show a link to the full blog post.

Cart

There are two ways to display the cart page in Electro: drawer and page. You can select which type of cart you want to use, and you can also select which details you want to display with the cart.

The details you can display with the cart include:

• Product vendor: The name of the vendor who sells the product.
• Order notes: Any notes that the customer wants to add to their order.
• Dynamic checkout button: A button that allows the customer to checkout with the payment method they prefer.
• Tax and shipping information: The tax and shipping information for the customer’s order.

Social Media

Electro theme allows you to connect with most of social media are:

• Facebook
• Twitter
• Instagram
• YouTube
• Vimeo
• Pinterest
• LinkedIn
• TikTok
• Tumblr
• Snapchat

You can freely add or remove any social media accounts by connecting with their respective URL. If you do not want to connect with any of them, simply leave this part blank.

This can be used in multiple sections, such as the header, footer,…

Favicon

To add a favicon image, click the Select image button. This will open the media manager. You can either drag and drop your logo or select it if it has already been uploaded.

Note: The image size will be scaled down to 32 x 32 pixels to fit the normal size requirement for favicons.

Currency

The currency code is always displayed on the cart and checkout pages. This option allows you to show the currency code on other sections of your store, such as product cards and product details. If you disable this feature, the currency code will only be shown on the cart and checkout pages.

Quick Links

Quick links can only be shown in the top bar, menu drawer, and footer section. You can select a quick link by clicking on the Select menu button. We recommend limiting the number of quick links in your menu to 3. This will help to keep your menu uncluttered and easy to use.

To make adjustments to the Quick Link menu, simply click on it. This action will redirect you to the Navigation settings, where you can customize its configuration: