Boltech theme documentation

Boltech is a Shopify Online Store 2.0 theme for electronics and technology stores. It has a fast catalog, a detailed product page, a cart drawer, product comparison, store pickup, and full right-to-left support.

Version 1.0.0. Built by ESTASOFT TECHNOLOGIES.

1. Get started

Add Boltech to your theme library and select Customize.
In Theme settings > Colors, adjust the color schemes. Every section can use any scheme.
In Theme settings > Typography, choose the heading and body fonts. Boltech uses the fonts from the Shopify font library. It does not load custom font files.
In Theme settings > Favicon, upload a square image, at least 32 x 32 px.
Open the Header and choose your logo. The logo works with wide and tall images.
Create your menus in Content > Menus. Use main-menu for the header and footer for the footer. The header also has a Shop all menu (up to three levels) and Utility links.
Add your products and collections. Add the product fields listed in section 6 if you want key features, specifications, and comparison.

Tip: duplicate your theme before you make large changes, so you can go back.

2. Pages and templates

Template	Purpose
Home page	Add any sections from the library.
Collection, Collection (brand), Collection (category)	Product grid with filters, sorting, grid and list view, and an optional promotion tile.
Product, Product (gift card), Product (pre-order)	Gallery, variant picker, purchase panel, tabs, specifications, and related items.
Cart	Cart page or cart drawer. Choose in Theme settings > Cart.
Search	Product, page and article results with predictive search.
Blog and Article	Guides with a contents list, share buttons, author box, and related products.
Pages	Default, About, Landing, Deals, Policy, Help, Contact, Trade-in, Order help, Stores, Brands, Compare, and Saved items.
Customer accounts	Sign in, create account, reset password, activate account, account overview, order, and addresses.
Gift card	The page shoppers open from their gift card email. It includes a QR code.
Password and 404	Store password page and page not found.
Store (metaobject)	Details for a single store. See section 7.

To use a page template, open the page in your admin and choose the template in the Theme template list.

3. Header, menus and footer

The header and footer are section groups. You can add, remove and reorder sections in them.

Announcement bar: rotating messages. Shoppers can pause them, and you can let them dismiss the bar.
Header: logo, search, account, saved items, and cart. The account icon opens a sheet where shoppers sign in and reach their orders and profile. Choose its links with Customer account menu. The header can stay in view while the shopper scrolls (Theme settings > Store features > Sticky header).
Shop all panel: a large menu with up to three levels and optional image tiles.
Footer: link lists, text, newsletter signup, social links, a Follow on Shop button, payment methods, and the country and language selectors. The button shows only when Follow on Shop is set up for your store, and you can hide it with Show Follow on Shop button.

4. Sections

Add sections with Add section in the theme editor. Every section has a Section style group: color scheme, top and bottom padding, full width, hide on mobile, hide on tablet and desktop, and an anchor ID.

Sections that show a product (Main product and Featured product) accept app blocks and Custom Liquid blocks.

Banners

Section	Blocks
Announcement bar	Message
Countdown banner	None
Hero slideshow	Slide
Image banner	None
Promo grid	Promotion
Video	None

Hero slideshow

Choose a look with Style on the section. The slides (blocks) stay the same, so you can switch at any time.

Style	What it shows
Showcase	Copy on one side and the product on a glowing stage on the other, with an offer badge, a pause button, one progress bar per slide, a counter and previous and next arrows. This is the default.
Spotlight	The main slide plus an Up next list with one card per slide. On tablet and phone the list becomes a row under the slide that scrolls sideways.
Cover	A wide photo behind the copy, with a tab bar along the bottom that lists the slides.

Each Slide has an image (product, on a transparent background), a cover photo (Cover style only), a kicker, heading, text, a button, a second link, an offer badge, and a color scheme. Only the heading is required.

Cover photo: use a wide photo, about 2400 x 800 px, with the subject on the side away from the text. Set the focal point on the subject in the image picker so it stays in view on phones. Without a cover photo the slide shows the product image on the color scheme background.
Autoplay: off by default. It never starts in the theme editor or for visitors who prefer reduced motion, pauses on hover and keyboard focus, and the pause button is always shown.
Colors: the controls follow the color scheme of the visible slide.

Collections

Section	Blocks
Brand directory	Featured brand
Brand wall	Brand
Category circles	Category
Featured collections	Collection
Sub-category list	None

Products

Section	Blocks
Deal rail	None
Featured product	Custom Liquid
Product	Variant picker, Key features, Text, Price, Delivery and pickup, Protection plans, Gift card recipient, Buy buttons, Save, compare and share, Trust list, Related items, Description and specifications tabs, Specifications, Compare similar items, Frequently bought together, Custom Liquid
Product rail	Product list
Product recommendations	None
Recently viewed	None

