Theme Features

Vibrante Bigcommerce Theme Manual

Welcome to DIT Interactive's vibrant world of electronic equipment and gadgets! As an authorized BigCommerce partner agency, we are thrilled to introduce our cutting-edge eCommerce store, powered by the dynamic Vibrante theme. Our mission is to provide tech enthusiasts and gadget lovers with an unmatched online shopping experience, where they can explore an extensive range of top-notch electronic products at their fingertips.

Our theme is a fully responsive, customizable BigCommerce theme that is designed to help businesses of all sizes create beautiful and engaging online stores. The theme is built on the latest BigCommerce platform, and it includes a number of features that make it easy to create a high-converting store.

Our theme is also highly customizable, so businesses can easily change the look and feel of their store to match their brand. The theme also includes a number of pre-built pages and sections that can be used to create a store quickly and easily.

We are excited to offer our theme to the BigCommerce community, and we believe that it will be a valuable asset for businesses of all sizes.

Home Page

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 'Home Page'.

Home page

HomePage Customisation

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

In the left-hand column of the Theme Editor, click the panel labeled 'HomePage Customisation'.

1. Header Discount

Header Discount Title: Add Header Discount Title.

Header Discount Link: Add Header Discount Link .

Manage Main Carousel Mobile View:In vibrante theme, You can upload separate images for the carousel in mobile view.

First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image URL.

Subheading : Add carousel subheading

Custom Button Text : Add Custom button text

Custom Button Link : Add Custom button Link

3. Top Categories

It's dynamic categories section, It will display four categories and it's subcategories.

You can unable and disable this section from the theme editor.

Background Color : Add color code in Top Categories background.

Text Color: Add color code in Top Categories Text

4. Shop by Brand

Show Brand: If checked, it will appear as Shop by Brand. If unchecked, Shop by Brand will not appear

Shop By Brand Image :First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image URL.

Add sub-images:

First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image URL.

Add image name in the setting section

Image: Add image name in mobile image

Heading: Add image hedging text

Link: Add image Link

5. Shop by Collection

Show collection: If checked, it will appear as a Shop by Collection. if unchecked then the Shop by Collection will not appear.

Shop by collection Image : First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image url.

Add sub-images:

First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image URL.

Add image name in the setting section

Image: Add image name in mobile image

Link: Add image Link

6. Most Popular/Feature Products

Most Popular Products Link: Add Explore Now Link

Most Popular Products Image: First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image url.

Most Popular Products Image : Add image name in Most Popular product

Most Popular Products: You can add Top Product in the Most Popular section as per default bigcommerce feature.

7. New Arrivals

You can add New products in the New Arrivals section as per the default big commerce feature.

Show New Arrivals: If checked, it will appear as a New Arrivals. if unchecked then the New Arrivals will not appear.

8. USP Section

Show USP section: If checked, it will appear as a USP Section. if unchecked then the USP Section will not appear.

USP Section Background Color: Add color code in USP Section background

USP Section Image: First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image url.

Usp Section Image : Add image name in USP Section image

Manage USP Section text: For text change Go to channels > Themes > Advanced > Edit Theme Files > lang > en.json and update text

9. Feedback Section

Show Feedback section: If checked, it will appear as a Feedback Section. if unchecked then the Feedback Section will not appear

Manage Feedback Section text: For text change Go to channels > Themes > Advanced > Edit Theme Files > lang > en.json and update text

Feedback Section Image First, you need to head over to "Storefront > Image Manager" and then upload your images here

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image name to that image url.

Feedback Section Image : Add image name in Feedback Section image

Note: Since the video does not come from the image manager, you have to add the link directly there

10. Instagram Section

Show Instagram section: If checked, it will appear as an Instagram Section. if unchecked then the Instagram Section will not appear.

Instagram sectionTitle: Add Instagram Section Title.

Instagram section Sub Title: Add Instagram Section Sub Title.

Instagram section Access token: You need to generate instagram access token and add it here to display instagram section on home page.

Steps to generate instagram token
Note: This token will get expired after 30 days so it has to be re-created. Steps to re-generate instagram token

CategoryPage Customisation

Category Heading Image

First, you need to head over to "Storefront > Image Manager" and then upload your images here.

Then once uploaded, click "View Full Size" to open the image in a new tab and copy the image path to that image url.

Category page heading Image : Add image name in category page heading image.

Hide Custom Heading Box: If unchecked, it will not appear as a Category page heading image . if checked then the Category page heading image will appear banner on category page will come from marketing banner :

You have to create a banner, add an image and assign it to a particular category in which you want to show the image :

Set Position: Set Banner position in Placement DropDown

All the subcategories will be visible on it parent category page with its category image like this :

Products Card

Add to cart popup display mode: Change add to cart popup display Mode small or default

Small Popup: Default popup:

Sold Product counter

Sold product counter : If checked, it will appear as sold in last . if unchecked then the sold in last will not appear.

Sold Product Quantity : Add sold product Quantity

Sold Product Hour: Add sold product hours

Sold Product Text: Add sold product text

Sold Product Hour Text: Add sold product Hours text

Viewers

Viewing By Customer : If checked, it will appear as a viewing by customer . if unchecked then the viewing by customer will not appear.

Viewer Quantity : Add Viewer Quantity.

Viewer Text: Add viewer text.

Viewer Switch After(s): Add viewer switch after second.

Note:
- All other settings and features are the same as cornerstone theme.
- All images are added in Storefront > Image Manager, that's why it will show broken elements when you first upload the theme in your store.Steps to add image in Image Manager is mentioned above in USP section.

Recommended Image Dimension

Carousel Image

Hero Carousel Image Desktop: 1720px X 625px

Hero Carousel Image Mobile: 640px X 233px

Top Category image

Top Category Image : 406px X 750px

Shop By Brand Image

Shop by Brand Image : 1720px X 200px

Shop by Brand Image : 1720px X 200px

Shop by Brand Inner Images

One image: 845px X 956px

Two Image : 845px X 625px

Three Image : 845px X 704px

Four Image : 845px X 1035px

Shoy by Collection Image

Shop by Collection Image : 1720px X 200px

Shop by Collection Inner Images

One Image : 1720px X 500px

Two Image : 845px X 1030px

Three Image : 845px X 500px

Four Image : 845px X 500px

Five Image : 1100px X 500px

Six Image : 590px X 1030px

Seven Image : 535px X 500px

Eight Image : 535px X 500px

Nine Image : 845px X 440px

Ten Image : 845px X 440px

Most Popular product Image

Most popular product Image : 848px X 775px

Our Featured Product Image

Our Featured product Image : 848px X 775px

USP Section Image

USP Section Image : 992px X 560px

Feedback Section Image

Feedback Section Image : 292px X 506px

News & Article Section Image

News & Article Section Image : 640px X 499px

Instagram Section Image

Instagram Section Image : 300px X 300px