Electro How to Create Electro Product Page

Theme: Electro · Section type: Template (Product)

The product template controls the layout of every product page in your store. Use it to choose how product media appears, which product details customers see, and which sections appear below the product, such as related products and a product comparison.

Note: The product template comes with these sections: Breadcrumb, Product details, Product sticky bar, Video banner, Icon with text, Detailed specifications, Testimonials, Product comparison (Product page), Collapsible content and Product recommendation. You can hide, reorder or add sections. Changes apply to every product that uses this template.

Electro product page with Grid 2 columns media, countdown timer and add-ons

What you can do

Open the product template and choose a media layout
Choose which product details appear
Sell more with add-ons, a countdown and back-in-stock requests
Set up the sticky bar, related products and comparison
See what customers see
Change the section and block settings
Fix common problems

Open the product template and choose a media layout

In the theme editor, open the page selector at the top and choose Products > Default product.
In the left sidebar, click Product details.
Under Media, choose a Media layout on large screen.
Choose a Media ratio for the main image.
Click Save.

Tip: Grid layouts show all product images at once on large screens. They work best when your products have 3–6 images with the same shape. On mobile, every layout shows the images as a slideshow.

Choose which product details appear

Each piece of product information is a block inside Product details. Most blocks can be added only once. Custom text, Custom liquid and Space can be added as many times as you like, and Popup content up to 10 times.

In the left sidebar, under Product details, click Add block and choose a block.
Drag the block to where you want it in the product information column.
Click the block to change its settings.
To hide a block without deleting it, click the eye icon next to it.
Click Save.

Block	What it shows
Title	The product title, with an optional share button.
Vendor	The product vendor.
SKU	The SKU of the selected variant.
Price	The price, an optional Sale badge, and the tax and shipping note.
Variant selector	Buttons, swatches or dropdowns to choose a variant, and the stock status.
Add-ons	Extra products customers can tick to add to the cart with this product.
Purchasing	The quantity selector, Add to cart button, dynamic checkout buttons and the gift card recipient form.
Description	The product description.
Highlights	Up to 4 key points with icons.
Pickup availability	Which store locations have the selected variant for pickup.
Popup content	A text link that opens a page in a popup, such as a size guide or shipping details.
Custom liquid	Your own Liquid code.
Custom text	Your own text.
Complementary products	Products from the Search & Discovery app that go well with this product.
Space	Extra space between two blocks.
Product attributes	Product metafield values shown as small badges.
Product specifications	A table of product metafields.
Disclosures	Product disclosures you set up in the Shopify admin.
Countdown timer	A countdown to a date and time.
Back in stock	A form customers fill in to ask to be told when a sold-out variant is back.

Tip: Use Space between blocks under General to set the spacing for the whole column, and add a Space block only where one gap needs to be bigger or smaller.

Sell more with add-ons, a countdown and back-in-stock requests

Add-ons

Under Product details, click Add block > Add-ons.
Under Products, choose a Source: Complementary products, Related products or Manual selection.
For Manual selection, pick the Products. For the other sources, set the products in the Search & Discovery app.
Click Save.

Countdown timer

Click Add block > Countdown timer.
Enter the End Date as YYYY-MM-DD (for example 2026-12-31).
Optional: enter the End Time as HH:MM. If you leave it empty, the countdown ends at 23:59.
Enter the End Text customers see when the countdown ends, or select Hide when countdown ends.
Click Save.

Back in stock

Click Add block > Back in stock.
Keep Show only when sold out selected so the form appears only when the selected variant is sold out.
Enter the Heading, Text and Button label.
Click Save.

Note: Back-in-stock requests are sent to you by email through your store's contact form. The theme doesn't email customers automatically. When the product is back, contact them yourself.

Product sticky bar: shows the product name and an Add to cart or dynamic checkout button when customers scroll past the product details. To add menu links, click Add block > Menu item and enter the Target section ID of the section to scroll to. To show section IDs, go to Theme settings > Appearance.
Product recommendation: shows related products from Shopify. To choose the related products for a specific product, use the Search & Discovery app.
Product comparison (Product page): compares the current product with its related products in a table. See "Product Comparison vs Product Comparison (Product Page) Section".
Detailed specifications: shows a full specifications table from product metafields. See "How to modify Electro Product Detailed Specifications settings".

What customers see