Content

Section	Blocks
Collapsible content	Question
Custom Liquid	None
Image with text	None
Multicolumn	Column
Rich text	None
Services	Service
Team	Team member
Tech guides	None
Testimonials	Testimonial
Timeline	Event. Style: Milestone cards or Big years.
Trust bar	Item

Customer service

Section	Blocks
Contact form	Contact method, Opening hours, Quick answers
Email signup	None
Help center	Question
Order help	Help card
Sign-in strip	None
Store locator	None
Trade-in request	Step

5. Theme settings

Colors

Background
Button background
Secondary button background
Secondary button label
Links and outline buttons
Focus ring
Sale badge background
Page color scheme. Used for the page behind all sections.
Card and field background
Text on cards and fields
Links on cards and fields
Product image background
Navy panels
Deep navy panels
Dark buttons and panels
Promotion strip
Savings text
Savings badge background
Errors and sold out
Rating stars

Typography

Heading font
Body font
Right-to-left font. Used when the store language reads right to left. Choose a font that supports Arabic script.

Layout

Page width
Card corner radius
Button and field corner radius
Round panel corners

Product cards

Card style. Classic shows swatches, the old price and a full-width Add to cart button. Compact shows a square image, the rating, the price and a round add button, and fits one more card in each row of a collection. Detail adds a brand line, a short summary, up to three key feature chips and the stock state, and shows one card per row on phones. Detail reads the product metafields custom.summary and custom.callouts (see Product data) and leaves them out when they are empty. The setting changes every card in collections, search, product rails and recommendations.
Show brand
Show rating
Show color swatches
Show savings and old price
Image shape
Image fit
Show second image on hover

Cart

Cart type. Drawer opens after Add to cart. Page goes to the cart page.
Free delivery from. Order total in your store currency. Leave empty to hide the progress bar.
Show order note
Show gift message
Show shipping estimate
Show upsell products in the drawer
Show express checkout buttons

Shopping features

Predictive search
Quick view
Quick add
Compare products. Selected products are remembered in the shopper's browser. A Compare button appears in the header once a product is selected. It shows the count and opens a small panel with the chosen products, a Compare now link and Clear all. Products to compare sets the limit from 2 to 4.
Saved items. Saved products are remembered in the shopper's browser.
Sub-category tiles
Promo tile in product grid
Recently viewed products

Product page features

Image zoom and lightbox
3D and AR button
Quick buy button. A floating Add to cart that appears once the main button has scrolled out of view. Choose Side tab (image, price and a round button on tablets and desktops, a small floating button on phones), Floating button, or Off. It never sits in the header or at the bottom of the screen. Theme settings > Product page features > Quick buy button.
Sticky purchase panel on desktop
Related items card
Protection plans
Store pickup availability
Back-in-stock notification form
Price-drop notification form
Review summary. Shows ratings stored in the standard product rating metafields.

Store features

Sticky header
Store locator link
Trade-in link
Gift cards link
Guides link
Newsletter pop-up
Cookie banner
Breadcrumbs
Back-to-top button

Language and region

Country selector
Language selector
Show currency code next to prices
Right-to-left layout
Right-to-left languages. Language codes separated by commas. The page direction switches for these languages.

Search

Show brand in search results
Show price in search results
Products in search suggestions
Popular searches. One search term per line. Shown in the search overlay before the shopper types.

Product data

Specification namespace. Each field in this namespace becomes a row in Specifications and Compare.
Badge field. Product metafield (namespace.key) with the badge text. Sale badges are added automatically.
Rating value field. Product metafield (namespace.key) with the average rating.
Rating count field. Product metafield (namespace.key) with the number of reviews.

Social media

Facebook
Instagram
X
YouTube
TikTok

Social sharing image

When a link to your store is shared, products, collections and articles use their own image. Every other page uses the image you add in Online Store > Preferences > Social sharing image.

Favicon

Favicon image. Shown in the browser tab. Use a square image, at least 32 x 32 px.

6. Product data

Boltech reads extra product details from metafields. Create the definitions in Settings > Custom data > Products. All fields are optional. A block or section shows nothing when its field is empty.

