Kyro Bigcommerce Theme Manual

The Kyro theme family is designed to bring style, performance, and flexibility together for modern eCommerce stores. Each theme variant is tailored to its niche industry, yet all are built on the same foundation of speed, usability, and engaging design. With responsive layouts, advanced navigation, and conversion-focused features, Kyro themes make online shopping smooth and enjoyable for customers across all devices.

Kyro Skin Care, Kyro Fashion & Jewelry, and Kyro Furniture – each variant offers a unique look and feel that reflects its industry while sharing powerful built-in tools. Features like promotional homepage sliders, newsletter popups, product quick view, wishlist support, and blog-ready layouts come standard across all Kyro themes. Combined with elegant typography and thoughtfully balanced color schemes, the Kyro series ensures that brands can deliver a seamless and professional online experience that drives engagement and sales.

Features of Kyro theme

• Share Icon Popup
• Sticky Add to Cart Popup
• Newsletter Popup Modal
• Mega menu with image support
• Testimonial / Review Section on Homepage
• Homepage promotional banners
• Sticky Compare popup
• Custom category product section on homepage

Header & Footer

In your control panel, go to Storefront > My Themes, and click the blue "Customize" button to launch Theme Editor.

In the left hand column of the Theme Editor, click the panel labelled 'Header & Footer'.

Pencil Banner

Hide Pencil Banner: If checked, it will hide the pencil banner, i.e. Get 50% Off on Your First Order

Pencil Banner Background color: Add color code in Pencil Banner background

Manage Pencil Banner text: For text change Go to channels > Themes > Advanced > Edit Theme Files > lang > en.json and update text in pencilbannertext

Header Logo

Logo position: Aligns the logo left, center or right. Applicable for both image and header content.

Logo Center View:

Kyro SkinCare

Kyro Fashion

Furniture

Logo Left View:

Kyro SkinCare

Kyro Fashion

Furniture

Logo Right View:

Kyro SkinCare

Kyro Fashion

Furniture

Header

Header Background Color: Set background color. It will appear behind the logo.

Dropdown menu display mode: Change Dropdown menu display Mode to Simple , Alternate and megamenu.

Simple Menu Design:

Alternate Menu Design:

Mega Menu Design:

Custom Product List ID Megamenu:Add product IDs to showcase a products as Trending Products in megamenu, separated by a comma(,)

Search suggestions:

As users type in the search bar, real-time suggestions appear instantly, showing matching products, categories, and popular keywords. This enhances the user experience by helping customers find what they’re looking for faster and boosting product discovery

Show Search suggestions: If unchecked, it will hide the search suggestions.

Quick search Background: Add color code in search result background

Manage suggestion text: For text change, go to channels > Themes > Advanced > Edit Theme Files > lang > en.json and update text in quick-suggestion-1 to quick-suggestion-10

Footer

Kyro SkinCare Footer

Kyro Fashion Footer

Footer Background Color: Add color code in Footer background.

Footer Logo: Add the footer logo file to change the footer logo

Home Page

Go to Storefront > My Themes in your control panel and click the blue "Customize" button to launch Theme Editor.

On the left-hand column of the Theme Editor, click the panel labelled 'Home Page'.

Home Page customization

Go to Storefront > My Themes in your control panel and click the blue "Customize" button to launch Theme Editor.

On the left-hand column of the Theme Editor, click the panel labelled 'HomePage customization'.

Marquee Section

Hide Marquee Text Section: If checked, it will hide the Marquee section.

Marquee Background: Add color code in Marquee background.

Trending Categories

Hide Trending Categories Section: If checked, it will hide the Trending Categories section from the home page.

Category product ID: Add category IDs to showcase a category as a Trending category, separated by a comma(,)

New Product Section

Hide New Product Section Trend: If checked, it will hide the New Product Section trend card from the New Products. (“Explore New Range” card will be hidden, and products will remain)

New Product Trend Image: Add the New product trend image file to change the image.

New Product Trend Button Text: Add the text for the CTA button text.

New Product Trend Button URL: Add the URL for the CTA button to get redirected to the destination.

Product Offer Section

Show Product Offer Section: If unchecked, it will hide the Product offer section from the home page.

Sale Section Background: Add color code in Sale Section Background.

Sale Section Text Color: Add color code in Sale Section Text Color.

Product Offer Timer: Add the end date and time in the product offer timer in the same format as the demo image.

Custom Most Popular

