How to Use Electro Product Template

How many sections could I add to the Electro Product Template?	25
Can I remove Breadcrumb from Electro Product Template?	Yes
Can I add collections to Electro Product Template?	Yes
Can I use the same Product Template for all products?	Yes

1. About Electro Product Template

Electro Product Template has four default sections:

Product Details: This section includes the product name, description, price, images, and other key information about the product.
Product Recommendation: This section recommends similar products that the customer might also be interested in.
Product Sticky Bar: This bar stays at the top of the page as the customer scrolls down, and it can be used to promote a special offer or other important information.
Details Specifications: This section provides detailed information about the product, such as its dimensions, weight, and materials.

These sections cannot be removed from the product template but can be hidden.

Any other sections can be freely added or removed.

2. Product Details Section Configuration – Electro Theme

This section includes the product name, description, price, images, and other key information about the product.

This section will be added in the Product template as default. You can settings for this section with these options:

2.1 Product Details General Settings

There are 2 ways to set the color scheme for this section:

Scheme 1: This option will be chosen by default for the section.
Scheme 2: This is the 2nd option that you can choose for the section.

This scheme can be created and changed by going to the Theme settings and clicking on the “Colors” tab.

The color scheme that you choose will be applied to both the background and text of the section.

2.2 Product Details Media Settings

The media settings in this section control the shape of the main product image and the thumbnail list.

Media ratio: This determines the shape of the main product image. You can choose from:

Square: The image will be square, with equal width and height.
Portrait (2:3): The image will be taller than it is wide, with a ratio of 2 to 3.
Landscape (3:2): The image will be wider than it is tall, with a ratio of 3 to 2.
Adapt to image: The image will retain its original aspect ratio.

Thumbnail ratio: This determines the shape of the thumbnail list. You can choose from:

Fill: The thumbnails will be stretched to fit the width of the list.
Fit: The thumbnails will be cropped to fit the width of the list.

In addition to the media ratio and thumbnail ratio settings, you can also enable the following functions for the media on the product details section:

Enable zoom function: This will allow customers to zoom in on the main product image.
Enable sticky when scrolling on large screen: This will keep the main product image in place when the customer scrolls down the page.
Show thumbnails on mobile: This will show a thumbnail list of the product images on mobile devices.

2.3 Product Details Blocks Configuration

The Product Details section supports 14 blocks that you can use to show all information about your products. These blocks include:

Title: The title of the product.
Rating: The rating of the product.
Vendor: The seller of the product.
SKU: The SKU of the product.
Price: The price of the product.
Variants selector: A selector that allows customers to choose different variants of the product, such as different colors or sizes.
Purchasing: Information about how to purchase the product includes quantity, the Add to cart button, and the Buy now button.
Description: A description of the product.
Highlights: Key features of the product.
Popup content: Custom content that appears in a popup window.
Custom liquid: Custom code that can be used to add dynamic content to the product page.
Custom text: Custom text that can be added to the product page.
Pickup availability: Information about whether the product is available for pickup in-store.
Complementary products: Products that are complementary to the product being viewed.

You can remove any block by clicking on the block you want to remove and hitting “Remove block.” Each block can only be used once, except for Popup content, Custom Liquid, Custom Text, and Highlights.

The settings for these blocks are similar to the Feature Product’s blocks settings. You can learn more about how to set up these blocks by checking out the Feature Product documentation.

To customize each item in the Product Details section, simply click on the block you want to edit. You can also add new theme blocks by clicking the “Add block” icon.

The Popup content, Pickup availability and Complementary products blocks have the following settings:

The Popup content section allows you to add a text button to your product page that, when clicked, will open a lightbox with a popup modal that contains the content of a product metafield or a page on your store. This section can be used for a variety of purposes, such as: Providing additional information about the product, promoting related products, generating leads to collect customer emails or other contact information or upselling.

To change the button text, simply click on the text placeholder and type in your new text.

To choose a page for the popup content, click on the “Select page” button. This will open a modal window where you can select a page from your store.

To show product metafield for the popup content, click on the icon in the top right corner of the block. This will open a modal window where you can choose a product metafield to display.

2.3.2. Pickup Availability

Pickup availability shows customers which of your physical stores have the selected product variant in stock. By default, the expected pickup time is also shown, but you can disable this option if you don’t want to.

This feature is helpful for customers who want to pick up their order in-store. It allows them to see which stores have the product in stock and how long it will take to pick up their order.

