# Manifest Theme ## Overview The Manifest theme is a powerful and versatile eCommerce theme designed to help businesses achieve success online. It incorporates industry best practices in technology, design standards, and SEO, offering a stunning storefront that engages shoppers and encourages checkouts on any device. Powered by BigCommerce's Stencil theme engine, Manifest enables merchants to build captivating storefronts while providing compatibility with various browsers. With the user-friendly Page Builder tool, merchants can easily customize their storefront's look and feel without coding. This tool allows quick customization of colors, typography, banners, headings, carousels, footers, and more. Additionally, merchants have the flexibility to personalize layout characteristics like the number of products displayed in panels, category pages, and brand pages. Each Stencil theme can have infinite variations, allowing optimization for specific markets, audiences, and styles, while maintaining efficient management and distribution as a single theme. ## How to launch Page Builder? To customize the Manifest theme follow these steps to launch page builder: 1. Access your Bigcommerce store admin panel. 2. Navigate to the **Storefront > Themes** tab. 3. Locate Manifest theme & click the **Customize** button, which will launch the Page Builder. {% hint style="info" %} You can also refer to this [Bigcommerce article](https://support.bigcommerce.com/s/article/Page-Builder?language=en_US). {% endhint %} ## Selecting a theme style? The Manifest theme provides 4 unique style options: Apparel, Build, Home, and Jewelry. Each style showcases its own theme colors and specific a demo content preview, allowing users to visualize the appearance of their website with the selected style. ### Apparel [(Demo site)](https://manifest-apparel-demo.mybigcommerce.com/)

## Build [(Demo site)](https://manifest-build-demo.mybigcommerce.com/)

### Home [(Demo site)](https://manifest-home-demo.mybigcommerce.com/)

### Jewelry [(Demo site)](https://manifest-jewelry-demo.mybigcommerce.com/)

# Announcement Bar The Announcement bar enables merchants to conveniently customize both the text and background color, empowering them to align the visual presentation of the bar with their desired aesthetics and branding preferences. ## How to enable/edit Announcement text? First navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) In the page builder, navigate to the **Announcement Bar** tab to access the popup settings list. Modify the textfield content as desired, or leave it blank to **disable** the section.

# Mini Banners ## How to enable section? First navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) Open the interface and navigate to the Mini Banners tab. Inside the settings list, locate the **Banner count** setting from the available options. Choose the desired number of banners you wish to display by selecting the appropriate value, which ranges from **none** to **2**. If you prefer to disable this section entirely, simply choose the "**none**" option from the dropdown. ## Overlay opacity & color This section offers the flexibility to adjust the overlay opacity and color, enhancing the visibility of the text displayed on top. The settings textfield accepts two values: the opacity and the hex color. The opacity value ranges between **0.0** and **1.0**, including decimal points, while the hex color follows the format "**#FFFFFF"**. To input these values into the settings field, separate them with the **|** symbol, such as "0.5**|**#FFFFFF" as an example. ## How to add image? To assign an image, the first step is to upload the image to the image manager in the admin panel.[*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Upload photo** and **save**. ## How to add link? To assign a banner link, locate the textfield labeled **banner link** and insert text. {% hint style="warning" %} Please note that when assigning a banner link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Category Products This section is dedicated to showcasing a particular product category and presenting the products within that category. It enables users to conveniently browse through the featured products directly from the homepage. ## How to enable Category Product section? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) When working within the Page Builder, locate and select the **Category Products** tab. Look for the textfield labeled **Category** and enter the **ID** of the desired category you want to display. To disable this section, leave the category textfield empty. ## How to find category ID? To locate your category ID, follow these steps: 1. Access your Bigcommerce web store admin panel. 2. Navigate to the **Products** menu and select **Product Categories**. 3. Select the name of a parent category or subcategory. 4. Once the category page loads, examine the URL to find the category ID number.

## How to change Category title? In this section, e-commerce merchants have the ability to customize the title text according to their preferences. To set the desired title, enter the appropriate value into the **Header** settings textfield. To disable this settings, leave the textfield blank. # Featured Product Slider ## How to enable Featured Product Slider? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) When inside the page builder, locate and click on the **Featured Product Slider** tab. To enable the section, select the checkbox labeled **Enable**. To disable this section, leave the checkbox unchecked. ## Slider scrolling This slider carousel in this section provides two options: continuous scrolling or stationary display toggled by arrows. To enable continuous scrolling, simply select the checkbox labeled **Continuously scrolling**. To disable this section, leave the checkbox unchecked. # Banners {% hint style="info" %} Recommended image size **600 x 600** or **1:1** aspect ratio {% endhint %} ## How to enable banner? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) When inside the page builder, locate and click on the Banners tab. Find the dropdown settings titled Count and select the amount of total number of banners to show. To disable select the none option. ## How to add image? To assign an image, the first step is to upload the image to the image manager in the admin panel. [*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **image** and **save**. ## How to add link? To assign a banner link, locate the textfield labeled **Link** and insert text. {% hint style="warning" %} Please note that when assigning a banner link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Multi Column The Multi Column section offers various customizable options, including enabling or disabling dividers and icons, adjusting text and background colors, and more. You have the flexibility to create up to four different columns, each labeled as **Column 1-4**. ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) To access the Multi Column tab within the page builder, locate and click on it. To display the multi-column section, select the **Enable** checkbox. Otherwise, deselect the checkbox to hide. ## How to change the number of column? To modify the number of columns, find the setting labeled **Count** and choose the desired amount from the dropdown menu. ## How to change icons? This section offers a wide selection of over **7000+** icons. To modify the icons in each column, locate the setting labeled **Icon** for each respective column. Explore the available [(icon list)](https://fontawesome.com/icons?d=gallery\&p=2). Click on the provided link for the icon list and search for the desired icon. Once found, click on the icon to view a page similar to the displayed image. {% hint style="info" %} In this example, the Archive Icon has been selected. {% endhint %}