Media on large screens: images appear as you set in Media layout on large screen. With zoom on, customers click an image to open it full screen. With sticky on, the images stay in view while customers scroll the product information.
Media on mobile: images appear as a slideshow that customers swipe. Thumbnails appear below only if you select Show thumbnails on mobile.
Description below media: on large screens, the description moves under the images. On mobile, it stays in its block position.
Variants: when customers choose a variant, the price, images, stock status and SKU update.
Add-ons: customers tick the add-ons they want. The Add to cart button shows the total price, and the ticked products are added to the cart together with the main product.
Countdown: the timer counts down the days, hours, minutes and seconds. When it ends, it shows your End Text or disappears.
Back in stock: when customers pick a sold-out variant, the form appears. After they submit it, they see your Success message.

Two add-ons ticked, with the total shown on the Add to cart button

Settings reference

Product details: General

Setting	What it does
Color scheme	Sets the colors of the section.
Space between blocks	Sets the space between the blocks in the product information column, from 0 to 60 px.

Product details: Media

Setting	What it does
Media ratio	Sets the shape of the main images: Square, Portrait (2:3), Landscape (3:2), or Adapt to image to keep each image's own shape.
Media layout on large screen	Shows the main image with thumbnails on the left or below, an Image grid (one large image, then smaller ones), a Grid 2 columns, or a Carousel.
Enable zoom function	Lets customers open images full screen to zoom in.
Enable sticky when scroll on desktop	Keeps the images in view while customers scroll the product information.
Show thumbnails on mobile	Shows thumbnails under the slideshow on mobile.
Thumbnails ratio	Sets the thumbnail shape: Square, Portrait (2:3) or Landscape (3:2). Each shape is listed twice: the first three fill the shape and may crop the image, the last three fit the whole image inside it.
Media background	Sets the color behind product images with a transparent background.

Title, Price and Variant selector blocks

Setting	What it does
Title size	Sets the title size from H2 to H5.
Enable share	Shows a share button next to the title.
Show Sale badge	Shows a Sale badge next to the price when the product is on sale.
Show tax and shipping policy	Shows the tax and shipping note under the price.
Text size	Sets the price size, from 14 to 48 px.
Custom text color	Sets the price color. Leave it empty to use the color scheme.
Show stock status	Shows the In stock, Low stock or Out of stock line.
Show stock number	Shows how many items are left. Appears when Show stock status is on.
Selector type	Shows variant options as Button or Dropdown. To show colors as swatches, set it up in Theme settings > Product information.
Swatch size	Sets the size of color swatches, from 24 to 64 px.
Button size	Sets the size of variant buttons, from 28 to 72 px.
Space between options	Sets the gap between swatches or buttons, from 4 to 24 px.

Add-ons block

Setting	What it does
Heading	Sets the heading above the add-ons.
Heading size	Sets the heading size from H3 to H6.
Icon source	Shows an icon next to the heading: None, Theme library, Custom image or Custom SVG.
Icon size	Sets the icon size, from 12 to 48 px. Appears when you choose an icon.
Source	Uses Complementary products or Related products from the Search & Discovery app, or a Manual selection. The block is hidden on products that have no complementary or related products.
Maximum items to show	Sets how many add-ons appear, from 1 to 6. Appears when Source isn't Manual selection.
Products	Sets the add-ons for Manual selection. Connect a product list metafield to show different add-ons on each product.
Show variant picker	Lets customers choose a variant for each add-on. When off, each add-on uses its first available variant.
Select all by default	Ticks every add-on when the page opens.
Color scheme	Sets the colors of the add-on list.
Image ratio	Sets the add-on image shape: Square, Portrait, Landscape or Original.
Show product border	Draws a border around each add-on.

Purchasing and Description blocks

Setting	What it does
Show quantity selector	Shows the quantity selector next to Add to cart.
Show dynamic checkout buttons	Shows buttons such as Buy it now, PayPal or Apple Pay.
Show recipient information form for gift card products	Lets customers send a gift card to someone else, with a message.
Position	Shows the description With product information or Below media. Below media applies on large screens only.
Enable "More" button	Shortens a long description and adds a More button to expand it.

Countdown timer block