2.3.3. Complementary Products

The Complementary products block allows you to show products that are often bought together. To select these products, you need to use the Search & Discovery app. You can learn more about complementary products here.

In this block, you can:

Set a heading for the complementary products.
Adjust the number of products to show, from 1 to 10.
Enable carousel navigation, which allows customers to swipe through the products.

3. Electro Product Recommendation

The Product recommendations section in the Electro theme displays a list of products that are similar to the product that the customer is viewing. The recommendations are based on the product information and orders, and they can be customized using the Search & Discovery app.

To learn more about product recommendations and related products, you can visit the following Shopify help article.

The Product recommendations section in the Electro theme includes two settings:

3.1. General

You can change the heading content for the Product Recommendation section in the Heading box, or insert dynamic sources to replace Product Recommendation section heading.

3.2. Layout

The Layout settings for the Product Recommendation section allow you to control the following:

Number of items to show: By default, the section will show 4 items. You can change this number from 1 to 10.
Items per row on mobile: By default, the section will show 2 items per row on mobile devices. You can change this to 1 or 2 items per row.
Enable carousel: This option will show the product list as a carousel instead of rows.
Show progress indicator: This option will show a scroll bar at the bottom of the carousel.
Content alignment: This option controls the alignment of the product images in the section. You can choose between “Left” and “Center.”

4. Product Sticky Bar

The Product sticky bar in the Electro theme is a section that appears at the top of the product page after the customer scrolls down. It typically contains information about the product, such as the product name and price. The sticky bar can be customized to include other information, such as product menu items, add to cart button, or dynamic checkout button.

The sticky bar only starts working after the customer scrolls past its position. This means that the sticky bar will not appear at the top of the page when the customer first opens the product page. Instead, it will appear when the customer scrolls over the sticky bar section.

This feature can be helpful for keeping important information about the product visible to customers as they scroll down the page. It can also be used to promote related products or encourage customers to add the product to their cart.

The Product sticky bar section in the Electro theme includes 3 settings:

4.1. General

There are two color schemes available for this section. To change the color scheme, you can update your theme settings. To learn more about theme settings, please visit this link.

Scheme 1: This is the default option for the section.
Scheme 2: This is the second option for the section which can be changed in the Theme settings.

You can choose the color scheme that best suits your brand and your product pages.

The Sticky menu is a feature that allows customers to scroll to specific sections of your website by clicking on menu items. You can also choose to show or hide product menu items in the sticky menu.

If you disable the product menu items in the sticky menu, the section will look like this:

4.3. Purchasing

The Electro theme supports a Sticky Purchasing Bar. By default, the option to Show purchasing in the sticky product menu when scrolling is enabled. However, you can also disable it.

For the purchasing button on the sticky bar, you can choose between:

Add to Cart Button: This button adds the product to the customer’s cart.
Dynamic Checkout Button: This button takes the customer directly to the checkout page.

For more details about Product Sticky bar, you can check the video tutorial below:

When the Show product menu items option is turned on, you can customize the settings for each menu item that will appear on the Sticky bar section.

Each menu item is a text button that can be used to redirect visitors to any section on the page. To set up a menu item, follow these steps:

Click on the menu item.

Copy the section ID that you want visitors to scroll to. You can turn on the Section ID in Theme settings.

Paste the ID in the Target section ID placeholder.

Once you have set up the menu item, it will appear on the Sticky bar section. When customers click on the menu item, they will be redirected to the section that you specified.

5. Details Specifications

The Electro Shopify theme has a built-in feature that allows you to add product details specifications to your products. This can be helpful for providing customers with more information about your products, such as dimensions, weight, materials, and other specifications.

To learn more about this section, please check out this article.

6. Frequently Asked Questions

6.1. What is the Product Template?

Electro Product Template is the default template page to display all products available on your store. By this way, you could create a consistent vibe to visitors, also to save time, as you wouldn’t have to check 1 by 1 to make sure that all your product pages are well optimized.

6.2. What is The Difference Between Electro Product Template and Page Template?

The Electro Product Template is used to display products, and the page template is here to different types of contents, for example: About Us, Contact Us, Collection Page…

6.3. Can I Remove Product Details from Electro Product Template?

No, for the Product Details, Product Recommendation, Product Sticky Bar and Details Specifications, you can only hide it, but not remove it as they are parts of the basic product template!

Electro

General Settings

All-Template Sections

Template-Based Sections

Customer Page