Metafield	Type	Used for
`custom.key_features`	List of single line text	The Key features block.
`custom.related_items`	List of products	The Related items block. For example, other configurations.
`custom.compare_with`	List of products	The Compare similar items block.
`custom.bundle`	List of products	The Frequently bought together block.
`custom.badge`	Single line text	Badge text on product cards. Sale and sold out badges are automatic.
`custom.summary`	Multi-line text	A one or two sentence summary. Shown under the title in the Showcase product page style and on Detail product cards.
`custom.callouts`	List of single line text	Up to three short feature labels. Shown as chips on Detail product cards and as image callouts in the Showcase style.
`reviews.rating`	Rating	The average rating. These are the standard review metafields.
`reviews.rating_count`	Integer	The number of reviews.
`specs.*`	Single line text	Every field in the specification namespace becomes a row in Specifications and in Compare. Change the namespace in Theme settings > Product data.

You can change the namespace and key of each field in the block or in Theme settings > Product data.

Article metafields (Settings > Custom data > Articles):

Metafield	Type	Used for
`custom.author_bio`	Multi-line text	The author box under an article.
`custom.picks`	List of products	Related products shown with the article.

Gift cards

Create a product and select This is a gift card. Assign the Product (gift card) template. The Gift card recipient block lets the buyer send the card to a person by email on a chosen date.

Pre-orders

Assign the Product (pre-order) template and set the product to continue selling when out of stock. The button changes to Pre-order now. Boltech does not charge or manage pre-order payments. Use a pre-order app if you need that.

Protection plans

Create each plan as a product. In the Protection plans block, pick up to three plans. The plan is added to the cart as a separate line.

7. Stores

The Store locator section, the Stores page, the store page, and store pickup information use a metaobject definition. Create it once:

Go to Settings > Custom data > Metaobjects and select Add definition.
Name it Store. The type handle must be store (or change Store metaobject type in the Store locator section).
Turn on Online store in the Storefront options so every entry gets its own page.
Add these fields:

Field	Type
`name`	Single line text
`address`	Multi-line text
`city`	Single line text
`phone`	Single line text
`hours`	Multi-line text. One line for each day or range.
`services`	List of single line text. For example: Pickup, Installation, Trade-in.
`latitude`	Decimal
`longitude`	Decimal
`image`	File (image)
`products`	List of products. Products available for pickup at this store.

Add an entry for each store, then add the Store locator section to your Stores page.

The map sits in a white card beside the list. It loads from Google Maps only after the shopper chooses Show map. No third-party code runs before that. Each store also has an Open in Google Maps link.

8. Languages and right-to-left

Boltech includes English and Arabic. To add a language, turn it on in Settings > Languages. Shopify shows translated theme text in the Translate and adapt app.

The page direction switches to right-to-left for the languages listed in Theme settings > Language and region > Right-to-left languages. In right-to-left mode Boltech uses the Right-to-left font you choose in Theme settings > Typography.

9. Accessibility and performance

Every control works with a keyboard and shows a visible focus ring.
Menus, dialogs, tabs, sliders, and the cart drawer follow standard keyboard patterns.
Images have alt text, and images below the first screen load only when needed.
Animation respects the shopper's reduced motion setting.
Scripts are loaded with defer. Each section loads only the CSS it needs.

10. Privacy and cookies

The cookie banner is built on Shopify's Customer Privacy API. It appears only for visitors in regions where consent is required. Set regions in Settings > Customer privacy, and turn off Shopify's own banner there if you use this one.

Compare and Saved items are stored in the shopper's own browser. Boltech does not send them to a server.

11. Frequently asked questions

Does Boltech need an app?
No. Everything in the theme works without apps. You can add apps through app blocks.

Why are my specifications empty?
Check that your fields are in the namespace set in Theme settings > Product data and that the field type is a single line of text.

How do I change the colors of one section?
Open the section and choose a different Color scheme. Edit the schemes in Theme settings > Colors.

Why does the cart drawer not open?
Check Theme settings > Cart > Cart type is set to Drawer.

How do I show variants as a dropdown?
Open the product template, select the Variant picker block, and set Style to Dropdown. Buttons and swatches stay the default. In dropdown style each field starts with a small icon. Colors show a preview that follows the selected color. Storage, Memory, Size and Screen get an icon chosen from the option name. Turn this off with Show option icons, or choose your own in Option icons, one line per option, written as Warranty = shield. Available icons: drive, chip, ruler, screen, shield, bolt, box, truck, tag, clock, tool, gift, card, globe, star, heart, lock.

How do I add a video?
Add the Video section. Upload a video or paste a YouTube or Vimeo link, and add a cover image.

Can I edit the code?
Yes, but duplicate your theme first. If you need custom changes, work with a Shopify Partner.

12. Support and updates

Support is free for questions about how the theme works and for bugs. We reply within two business days. Use the support form. Include your store URL and a short description of the problem. If a screenshot would help, email it to support@estasoft.com.

Release notes for every version are in CHANGELOG.md.

Boltech documentation