Copy and paste the text between *class=”***copy this text***“* Return to the Multi Column section in the Theme Editor and paste the desired icons into the corresponding **Icon** sections.
# Instagram Follow the steps below to connect the Instagram section. {% hint style="warning" %} Before setting up Disable Demo Content. {% endhint %} ### Step 1: Create a Facebook App 1. Log into your Facebook Developer account using the official [Meta Developers portal](https://developers.facebook.com/). 2. Click **My Apps** and create a new app. 3. Enter your **App Name** and **App Contact** email, then click **Next**. 4. Under **Use Case**, select **Other**, then click **Next**. 5. Under **App Type**, choose **Business**, then click **Next**. 6. Click **Create App** to finish. ### Step 2: Assign User Role 1. From your app dashboard, open the left sidebar and select **App Roles**. 2. Click the **Add People** button. 3. Assign the **Instagram Tester** role. 4. Enter your Instagram username and click **Add**. Note: The role will remain in **pending** status until it is confirmed inside Instagram {% hint style="warning" %} Note: The role will remain in **pending** status until it is confirmed inside Instagram {% endhint %} ### Step 3: Confirm User Role on Instagram 1. Log into your [Instagram](https://www.instagram.com/) account. 2. Go to your profile and tap the **Settings** icon. 3. Select **Apps and Websites**. 4. Under **Tester Invites**, locate the invitation from Meta and click **Accept**. ### Step 4: Configure Instagram Inside Meta {% hint style="warning" %} Note: Before continuing, make sure your Instagram account is set to a Business account. {% endhint %} 1. Go to your Meta Developer Dashboard. 2. In the **Add Products to Your App** section, select **Instagram** and click **Set Up**. 3. Locate the **Generate Access Token** section. Expand it if needed. 4. Click **Generate Token**. 5. Log into Instagram. If you are asked to convert your account to a professional account, complete that first, then generate the token again. 6. Set the following permissions: * **OFF** - Allow access to messages. **(Very Important!)** * **OFF** - Access and manage comments. * **OFF** - Access and manage messages. * **ON** - Access and publish content. * **OFF** - Access and manage insights. 7. Click **Allow** 8. On the token confirmation screen, check the **I Understand** box. 9. Copy your generated **Access Token** and store it securely. 10. Click **Done**. ### Step 5: Split and Enter Your Token Since the app requires the token to be entered in smaller parts, follow these steps: 1. Copy your generated access token. 2. Open the [Splitter tool](https://www.dcode.fr/text-splitter). 3. Paste your token into the input field. 4. Set the block size to **64 characters**. 5. Click **Split**. 6. Copy each section and paste them into the corresponding **Token 1** through **Token 4** fields inside the BigCommerce Theme Editor. {% hint style="warning" %} Note: When assigning a Token, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Brands {% hint style="info" %} Recommended image size **150 x 90** or **16:9** aspect ratio {% endhint %} ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) To access the Brands tab within the page builder, locate and click on it. To enable this section the Images textfield has to be populated. To disable this section, leave the images textfield blank. ## How to add images? To assign an image, the first step is to upload the image to the image manager in the admin panel.[*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Images** and **save**. ## Adding multiple images When adding multiple images, separate each image name them with the **|** symbol, such as image1.jpg**|**image2.jpg as an example. Extra images continued textfields are provided allowing merchants the ability to add more images. {% hint style="danger" %} Ensure that you do not conclude each textfield with the **|** symbol. {% endhint %} {% hint style="warning" %} Please note that when assigning images, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Blog {% hint style="info" %} Recommended image size **600 x 600** or **1:1** aspect ratio {% endhint %} ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) Find the Blog tab in the page builder and click on it. In the list of settings, locate the **Number of blogs** option and enter the desired total number of blogs to be displayed. To disable this section, simply add the Number of blogs textfield to **0**. ## How change the number of blogs? The blog feature shows the maximum of 4 blogs on the homepage. To change blog count find the setting labeled **Number of blogs**. In the dropdown select your preferred count. # Demo Content The demo content included with each theme offers several benefits to merchants. It serves as a valuable tool for visualizing the website design, allowing merchants to see how different elements and features will appear on their site. The demo content provides a starting point, showcasing the theme's potential and offering inspiration for customization. Merchants can explore various layouts, styles, and functionalities of the theme through the demo content, enabling them to make informed decisions about their website's design. ## Enable/Disable Demo Content To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) When inside the page builder, locate and click on the **Homepage** tab. To enable the section, select the checkbox labeled **Enable demo content**. To disable all demo sections, leave the checkbox unchecked. # Section Ordering By having the ability to control the order of each section on the website's homepage, complete control is granted over the flow of the site. This grants the freedom to curate the user experience and prioritize content presentation according to specific goals. {% hint style="info" %} It's important to note that the new sorting order will not be immediately visible on the homepage until you hit **Save**. {% endhint %} ## How to change order of section? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) Within the Theme editor, navigate to the **Homepage** tab and locate the **Section Order** textfield. From here, you can arrange the sections according to your desired layout or even remove them completely. Below is a list of the **8** sections along with their respective numbers assigned to them: 1. Featured Product Slider 2. Featured Products 3. Banners 4. Category Products 5. Top Sellers 6. Brands 7. Latest Products 8. Blog When adding multiple section numbers, separate each number with the **|** symbol, such as 1**|**2**|**3**|**4 as an example. {% hint style="danger" %} Ensure that you do not conclude each textfield with the **|** symbol. {% endhint %} # Card Swatches Allow customers to preview Product Swatch Options directly from the product cards, making it simple to display various colors or styles for a single product.

