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:
- Quick shop
- Product card
- Filter & sort
- Product information
- Collection card
- Email address & phone number
- Blog post card
- Social media
- Quick links
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 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 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
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 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.
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.
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.
- System fonts load faster and might appear differently on various devices. If you want to specifically choose a font for your website, please pick a font from Other fonts group.
- While using a custom font for your theme can be visually appealing, it is not recommended as it can lead to errors and be difficult to maintain. We recommend choosing a font from Shopify’s supported font list to avoid these issues.
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|
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.
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.
Electro theme offers four different product image ratios to accommodate your preferences:
- 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 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.
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.
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.
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:
To customize the color or other options for your store, you can follow these steps:
- 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).
- If the entered variant name and HEX code match an existing variant in your store, that particular variant will be assigned a custom value.
- Check if it works in your product details page.
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 “.
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:
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:
- 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.
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.
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.
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.
This section allows you to enable the display of a featured image and select the image ratio. You can choose from:
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.
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.
Electro theme allows you to connect with most of social media are:
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,…
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.
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 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.