> For the complete documentation index, see [llms.txt](https://halosoft.gitbook.io/bc-superkart-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://halosoft.gitbook.io/bc-superkart-documentation/11-setting-up-product-detail-page.md).

# Setting Up Product Detail Page

## Frequently Bought Together Function (Bundle Products) <a href="#setting_up_product_bundle" id="setting_up_product_bundle"></a>

![](/files/ZdmNTuwinf62sm5jNfwm)

There are 2 options for you to choose which products are used in the Frequently Bought Together:

* Using Related

Product.

* Using Product ID. **01. Using Related Product** To show **Frequently Bought Together** on Product Detail, In the Admin panel -

> Go to **Products** → **View** → click button **Choose a product you want to apply Frequently Bought Together** → \*\*Custom

Fields\*\*.

* To pull products from your Related Products, create the following custom field: Custom Field Name:**\_\_bundle** Custom Field value:**related products**

![](/files/OkqTKJnH6lTWhHJKgPAV)

***

Note:

* The first product will always be the Product of the page you are on.

The next products will be pulled from this product's first Related Products.

* You can either let BigCommerce select a Product's Related

Products randomly or you can manually choose which products to display.

* Refer this link: <https://support.bigcommerce.com/s/article/Setting-Up-Related-Products> for your reference about Related Products. **02. Using Product ID**
* To pull products from Product ID, create the following custom field: Custom Field Name:**\_\_bundleid** Custom Field value:**the number of your product id**.

Example: 100,101,102 (they are Product ID), use the comma to separate them

![](/files/VGQ3Js6fORUIPNgfUkA1)

**How do I get Product ID of a product?** - Please follow this instruction image:

![](/files/K1HGW6H107hgUQEttGkR)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme.

## Countdown <a href="#setting_up_product_countdown" id="setting_up_product_countdown"></a>

![](/files/AmPWSedigTGKjvLzYdHu)

There are 2 options for you to setup:

* Using different products for each product.
* Using same for all products. **01. Using different products for each product**

In **Admin panel**, navigate to **Products** → **View**. Then, click a product you want In the **Product Details**, please find tab: **Custom Fields**. **Custom Field Name** must be: **\_\_countdown**. **Custom Field Value** please enter **Time** (ex: Oct 11, 2022 18:04:00)

![](/files/lANr69rNbgrJlXn3SRZc)

When you are happy with your changes, don't forget click the **Save** button. > **📝 Notes:** - Input in Theme Editor limit 64 characters.

**2. Using same for all products.** Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** / **CountDown**

![](/files/aVztYjOo1fFzVLOHCx2k)

When you are happy with your changes, don't forget click the **Save** button.

Please use the same this below structure/rule to insert countdown for your product.

Example: **Oct 11, 2022 18:04:00**

* dec (mm): This is abbreviation of

December and you must use the abbreviation of months in this countdown structure.

* Please use 1 white space among mm dd yyyy

## Sold In Last Function <a href="#setting_up_product_soldinlast" id="setting_up_product_soldinlast"></a>

![](/files/V4Y6QnsXaWwkvk4J081i)

Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** / **Sold In Last**

![](/files/NUT6zqYcFlKktU3jH4JK)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme. > **📝 Notes:** - Input in Theme Editor limit 64 characters.

## Customers View Products Function <a href="#setting_up_product_viewproduct" id="setting_up_product_viewproduct"></a>

![](/files/OceIuiJKcZv6aNKpMHe6)

Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** / **Viewing By Customers**

![](/files/HV4xZYwvybbq8pExeRuV)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme.

## Previous / Next Products Function <a href="#setting_up_product_nextproducts" id="setting_up_product_nextproducts"></a>

![](/files/8pn7EjpZTydW9g7phdx8)

Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** → Choose **Enable Previous / Next Products**

![](/files/0oWHJ50HZmhQSH4G9t6b)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme.

## Secure Images <a href="#setting_up_product_secureimages" id="setting_up_product_secureimages"></a>

![](/files/Bs6NstykAfa9z8WJGUUm)

Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** / **Secure Images**

![](/files/alMFlD2ceOE3PamgIp0D)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme. > **📝 Notes:** - Input in Theme Editor limit 64 characters. Images must be successfully upload to the \*\*Image

Manager\*\*.

## Sticky Add To Cart Function <a href="#setting_up_product_stickyaddtocart" id="setting_up_product_stickyaddtocart"></a>

![](/files/OobufGJ1bNZvvqX0AXin)

Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** / Choose **Sticky Add To Cart**

![](/files/LbPsdraUNwVOqREcnDgI)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme.

## Products Tabs <a href="#setting_up_product_tabs" id="setting_up_product_tabs"></a>

![](/files/q0c4EEdJgDAcq7vN9SAP)

Navigate to: **Storefront** → **My Themes** → **Customize**.

In **Theme Editor**, navigate to **Product Detail Page** → **Product Tabs**

![](/files/Qzk8iJYX5D1YzYQuVHBl)

When you are happy with your changes, don't forget click the **Save** button and **Publish** to repackage the edited theme. > **📝 Notes:** - Input in Theme Editor limit 64 characters. \*\*\*\* Sample Content of Product Description\*\*

![](/files/PsRz5ISOf6DF3O69J6at)

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati del cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

Et harum quidem rerum facilis est et expedita distinctio.

Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus.

![](https://cdn11.bigcommerce.com/s-3uw22zu194/product_images/uploaded_images/product-description-1.jpg)

Lorem ipsum dolor sit amet, consectetur delos adipiscing elit.

Duis risus leo milance elementum in malesuada an darius ut augue.

Cras sit amet lectus et justo feugiat euismod...

**Sample Unordered List**

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis risus leo milance elementum in malesuada an darius ut augue.

Cras sit amet lectus et justo feugiat euismod sed non erat nulla non felis id metus.

* Comodous in tempor ullamcorper miaculis.
* Lorem ipsum dolor sit ameto.
* Duis risus leo elementum darius.
* Pellentesque vitae neque mollis urna mattis.
* Divamus sit amet purus justo.

![](https://cdn11.bigcommerce.com/s-3uw22zu194/product_images/uploaded_images/product-description-2.jpg)

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animie.

![](https://cdn11.bigcommerce.com/s-3uw22zu194/product_images/uploaded_images/product-description-3.jpg)

**Sample Unordered List**

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Duis risus leo milance elementum in malesuada an darius ut augue.

Cras sit amet lectus et justo feugiat euismod sed non erat nulla non felis id metus.\</p

> * Comodous in tempor ullamcorper miaculis.
> * Lorem ipsum dolor sit ameto.
> * Duis risus leo elementum darius.
> * Pellentesque vitae neque mollis urna mattis.
> * Divamus sit amet purus justo.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://halosoft.gitbook.io/bc-superkart-documentation/11-setting-up-product-detail-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