## How to enable swatch? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) Within the Theme editor, navigate to the **Products** tab and locate the **Product Cards** section. From here, you can enable the **Show swatch** checkbox option. {% hint style="warning" %} The first swatch set in the admin will be the one displayed on the product card. {% endhint %} ## How to Resize & Style? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes#page-builder) Within the Theme editor, navigate to the **Products** tab and locate the **Product Cards** section. From here, you can select the different sizes from the **Swatch Size** dropdown (**Small, Medium, Large & XLarge**). Select whichever better showcases the product options. There are two distinct styles available for Swatches: **Normal** and **Flyout**. **Normal** - Presents the swatch options individually at the center of the product card. **Flyout** - Arranges product options to the right of the product card, and upon hovering, unveils the product options with a flyout animation. # Changelog Stay up to date with all of the latest additions and improvements we've made ## February 5th, 2025 – v2.0.14 * Fetch updating cart variants ## February 3rd, 2025 – v2.0.13 * Product image positioning ## January 10th, 2025 – v2.0.12 * Hero mobile slider bug fix ## October 14th, 2024 – v2.0.11 * Hero slider height bug fix ## August 8th, 2024 – v2.0.10 * Swatch bug fix ## June 20th, 2024 – v2.0.9 * Correct Search z-index ## June 14th, 2024 – v2.0.8 * Correct Menu z-index ## June 6th & 7th, 2024 – v2.0.6 & v2.0.7 * Mega menu verbiage update ## March 5th, 2024 – v2.0.5 * Add 3rd menu: * megamenu * simple * alternate * Swatch bug fixes ## November 2nd, 2023 – v2.0.4 * Maintain logs * Instagram bug fixes * Brands section bug fixes * Correct Header z-index ## July 28th, 2023 – v2.0.3 * Brands demo * Log out button * Fixed the issue with the theme copy customization section order * Enhanced category pages to resemble the default layout * Implemented schema force reload for live changes. ## June 30th, 2023 – v2.0.2 * Resolved schema bug causing duplicated banner id's * Repositioned product cards options in Theme settings * Resolved Instagram demo issue ## June 23rd, 2023 – v2.0.1 * Update theme banner verbiage * Swatch options * Included widget fields above the header and below the footer ## May 2nd, 2023 – v2.0.0 * Theme Restructure ## September 27, 2022 – v1.0.0 * Initial Commit # Halo One Theme ## Overview Halo One is an impressive and dynamic theme designed to captivate customers with its powerful layout. It understands the importance of creating a lasting impression, ensuring that your brand leaves a remarkable impact throughout the entire shopping journey. With its large hero banner carousel, you can effectively highlight promotions, new releases, and other key elements that drive customer engagement. The scrolling product carousel further enhances product visibility, while alternating banners and sections maintain visual interest and guide customers through the entire page. The theme also includes a video section, brand showcase, and the latest blog posts, providing a comprehensive shopping experience. Developed and supported by GordonByte, Halo One offers three striking styles, enabling versatility right out of the box. And with the Page Builder, you have the freedom to customize it to suit any industry ## How to launch Page Builder? To customize the Halo One theme follow these steps to launch page builder: 1. Access your Bigcommerce store admin panel. 2. Navigate to the **Storefront > Themes** tab. 3. Locate Halo One theme & click the **Customize** button, which will launch the Page Builder. {% hint style="info" %} You can also refer to this [Bigcommerce article](https://support.bigcommerce.com/s/article/Page-Builder?language=en_US). {% endhint %} ## Selecting a theme style? The Halo One theme provides 3 unique style options: Tactical, Auto, and Candy. Each style showcases its own theme colors and specific a demo content preview, allowing users to visualize the appearance of their website with the selected style. ### Tactical [(Demo link)](https://halo-one-tactical-demo.mybigcommerce.com/)

### Auto [(Demo link)](https://halo-one-auto-demo.mybigcommerce.com/)

### Candy [(Demo link)](https://halo-one-candy-demo.mybigcommerce.com/)