Show Custom Most Popular: If unchecked, it will hide the Most Popular section from the home page.

Popular Video Image Default: Add a default image that will be displayed when a video is not added for a product.

Hide Popular video: If unchecked, it will hide the video from all the sets/slides. (will show only the First image)

Most Popular First Image: Add a background image for the left-hand side.

First Section One product ID: Add product ID.

Popular video One 1: Add video URL for individual product.

First Section One Top Position: Add top position.

First Section One Left Position: Add left position.

About Us Section

Hide About us Section: If checked, it will hide the About us section from the home page.

Hide About us USP: If checked, it will hide the About us USP.

About us Image: Add the image file for the About us section.

FAQ Section

Hide FAQ Section: If checked, it will hide the FAQ section from the home page.

FAQ Section image: Add the image file for the FAQ section.

FAQ content can be changed from en.json

After Before Section

Before image: Add Before image.

After image: Add Afterimage.

Custom Marquee Product List ID: Add product IDs separated by a comma(,) without a space.

Marketing Banner Section

Marketing Banner Img: Add the marketing banner image file.

Marketing Banner Img link: Add the URL to get redirected to the promoting product/category.

Marketing Banner HTML

Go to Storefront > My Themes in your control panel and click the blue "Customize" button to launch Theme Editor.

First, place the HTML widget on the page

To add a marketing banner, add HTML code in the editor on the left-hand side and click on SAVE HTML.

Code Demo

Testimonial Section

Manage Testimonials: To add a testimonial, go to channels > Themes > Advanced > Edit Theme Files > lang > en.json and add the following fields for each review in 'testimonial':

• rating: rating star count.
• description: customer review description
• author-image: add image of author
• author: add author name
• author-profession: add author's profession
• image: add image file, which will be displayed on the right-hand side.
• image-link: add image link to redirect to the product/category the customer reviewed

Category Page customization

Category Sidebar Banner

Category sidebar Banner: Add an image for the sidebar banner on the category page

Recently Viewed Product

Show Recently browsed: If unchecked, it will hide the Recently viewed product section from the category page.

Recently browsed Title: Add the Title of the section.

Recently browsed count: Add recently Viewed Product count.

Product Page customization

Custom Product Tab Code

How To Use Section

This section is used for a specific product, and its steps and code are given below.

Go to Storefront > Theme > Customize > preview

Then dregen and drop wigest on HTML

<div class="tab-content pdp-tab-content" id="tab-how-use"> <p class="accordion-header how-use-header">How to use</p> <div class="accordion-content-tab"> <p>Taking your supplements the right way makes all the difference. Follow these simple daily steps to get the most out of your Kyro Immune Plus Defence Capsules and support your immune health effectively.</p> <div class="use-content-slider"> <div class="use-content"> <div class="use-content-text"> <p class="use-tag">1. Start Your Day Right</p> <h3>Take 1 Capsule After a Meal</h3> <p>Begin your wellness routine by taking one capsule right after your breakfast or lunch. This helps your body absorb nutrients more effectively and kickstarts your immune defense early in the day. Avoid taking it on an empty stomach to prevent any mild discomfort.</p> </div> <div class="use-content-img"> <img src="https://cdn11.bigcommerce.com/s-wkwxzvscjr/images/stencil/original/image-manager/use-img-1.png" alt="use-img"> </div> </div> <div class="use-content"> <div class="use-content-text"> <p class="use-tag">1. Start Your Day Right</p> <h3>Take 1 Capsule After a Meal</h3> <p>Begin your wellness routine by taking one capsule right after your breakfast or lunch. This helps your body absorb nutrients more effectively and kickstarts your immune defense early in the day. Avoid taking it on an empty stomach to prevent any mild discomfort.</p> </div> <div class="use-content-img"> <img src="https://cdn11.bigcommerce.com/s-wkwxzvscjr/images/stencil/original/image-manager/use-img-1.png" alt="use-img"> </div> </div> <div class="use-content"> <div class="use-content-text"> <p class="use-tag">1. Start Your Day Right</p> <h3>Take 1 Capsule After a Meal</h3> <p>Begin your wellness routine by taking one capsule right after your breakfast or lunch. This helps your body absorb nutrients more effectively and kickstarts your immune defense early in the day. Avoid taking it on an empty stomach to prevent any mild discomfort.</p> </div> <div class="use-content-img"> <img src="https://cdn11.bigcommerce.com/s-wkwxzvscjr/images/stencil/original/image-manager/use-img-1.png" alt="use-img"> </div> </div> </div> </div> </div>