Setting	What it does
Heading	Sets the heading above the timer.
Heading size	Sets the heading size from H2 to H5.
Subheading	Sets a short line under the heading.
Content alignment	Aligns the heading and timer Left or Center.
Number size	Sets the size of the numbers from H1 to H6.
Hide when countdown ends	Hides the block when the time is up.
End Date	Sets the end date, as YYYY-MM-DD.
End Time	Sets the end time, as HH:MM. Optional. If it's empty, the countdown ends at 23:59.
End Text	Sets the text shown when the countdown ends.
Background Color	Sets the background of the timer.
Number Color	Sets the color of the numbers.
End Text (under Custom Color)	Sets the color of the end text.

Back in stock block

Setting	What it does
Show only when sold out	Shows the form only when the selected variant is sold out.
Color scheme	Sets the colors of the form.
Heading	Sets the heading of the form.
Heading size	Sets the heading size from H2 to H5. Appears when the heading isn't empty.
Text	Sets the text under the heading.
Your message	Sets the note in the email you receive. The customer's email, the product and the chosen variant are added automatically.
Show variant selector	Lets customers choose which variant they want. Hidden for products without variants.
Variant selector label	Sets the label of the variant selector. Appears when Show variant selector is on.
Show mailing-list opt-in	Adds a tick box so customers can ask to join your mailing list. Their choice is written into the email, and you add them yourself.
Mailing-list label	Sets the text of the tick box. Appears when the opt-in is on.
Tick the opt-in by default	Ticks the opt-in box when the form opens. Appears when the opt-in is on.
Button label	Sets the submit button text.
Button style	Sets the button to Primary or Secondary (shown as "Seconday" in the editor).
Full-width button	Makes the button as wide as the form.
Success message	Sets the text shown after the form is sent.

Other blocks

Setting	What it does
Highlights: Display style	Shows the items as Icon blocks or as collapsible rows (Collapsibles content).
Highlights: Icon position	Places icons at the Top or Left of each item. Appears with Icon blocks.
Highlights: Item 1–4	Sets an icon, Heading and Content for each item. Leave the heading empty to hide an item.
Pickup availability: Show expected pickup time	Shows how soon the order is ready for pickup.
Popup content: Text label, Popup content	Sets the link text and the page that opens in the popup.
Complementary products	Sets the Heading, Products to show (1–10), Show vendor, Items per row on large screen (1 or 2), Layout (Carousel or Grid) and Image ratio.
Space: Desktop height, Mobile height	Adds space, from 0 to 100 px, separately for desktop and mobile.
Product specifications	Sets the Heading, Show as Collapsible content, and the Metafield keys to show, separated by commas.
Disclosures: Heading, Collapse content	Sets the heading and whether the disclosures start collapsed.

Product sticky bar

Setting	What it does
Color scheme	Sets the colors of the bar.
Show product menu items	Shows the Menu item links in the bar.
Show purchasing in sticky product menu	Shows a purchase button in the bar.
CTA button	Uses Add to cart or the Dynamic checkout button.
Menu item: Menu label, Target section ID	Sets the link text and the ID of the section it scrolls to. Leave the label empty to hide the link.

Product recommendation

Setting	What it does
Color scheme, Heading, Heading size	Set the colors, the heading and its size (H2 to H5).
Items to show	Sets how many related products appear, from 1 to 10.
Items per row on large screen	Shows 3, 4, 5 or 6 products per row.
Items per row on mobile	Shows 1 or 2 products per row.
Enable carousel	Shows the products in a row that customers scroll sideways.
Show progress indicator	Shows a scroll bar under the carousel.
Content alignment	Aligns the content Left or Center.
Quick buy	Lets customers add products from the card: Don't use, Standard (variant picker), or Bulk order (all variants).

Troubleshooting

The Add-ons or Complementary products block doesn't appear.
With Complementary products or Related products as the source, the block is hidden on products that have none. Set them up in the Search & Discovery app, or choose Manual selection.

The description isn't below the images on my phone.
Below media applies on large screens only. On mobile, the description stays in its block position.

The countdown ends at the wrong time.
Check the End Date and End Time formats (YYYY-MM-DD and HH:MM). Without an End Time, the countdown ends at 23:59.

The Back in stock form never shows.
With Show only when sold out on, the form appears only when the selected variant is sold out. It stays hidden on products where every variant is in stock.

The Disclosures block is empty.
The block shows only disclosures that you set up for the product in the Shopify admin and set to show on the product page.

Updated on: 30/10/2026

Was this article helpful?

Thank you!