# Announcement Bar The Announcement bar is a valuable feature that allows you to showcase important messages and updates for your store. It is strategically positioned above the header section, ensuring its visibility to all visitors. This feature offers a versatile display of information through three distinct columns. The first column showcases store information, the second column presents an announcement message, and the third column provides a customizable call-to-action button. Each column can be styled to seamlessly integrate with the theme, allowing for a cohesive and visually appealing presentation. ## How to enable? First navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) Open the interface and navigate to the **Announcement Bar** tab. Search for the **Enable** title and select the checkbox to display. To disable this section, leave the Enable checkbox unselected. ## Enable/Editing a**nnouncement message** The announcement message is located in the second column of this section. Locate the Title textfield within the Announcement settings and enter the desired message. If the textfield is left blank, the announcement message (second column) will be disabled. # Store Info Store info is an essential component of your website, providing convenient access to your store's contact information. By prominently displaying your contact number and email address, customers can easily reach out to inquire about products, seek assistance, or place orders. This feature enhances the user experience by fostering seamless communication and building trust with your audience. ## How to enable/edit? First navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) To configure the contact information for your store, open the interface and navigate to the Announcement Bar tab. Look for the **Store Info** settings, where you will find four textfields. Two textfields are dedicated to entering the phone number, while the other two are provided for inputting the email address. To disable either settings, leave the phone number or email address textfield empty. ### Phone **Phone number title** - Custom link title **Phone number** - Number to which you can be contacted (ex: 800-999-9999) ### Email **Email address title** - Custom link title **Email address** - Email to be contacted (ex: ) # Action Button ## How to enable/edit? First navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) To configure the button action, open the interface and navigate to the **Announcement Bar** tab. Within the **Action Button** settings, you will find three textfields: **Title, Link, and Font**. Enter your desired text in the **Title** textfield to customize the call to action button in the third column. Leaving the textfield blank will disable the button, allowing you to control its visibility. To assign a banner link, locate the textfield labeled **Link** and insert text. {% hint style="warning" %} Please note that when assigning a action button link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} ## Google Font {% hint style="info" %} Visit [fonts.google.com](https://fonts.google.com/) to view available fonts. {% endhint %} When formatting fonts, follow this (example: **Google\_Audiowide\_400**). 1. Begin with "**Google**." 2. Use the "**\_**" symbol to separate components. 3. Next, specify the font name, such as "**Audiowide**." 4. Again, use the "**\_**" symbol to separate components. 5. Finally, indicate the font thickness, which ranges from 100 to 900 *(refer to Google for available options)*. {% hint style="warning" %} If the font name consists of multiple words, separate them using the "**+**" symbol. For instance, "**Roboto Condensed**" would be written as "**Roboto+Condensed**". {% endhint %} # Carousel {% hint style="info" %} Desktop recommend around **1600 × 900** pixels or **16:9** aspect ratio {% endhint %} ### Mobile Images To insert images separate for mobile, first navigate to your **Page Builder** [*(how to launch Page Builder?)*](https://help.gordonbyte.com/themes/halo-one#page-builder) Then navigate to **Homepage** > **Carousel**. In the **Mobile Images** field, enter the filenames of the mobile images you want to display. Make sure to list each image in the same order as the desktop images, separating each with a **|** symbol, such as image1.jpg**|**image2.jpg as an example {% hint style="info" %} Recommended image size **400 x 600px** {% endhint %} {% hint style="danger" %} Ensure that you do not conclude each textfield with the **|** symbol. {% endhint %} ## How to add images? To assign an image, the first step is to upload the image to the image manager in the admin panel.[*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Images** and **save**. {% hint style="warning" %} Please note that when assigning images, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Featured Product Slider ## How to enable Featured Product Slider? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) When inside the page builder, locate and click on the **Featured Product Slider** tab. To enable the section, select the checkbox labeled **Enable**. To disable this section, leave the checkbox unchecked. ## Overlay The **Overlay Hero Banner** option enhances the visual appeal of your website by displaying the Featured Product Slider on top of the Hero carousel. To enable this effect, simply select the Overlay Hero Banner setting option. Alternatively, if you prefer this feature to appear below and remain out of the way of the Hero banner, leave the checkbox unselected. ## Slider scrolling This slider carousel provides two options: continuous scrolling or stationary display toggled by arrows. To enable continuous scrolling, simply select the checkbox labeled **Continuously scrolling**. To disable this section, leave the checkbox unchecked. ## Slider Type This feature provides the option to select a list of products for display. The available choices include Best Sellers, Featured Products, and Latest Products. Simply choose the option that best suits your preferences and requirements. **Best sellers** - an easy way to dynamically market your best-performing products. **Featured Products** - displays products that you have marked as Featured. It's a great way to bring your customers' attention to products that are on sale, in-season, back in stock, or just worthy of extra attention. **Latest Products** - displays the most recently added products in your store. It's a great way to promote new product lines # Category Products This section is dedicated to showcasing a particular category and presenting the products within that category. It enables users to conveniently browse through the products directly from the homepage. ## How to enable Category Product section? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) When using the Page Builder, locate and select the Category Products tab. The maximum number of category product sections that can be displayed is 4, which are labeled as the **First, Second, Third, and Fourth** Categories. Look for the textfield labeled **Category id** in each section and enter the **ID** of the desired category you want to display. To disable each section, simply leave the Category id textfield for that particular section empty. ## How to find category ID? To locate your category ID, follow these steps: 1. Access your Bigcommerce web store admin panel. 2. Navigate to the **Products** menu and select **Product Categories**. 3. Select the name of a parent category or subcategory. 4. Once the category page loads, examine the URL to find the category ID number.

## Display styles options This feature provides you with the option to choose between a slider or a multi-row grid view for displaying your category products. The carousel view allows for a dynamic and visually engaging presentation, enabling customers to scroll through the products horizontally. On the other hand, the multi-row **grid** view offers a structured layout with rows and columns, allowing for a comprehensive display of multiple products within each category. With these versatile display options, you can customize the appearance of your category products section to suit your website's design and enhance the browsing experience for your customers. ## How to upload icon To assign an icon image, the first step is to upload the image to the image manager in the admin panel. [*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **image link** and **save**. {% hint style="info" %} Recommended images size **35px x 30px** {% endhint %} ## How to change Category title? In this section, e-commerce merchants have the ability to customize the title text according to their preferences. To set the desired title, enter the appropriate value into the **Header** settings textfield. To disable this settings, leave the textfield blank. # Featured Product The Featured Product section is a powerful tool to highlight a single product on your homepage, giving it prominent visibility. This feature becomes particularly valuable when you want to emphasize a specific product, increase its sales, or promote a special offer. By showcasing a chosen product in this section, you can effectively capture the attention of your visitors and create a sense of focus on the featured item. ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) When working within the Page Builder, locate and select the **Featured Product** tab. Look for the textfield labeled **Product item** and enter the **ID** of the desired product you want to display. To disable this section, leave the product item textfield empty. ## How to find Product ID? To locate your product ID, follow these steps: 1. Access your Bigcommerce web store admin panel. 2. Navigate to the **Products**. 3. Select the name of a product to display. 4. Examine the URL to find the product ID number.