And click on save HTML button and publish your theme.

FAQ Section

Same method use of From fram to Table section one just different is Code

<div class="tab-content pdp-tab-content" id="tab-faq"> <p class="accordion-header">Frequently asked questions</p> <div class="accordion-content-tab"> <div class="faq-section-main"> <p class="faq-descriptions">Quick answers to help you use Kyro Immune Plus Defence Capsules and our skincare products with confidence.</p> <div class="faq-all"> <div class="faq-content-main"> <div class="faq-content"> <h4 class="faq-title active"><span>What does Kyro Immune Plus Defence do for my skin?</span></h4> <div class="faq-body"> <p>Kyro Immune Plus Defence Capsules are formulated to support your skin’s natural defence system. They help reduce oxidative stress, promote collagen production, and strengthen your skin barrier from within, leaving your skin healthier and more resilient.</p> </div> </div> </div> <div class="faq-content-main"> <div class="faq-content"> <h4 class="faq-title"><span>Where can I subscribe to your newsletter?</span></h4> <div class="faq-body"> <p>You can subscribe to our newsletter at the bottom of our website by entering your email address. By joining, you’ll receive skincare tips, product updates, and exclusive offers straight to your inbox.</p> </div> </div> </div> <div class="faq-content-main"> <div class="faq-content"> <h4 class="faq-title"><span>Where can I edit my billing and shipping address?</span></h4> <div class="faq-body"> <p>To update your billing or shipping address, log into your account and go to “My Account” → “Addresses.” From there, you can edit, add, or remove your saved addresses anytime before placing an order.</p> </div> </div> </div> <div class="faq-content-main"> <div class="faq-content"> <h4 class="faq-title"><span>Can I change the displayed currency?</span></h4> <div class="faq-body"> <p>Yes, our website allows you to change the displayed currency. Use the currency selector located at the top-right corner of the page to switch between available currencies depending on your region.</p> </div> </div> </div> <div class="faq-content-main"> <div class="faq-content"> <h4 class="faq-title"><span>Do I have the right to return an item?</span></h4> <div class="faq-body"> <p>Yes, we offer a hassle-free return policy. If you’re not fully satisfied with your skincare purchase, you may return unopened and unused products within 30 days of delivery for a refund or exchange. Please visit our <a href="/returns">Returns Policy</a> page for full details.</p> </div> </div> </div> </div> </div> </div> </div>

Compare Product

ProductPage Show Compare: If unchecked, it will hide compare option from the product detail page.

Poduct Page USP Section

Hide Product Page USP: If checked, it will hide USP section from the product detail page.

Product USP image: Add USP image.

Product USP Content: Add USP Content.

Common customization

Common colors: Add all common colors for the theme.

Hide People also Bought This Section: If checked, It will hide People also Bought This Section.

Cart Page Related Products Title: Add Cart page Related Products Title.

Show Calculate Free Shipping: If checked, It will show Calculate Free shipping section.

Calculate Free Shipping Remaining: Add Free shipping remaining text.

Calculate Free Shipping Matched: Add Free shipping matched text.

Calculate Free Shipping Required: Add Free shipping required text.

Recommended Image Dimension

Hero Carousal Image

1920px X 750px

Trending Cartegory Image

960px X 1230px

Product Image

960px X 1045px

Product Trend Image

389px X 527px

Custom Most Popular left Image

960px X 622px

After Before Image

1620px X 622px

Marketing Banner Image

960px X 605px

About us Image

747px X 634px

FAQ Section Image

815px X 592px

Category Promotion Image

1620px X 550px

Category Image

960px X 1230px

Category Sidebar Image

296px X 438px

Image Upload

First, navigate to Storefront > Image Manager and upload your images here.

Once uploaded, click on "View Full Size" to open the image in a new tab and copy the image URL.

Use this file path to show the image.

Note: Copy the image path up to its file type or extension (JPEG/JPG, PNG and GIF). omit the part of the URL after the file type or extension.

Product ID

To get the product ID, go to Storefront > Products > All products

Navigate the cursor to the Product name will display the path on the bottom-left side of the webpage. At the end of the path, the Product ID is mentioned.

Category ID

To get the CategoryID, go to Storefront > Products > Categories

Navigate the cursor to the Category name will display the path on the bottom-left side of the webpage. At the end of the path, the category ID is mentioned.