# Featured Info {% hint style="info" %} Recommended image size **1600 x 700** or **16:7** aspect ratio {% endhint %} ## How to enable Featured Info? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/Bja7TBQGttyXwLgwl9jD#page-builder) When inside the page builder, locate and click on the **Featured Info** tab. To enable the section, select the checkbox labeled **Enable**. To disable this section, leave the checkbox unchecked. ## How to assign image? To assign an image, the first step is to upload the image to the image manager in the admin panel. [*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Background image** and **save**. ## How to add link? To assign a link, locate the textfield labeled **Button link** and insert text. {% hint style="warning" %} Please note that when assigning a link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} ## How to change position? To change the position of section content, find the setting labeled **Info position**. In the dropdown select your preferred position. # Multi Column The Multi Column section offers various customizable options, including enabling or disabling dividers and icons, adjusting text and background colors, and more. You have the flexibility to create up to three different columns, each labeled as **Column 1-3**. ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) To access the Multi Column tab within the page builder, locate and click on it. To display the multi-column section, select the **Enable** checkbox. Otherwise, deselect the checkbox to hide. ## How to change the number of column? To modify the number of columns, find the setting labeled **Count** and choose the desired amount from the dropdown menu. ## How to change icons? This section offers a wide selection of over **7000+** icons. To modify the icons in each column, locate the setting labeled **Icon** for each respective column. Explore the available [(icon list)](https://fontawesome.com/icons?d=gallery\&p=2). Click on the provided link for the icon list and search for the desired icon. Once found, click on the icon to view a page similar to the displayed image. {% hint style="info" %} In this example, the Archive Icon has been selected. {% endhint %}

Copy and paste the text between *class=”***copy this text***“* Return to the Multi Column section in the Theme Editor and paste the desired icons into the corresponding **Icon** sections. # Video {% hint style="info" %} Recommended image size **1600 x 700** or **16:7** aspect ratio {% endhint %} ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/Bja7TBQGttyXwLgwl9jD#page-builder) When inside the page builder, locate and click on the **Video** tab. To enable the section, select the checkbox labeled **Enable**. To disable this section, leave the checkbox unchecked. ## How to add image? To assign an image, the first step is to upload the image to the image manager in the admin panel. [*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Thumbnail** and **save**. ## How to add link? To assign a link, locate the textfield labeled **Button link** and insert text. {% hint style="warning" %} Please note that when assigning a link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Brands {% hint style="info" %} Recommended image size **150 x 90** or **16:9** aspect ratio {% endhint %} ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) To access the Brands tab within the page builder, locate and click on it. To enable this section the Images textfield has to be populated. To disable this section, leave the images textfield blank. ## How to add images? To assign an image, the first step is to upload the image to the image manager in the admin panel.[*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Images** and **save**. ## Adding multiple images When adding multiple images (Max 8 images), separate each image name them with the **|** symbol, such as image1.jpg**|**image2.jpg as an example. {% hint style="danger" %} Ensure that you do not conclude each textfield with the **|** symbol. {% endhint %} {% hint style="warning" %} Please note that when assigning images, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Blog {% hint style="info" %} **Recommended image size** 650px x 650px | **Aspect Ratio** 1:1 {% endhint %} ## How to enable blog section? First navigate to your **Theme Editor** [*(how to launch theme editor?)*](/themes/halo-one#page-builder) To configure the Blog section, navigate to the theme editor and locate the **Blog** settings. Within the popup settings list, you'll find the **Count** settings, which allows you to select the desired number of blogs to display. Choose the appropriate number from the dropdown options, or select "**none**" if you wish to disable this section. # Instagram Follow the steps below to connect the Instagram section. {% hint style="warning" %} Before setting up Disable [Demo Content](https://help.gordonbyte.com/themes/halo-one/general/demo-content). {% endhint %} ### Step 1: Create a Facebook App 1. Log into your Facebook Developer account using the official [Meta Developers portal](https://developers.facebook.com/). 2. Click **My Apps** and create a new app. 3. Enter your **App Name** and **App Contact** email, then click **Next**. 4. Under **Use Case**, select **Other**, then click **Next**. 5. Under **App Type**, choose **Business**, then click **Next**. 6. Click **Create App** to finish. ### Step 2: Assign User Role 1. From your app dashboard, open the left sidebar and select **App Roles**. 2. Click the **Add People** button. 3. Assign the **Instagram Tester** role. 4. Enter your Instagram username and click **Add**. {% hint style="warning" %} Note: The role will remain in **pending** status until it is confirmed inside Instagram {% endhint %} ### Step 3: Confirm User Role on Instagram 1. Log into your [Instagram](https://www.instagram.com/) account. 2. Go to your profile and tap the **Settings** icon. 3. Select **Apps and Websites**. 4. Under **Tester Invites**, locate the invitation from Meta and click **Accept**. ### Step 4: Configure Instagram Inside Meta {% hint style="warning" %} Note: Before continuing, make sure your Instagram account is set to a Business account. {% endhint %} 1. Go to your Meta Developer Dashboard. 2. In the **Add Products to Your App** section, select **Instagram** and click **Set Up**. 3. Locate the **Generate Access Token** section. Expand it if needed. 4. Click **Generate Token**. 5. Log into Instagram. If you are asked to convert your account to a professional account, complete that first, then generate the token again. 6. Set the following permissions: * **OFF** - Allow access to messages. **(Very Important!)** * **OFF** - Access and manage comments. * **OFF** - Access and manage messages. * **ON** - Access and publish content. * **OFF** - Access and manage insights. 7. Click **Allow** 8. On the token confirmation screen, check the **I Understand** box. 9. Copy your generated **Access Token** and store it securely. 10. Click **Done**. ### Step 5: Split and Enter Your Token Since the app requires the token to be entered in smaller parts, follow these steps: 1. Copy your generated access token. 2. Open the Token Splitter tool provided. 3. Paste your token into the input field. 4. Set the block size to **64 characters**. 5. Click **Split**. 6. Copy each section and paste them into the corresponding **Token 1** through **Token 4** fields inside the BigCommerce Theme Editor. {% hint style="warning" %} Note: When assigning a Token, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Demo Content The demo content included with each theme offers several benefits to merchants. It serves as a valuable tool for visualizing the website design, allowing merchants to see how different elements and features will appear on their site. The demo content provides a starting point, showcasing the theme's potential and offering inspiration for customization. Merchants can explore various layouts, styles, and functionalities of the theme through the demo content, enabling them to make informed decisions about their website's design. Please note that certain sections are preloaded with demo content. If the demo images persist, please disable them by following the instructions mentioned below. ## Enable/Disable Demo Content To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) When inside the page builder, locate and click on the **Homepage** tab. To enable the section, select the checkbox labeled **Enable demo content**. To disable all demo sections, leave the checkbox unchecked. ## # Section Ordering By having the ability to control the order of each section on the website's homepage, complete control is granted over the flow of the site. This grants the freedom to curate the user experience and prioritize content presentation according to specific goals. {% hint style="info" %} It's important to note that the new sorting order will not be immediately visible on the homepage until you hit **Save**. {% endhint %} ## How to change order of section? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) Within the Theme editor, navigate to the **Homepage** tab and locate the **Section Order** textfield. From here, you can arrange the sections according to your desired layout or even remove them completely. Below is a list of the **11** sections along with their respective numbers assigned to them: 1. Category Products 2. Featured Product 3. Featured Products List 4. Featured Info 5. Top Sellers 6. Multi Column 7. Latest Products 8. Video 9. Brands 10. Blog 11. Instagram When adding multiple section numbers, separate each number with the **|** symbol, such as 1**|**2**|**3**|**4 as an example. {% hint style="danger" %} Ensure that you do not conclude each textfield with the **|** symbol. {% endhint %} # Background Image Elevate your website's visual appeal with a subtle background image on the homepage. This carefully integrated design element enhances the ready-made styles of the theme, adding a touch of sophistication and allure. You also have the flexibility to customize the background color to suit your branding and design preferences. ## How to enable/disable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/halo-one#page-builder) When inside the page builder, locate and click on the **Homepage** tab. To enable homepage background image, select the checkbox labeled **Enable default background image**. If you prefer a solid background color without an image, simply disable this section by unchecking the checkbox. This will remove the image and provide a clean and minimalistic look for your website. # Card Swatches

## How to enable swatch? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/Bja7TBQGttyXwLgwl9jD#page-builder) Within the Theme editor, navigate to the **Products** tab and locate the **Product Cards** section. From here, you can enable the **Show swatch** checkbox option. {% hint style="warning" %} The first swatch set in the admin will be the one displayed on the product card. {% endhint %} # Changelog ## May 14th, 2025 – v2.1.2 * Version update * Fix swatch css sizing ## February 5th, 2025 – v2.1.1 * Add nonce to scripts in checkout and account pages * Changes to support inc/ex tax price lists on PDP * Category menu dropdown z index fix * Product per page count addition * Product slider feature name truncate ## October 14th, 2024 – v2.1.0 * Added Mobile Hero Images settings in theme editor * Added Price color settings in theme editor * Added Copyright right background settings in theme editor * Added Product card sections enable settings in theme editor ## August 11th, 2024 – v2.0.15 * Feature Product scroll bug fix ## August 11th, 2024 – v2.0.11 to v2.0.14 * Remove Hero slider animation * version update ## August 6th, 2024 – v2.0.10 * Product page video bug fix * Mobile filter bug fix * Additional swatch theme setting options * Code structure/maintenance * Hero slider animation * Improve Category Products section loading placeholders ## June 7th, 2024 – v2.0.9 * Demo image resized ## March 15th, 2024 – v2.0.8 * Hero banner background bug fix * Instagram height bug fix * Swatch bug fix ## November 2nd, 2023 – v2.0.7 * Instagram feed bug fix * Homepage order fix ## August 11th, 2023 – v2.0.6 * Version correction ## July 28th, 2023 – v2.0.5 * Fixed issue with the theme copy customization section order * Enhanced category pages to resemble the default layout * Implemented schema force reload for live changes. ## July 19th, 2023 – v2.0.4 * Logout functionality added to the account page * Resolved issue with review stars not displaying on the homepage * Eliminated white space at the top of mobile view * Resolved issue with mobile menu alternate settings style * Updated theme settings to display 4 products per row in the Featured/Popular/New section ## July 7th, 2023 – v2.0.3 * Resolved default category products style colors in .config * Fixed scroll type for featured product slider * Resolved category products demo issue * Enhanced button styling on the cart page ## June 30th, 2023 – v2.0.2 * Added widget fields for above header & below footer * Resolved Instagram demo issue * Corrected assignment of carousel arrow color ## June 21st, 2023 – v2.0.1 * Re-incorporate all previous .config settings * Moved 'Enable Demo Content' to the Homepage tab in theme settings * Moved 'Section Ordering' to the Homepage tab in theme settings ## June 18th, 2023 – v2.0.0 * Significant improvement in theme structure * Theme settings reorder ## October 14th, 2022 – v1.2.3 * Lang/en header sign\_out addition ## September 29th, 2022 – v1.2.2 * Applied custom font option to the Top Action Bar * Reduced padding in accordion elements * Spanish es translation * Enabled newsletter customization in the theme editor ## July 29th, 2022 – v1.2.1 * Implemented style force reload in the theme editor upon option selection * Added popup customization in the theme editor * Updated Font Awesome to version 6 ## June 28th, 2022 – v1.2.0 * Included all Google Fonts in the font theme editor * Updated carousel height configuration * Sale/Soldout badge configuration * Incorporated homepage section ordering functionality ## May 13th, 2022 – v1.1.4 * Added enable/disable option for header main navigation * Corrected assignment of footer social link color * Corrected assignment of copyright link color ## April 22th, 2022 – v1.1.3 * Added border to the sidebar * Resolved social media icon positioning in the header and footer * Centered empty cart text * Enabled breadcrumbs functionality * Included widgets above the Category Products section ## March 15th, 2022 – v1.1.2 * Resolved display issue with product options swatch names ## February 4th, 2022 – v1.1.1 * Added multi-language support to theme settings ## January 18th, 2022 – v1.1.0 * Included 'View All' option for categories * Added Instagram slider feature * Included newsletter popup functionality ## December 29th, 2021 – v1.0.2 * Added loading spinner to category products * Fixed mobile display of Feature Info section ## December 23th, 2021 – v1.0.1 * Resolved issue with footer address * Added margin to dropdown navigation * Fixed border radius of oval-style carousel buttons * Resolved CSS focus issue in the theme * Fixed schema for products per row configuration ## December 21st, 2021 – v1.0.0 * Initial Commit # Clariss Theme ## Overview Clariss is a highly customizable theme that puts your brand in the spotlight and delivers a superior user experience. With its optimized layout and extensive customization options, you can create a unique website without any coding. Showcase banners, link to blog posts, and offer seamless navigation to enhance engagement. Choose from four styles that can be personalized for any industry, making Clariss the perfect choice to elevate your brand online. ## How to launch Page Builder? To customize the Clariss theme follow these steps to launch page builder: 1. Access your Bigcommerce store admin panel. 2. Navigate to the **Storefront > Themes** tab. 3. Locate Halo One theme & click the **Customize** button, which will launch the Page Builder. {% hint style="info" %} You can also refer to this [Bigcommerce article](https://support.bigcommerce.com/s/article/Page-Builder?language=en_US). {% endhint %} ## Selecting a theme style? The Clariss theme provides 4 unique style options: Fashion, Home, Electronics, and Health. Each style showcases its own theme colors and specific a demo content preview, allowing users to visualize the appearance of their website with the selected style. **FASHION** [(Demo site)](https://clariss-fashion-demo.mybigcommerce.com/)

**HOME** [(Demo site)](https://clariss-home-demo.mybigcommerce.com/)

**ELECTRONICS** [(Demo site)](https://clariss-electronics-demo.mybigcommerce.com/)

**HEALTH** [(Demo site)](https://clariss-health-demo.mybigcommerce.com/)

# Announcement Bar The Announcement bar is a powerful feature that effectively displays important messages and updates for your store. Positioned strategically below the category menu and above the slider sections, it ensures visibility to all visitors. This feature offers extensive customization options, empowering you to effortlessly adjust the text, font size, and both text and background colors. This flexibility allows seamless alignment with your store's branding and aesthetics, enhancing the overall user experience. ## How to enable? First navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/l70ukVlENbPXMRAkA0Kd#page-builder) **Announcement** Open the interface and navigate to the **Announcement Bar** tab. Search for the **Enable** title and select the checkbox to display. To disable this section, leave the Enable checkbox unselected. Locate the **Announcement** title and input the desired text into the designated text field located below. {% hint style="info" %} Announcement text only shows when **Style** is set to the options Style 1 & Style 2 {% endhint %} **Store Location** Open the interface and navigate to the **Store location** tab. Search for the **Enable** title and select the checkbox to display. To disable this section, leave the Enable checkbox unselected. **Store Number** Open the interface and navigate to the **Store number** tab. Search for the **Enable** title and select the checkbox to display. To disable this section, leave the Enable checkbox unselected. {% hint style="info" %} **Store Location** & **Store Number** only shows when **Style** is set to the options Style 2 & Style 3 {% endhint %} # Carousel {% hint style="info" %} Desktop recommend around **1600 × 900** pixels or **16:9** aspect ratio {% endhint %} ### Mobile Images To insert images separate for mobile, first navigate to your **Page Builder** [*(how to launch Page Builder?)*](https://help.gordonbyte.com/themes/halo-one#page-builder) Then navigate to **Homepage** > **Carousel**. In the **Mobile Images** field, enter the filenames of the mobile images you want to display. Make sure to list each image in the same order as the desktop images, separating each with a **|** symbol, such as image1.jpg**|**image2.jpg as an example {% hint style="info" %} Recommended image size **400 x 600px** {% endhint %} {% hint style="danger" %} Ensure that you do not conclude each textfield with the **|** symbol. {% endhint %} ### How to add images? To assign an image, the first step is to upload the image to the image manager in the admin panel.[*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **Images** and **save**. {% hint style="warning" %} Please note that when assigning images, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Main Menu When the main navigation is enabled, it creates a dedicated section above the main header to showcase all your webpage links. You can customize the text and background color of this section, giving you full control over its appearance. ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/l70ukVlENbPXMRAkA0Kd#page-builder) When inside the page builder, locate and click on the **Main Menu** tab. To enable the section, select the checkbox labeled **Enable**. # Banner {% hint style="info" %} Horizontal Banners size: **600 x 750** or **4:5** aspect ratio {% endhint %} {% hint style="info" %} Vertical Banners size: **700 x 300** or **16:7** aspect ratio {% endhint %} ## How to enable banner? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/Bja7TBQGttyXwLgwl9jD#page-builder) When inside the page builder, locate and click on the **Banner** tab. Find the dropdown settings titled Count and select the amount of total number of banners to show. To disable select the **none** option. ## How to Enable & Change mini text? Look for the **Mini text** section within the settings and find the option labeled **Enable.** To enable the section, select the checkbox labeled **Enable**. To disable this section, leave the checkbox unchecked. Once the mini text feature is enabled, you will notice additional text fields appearing above each main text field. Locate the setting labeled **Text** and input your desired content in the respective textfield. ## How to change main text? Locate the setting labeled **Title** and input your desired content in the respective textfield. ## How to add image? To assign an image, the first step is to upload the image to the image manager in the admin panel. [*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled **image** and **save**. ## How to add link? To assign a banner link, locate the textfield labeled **Link** and insert text. {% hint style="warning" %} Please note that when assigning a banner link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Featured Product The Featured Product section is a powerful tool to highlight a single product on your homepage, giving it prominent visibility. This feature becomes particularly valuable when you want to emphasize a specific product, increase its sales, or promote a special offer. By showcasing a chosen product in this section, you can effectively capture the attention of your visitors and create a sense of focus on the featured item. ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/QxLQgsKd9hzmnWXnN4vP#page-builder) When working within the Page Builder, locate and select the **Featured Product** tab. Look for the textfield labeled **Product item** and enter the **ID** of the desired product you want to display. To disable this section, leave the product item textfield empty. ## How to find Product ID? To locate your product ID, follow these steps: 1. Access your Bigcommerce web store admin panel. 2. Navigate to the **Products**. 3. Select the name of a product to display. 4. Examine the URL to find the product ID number.

# Full Banner {% hint style="info" %} Recommended image size **1600 x 700** or **16:7** aspect ratio {% endhint %} ## How to enable banner? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/Bja7TBQGttyXwLgwl9jD#page-builder) When inside the page builder, locate and click on the **Full Banner** tab. Search for the **Enable** title and select the checkbox to display. To disable this section, leave the Enable checkbox unselected. ## How to enable & change mini text? Look for the **Mini text** section within the settings and find the option labeled **Enable.** To enable the section, select the checkbox labeled **Enable**. To disable this section, leave the box unchecked. Once the mini text feature is enabled, locate the setting labeled **Text** and input your desired content in the respective textfield. ## How to change main text? Locate the setting labeled **Title** and input your desired content in the respective textfield. ## How to add image? To assign an image, the first step is to upload the image to the image manager in the admin panel. [*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading) After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol. *Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&* Once copied go back to the theme editor and paste in the textfield labeled I**mage** and **save**. ## How to add link? To assign a banner link, locate the textfield labeled **Link** and insert text. {% hint style="warning" %} Please note that when assigning a banner link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Blog {% hint style="info" %} **Recommended image size** 650px x 650px | **Aspect Ratio** 1:1 {% endhint %} ## How to enable blog section? First navigate to your **Theme Editor** [*(how to launch theme editor?)*](broken://pages/QxLQgsKd9hzmnWXnN4vP#page-builder) To configure the Blog section, navigate to the theme editor and locate the **Blog** settings. Within the popup settings list, you'll find the **Count** settings, which allows you to select the desired number of blogs to display. Choose the appropriate number from the dropdown options, or select "**none**" if you wish to disable this section. # Newsletter ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/l70ukVlENbPXMRAkA0Kd#page-builder) Locate the **Newsletter** section and find the setting labeled **Enable**. Check the box to enable the feature or uncheck it to disable. # Instagram Follow the steps below to connect the Instagram section. {% hint style="warning" %} Before setting up Disable [Demo Content](https://help.gordonbyte.com/themes/halo-one/general/demo-content). {% endhint %} ### Step 1: Create a Facebook App 1. Log into your Facebook Developer account using the official [Meta Developers portal](https://developers.facebook.com/). 2. Click **My Apps** and create a new app. 3. Enter your **App Name** and **App Contact** email, then click **Next**. 4. Under **Use Case**, select **Other**, then click **Next**. 5. Under **App Type**, choose **Business**, then click **Next**. 6. Click **Create App** to finish. ### Step 2: Assign User Role 1. From your app dashboard, open the left sidebar and select **App Roles**. 2. Click the **Add People** button. 3. Assign the **Instagram Tester** role. 4. Enter your Instagram username and click **Add**. {% hint style="warning" %} Note: The role will remain in **pending** status until it is confirmed inside Instagram {% endhint %} ### Step 3: Confirm User Role on Instagram 1. Log into your [Instagram](https://www.instagram.com/) account. 2. Go to your profile and tap the **Settings** icon. 3. Select **Apps and Websites**. 4. Under **Tester Invites**, locate the invitation from Meta and click **Accept**. ### Step 4: Configure Instagram Inside Meta {% hint style="warning" %} Note: Before continuing, make sure your Instagram account is set to a Business account. {% endhint %} 1. Go to your Meta Developer Dashboard. 2. In the **Add Products to Your App** section, select **Instagram** and click **Set Up**. 3. Locate the **Generate Access Token** section. Expand it if needed. 4. Click **Generate Token**. 5. Log into Instagram. If you are asked to convert your account to a professional account, complete that first, then generate the token again. 6. Set the following permissions: * **OFF** - Allow access to messages. **(Very Important!)** * **OFF** - Access and manage comments. * **OFF** - Access and manage messages. * **ON** - Access and publish content. * **OFF** - Access and manage insights. 7. Click **Allow** 8. On the token confirmation screen, check the **I Understand** box. 9. Copy your generated **Access Token** and store it securely. 10. Click **Done**. ### Step 5: Split and Enter Your Token Since the app requires the token to be entered in smaller parts, follow these steps: 1. Copy your generated access token. 2. Open the Token Splitter tool provided. 3. Paste your token into the input field. 4. Set the block size to **64 characters**. 5. Click **Split**. 6. Copy each section and paste them into the corresponding **Token 1** through **Token 4** fields inside the BigCommerce Theme Editor. {% hint style="warning" %} Note: When assigning a Token, it is important to keep it within 64 characters in each textfield. Exceeding this limit may result in errors when saving changes. {% endhint %} # Multi Column The Multi Column section offers various customizable options, including enabling or disabling dividers and icons, adjusting text and background colors, and more. You have the flexibility to create up to three different columns, each labeled as **Column 1-3**. ## How to enable? To enable first navigate to your **Page Builder** [*(how to launch Page Builder?)*](broken://pages/QxLQgsKd9hzmnWXnN4vP#page-builder) To access the Multi Column tab within the page builder, locate and click on it. To display the multi-column section, select the **Enable** checkbox. Otherwise, deselect the checkbox to hide. ## How to change the number of column? To modify the number of columns, find the setting labeled **Count** and choose the desired amount from the dropdown menu. ## How to change icons? This section offers a wide selection of over **7000+** icons. To modify the icons in each column, locate the setting labeled **Icon** for each respective column. Explore the available [(icon list)](https://fontawesome.com/icons?d=gallery\&p=2). Click on the provided link for the icon list and search for the desired icon. Once found, click on the icon to view a page similar to the displayed image. {% hint style="info" %} In this example, the Archive Icon has been selected. {% endhint %}