Annie's Garden - Premium BigCommerce Stencil Template - Documentation
- By: halothemes
- Support Portal: https://halosoft.ticksy.com/
-
Annie's Garden isn’t just an ordinary simple Bigcommerce Theme, it is a perfectly designed template with 03 Homepage layouts for 03 indutries for any online store such as plant, garden, farm, flower and supermarket, electronic...
This template is designed after a detailed analysis about this kind of business for e-commerce and combining all the necessary features in one page to meet the requirements from the pickiest customers. Layout is tight and wide beside the powerful product blocks which offer Quick Shop (Call to action) function. Theme is blended together with responsive, cross-browser compatibility and friendliness with Mobile devices.
Annie's Garden will be an attractive and neat Bigcommerce theme created for gardening and houseplants by HaloThemes. Go exploring by yourself. We make sure the template can impress your customers from the first look.
You can also browse more BigCommerce Themes & BigCommerce Add-ons to meet your requirements!
-
Theme Support:
Many support and technical questions will already be answered in this documentation, so please read our Documentation first. Please read carefully and follow from Top to Bottom, you will find the detailed instruction to setup each of element in theme. You are using Bigcommerce theme and Bigcommerce platform itself requires the HTML knowledge (little bit) needed for how to update the sample image banners (URL image links) & dummy texts.
If you can’t find the answer you’re looking for or need our help, Our Support Portal: https://halosoft.ticksy.com/. We will support you!
All of your emails will be reviewed and checked carefully. However, based on the number support tickets and the nature of the request itself, the response time can be up to 1-2 business days. At weekends, our support is also limited because Customer Service Dept., doesn't work on the weekend.
A supported item includes support service for 6 months from the purchase date. You’ll also have the option to purchase the support extension up to 12 months if you want. If your support time is expired, please extend your support time to continue getting the support for item.
-
Item support includes:
- Responding to questions or problems regarding the item’s issue and its features
- Fixing bugs and reported issues
- Providing update versions to ensure theme works well
-
Item support does NOT include:
- Item customization & Installation
- Setting up your store
- The theme is customized without our permission
- Support for third party customs/software/plug-ins
- Teaching you HTML & CSS etc.
If you want to custom this template, make a new Bigcommerce template for your store or further services. Our Support Portal: https://halosoft.ticksy.com/
Full Theme Features
- Supported Theme Editor
- Included Google’s Rich Product Snippets For Better SEO
- Responsive Web Design (Uses CSS3 / HTML5 + Foundation 5 & Google Web Fonts)
- Compatible With All The Main JavaScript Frameworks, Libraries & Tools (Bootstrap,...)
- Sticky Header
- Dropdown Menu / Advanced Mega Menu
- Home Page Carousel
- Ajax Dropdown Cart
- Ajax Add To Cart
- Quick Add To Cart
- Add To Cart Popup (Minimal / Normal)
- Quick Search Product
- Search By Category Function
- Quick View Product
- Product Comparison Table
- Grid & List Product Display Mode
- Product Filtering
- Product Labels (Sale / New /Out Of Stock / Custom Label)
- Product Images Size
- Product Detail
- Product Countdown
- Sold In Last Function / Customer Viewing Function
- Customer Viewing Function
- Product Reviews
- Before You Leave Function
- Complete The Look Function
- Sticky Add To Cart Function
- Hot Stock Function
- Notfify Me: Out Of Stock Function
- Frequently Bougth Together (Bundle Products)
- Compare Color Function
- Show More / Pagination On Product Listing
- Show Color Swatch On Product Listing
- Recently Sales Popup Notifications
- Custom Brands Page Layout By Using Alphabet
- Custom FAQs Page Layout
- Custom Lookbook Page Layout
- Custom Portfolio Page Layout
- Customer Form - Ask An Expert
- Calculate Shipping Function
- Previous / Next Product Function
- Newsletter Popup
- Extra Space For Promotion Text, Banners, Store Information, Links
- Custom Contact Page with Google Maps and Store Information
- Best Responsive For All Device
- The Markup Validation Service By W3C
- Many More...
Installation
What We'll Cover
Preparing Theme Package
Once you unzip the file BC-Annie-Garden-Theme-Package-UnZip-Me.zip is complete, you would see the following packages:
+ Documentation (Theme User Guide) folder - please open the index.html file to start reading our Theme User Guide.
+ Images Demo folder.
+ Annie's Garden Stencil-x.x.x.zip (Theme source to upload to Bigcommerce).
+ PSD Files folder.
With x.x.x is number of the curent theme version.
Uploading Theme
Please notice that: After you upload theme source into your store, the layout of theme may not look exactly our demo layout because there are some sections you will need to follow our instruction to setup to show. Please follow our instruction below to setup.
This is Instruction Video for Installation theme for your reference:
1. Go to Storefront › My Themes.
2. Click the Upload Theme button by the My Themes heading below the Current Theme.
3. Drag the ZIP file Annie's Garden Stencil-1.0.0.zip into the Upload Theme pop-up window, or you can Select theme from your computer.
4. Once the ZIP file has uploaded, a theme card will appear under My Themes showing theme processing progress. Click Cancel if you want to halt processing and start over.
5. After processing, a new custom theme card will appear under My Themes
Uploading Images Demo
You can find all the images demo in the theme package (Images Demo folder).
1. Go to Storefront › Image Manager, then click Upload Images.
2. In the popup that appears, click Choose File (or Browse) and select an image from your computer.
3. Repeat Step 2 for each additional image you want to upload. When you are finished, click Upload.
4. After processing, new images will appear under Image Manager
For more information about Image Manager, see Using the Image Manager.
Editing Stencil Theme Files (Must Read)
What We'll Cover
The Stencil File Editor offers you the option of direct browser access to the code that makes up your theme, without having to install Stencil CLI (command-line interface). This is ideal for making minor adjustments to your theme that cannot be done directly within Theme Editor, or for adding scripts to integrate apps.
These instructions cover the basic steps to access Stencil-based themes template files and edit their HTML/CSS using the in-browser editor. For information about customizing Blueprint themes, see Accessing and Customizing Template Files (Blueprint).
This is an advanced feature, and requires knowledge of HTML/CSS and Handlebars. For major design adjustments, or new theme development, we recommend that you or your developer use Stencil CLI, which provides access to all theme files.
Before making large changes we suggest downloading your current theme.
Accessing Edit Theme Files
To access the HTML/CSS files in Theme Editor, you first have to make a copy of your theme.
1. Go to Storefront › My Themes and click on the thumbnail image of the theme.
2. From the Theme Options drop down menu, select Make a Copy.
Why do I have to make a copy? Creating a copy of your theme allows you to make changes to your Storefront without disrupting your live store. You can use the Preview button to see how changes will affect your store.
3. You will be prompted to name the theme copy. Type in a Theme Name, then click Save a Copy.
It may take a few seconds for the theme to be copied.
4. Click on the thumbnail image of your copied theme, from the Theme Options drop down menu, select Edit Theme Files.
Editing Theme Files
When you click the Edit Theme Files, it replaces the preview panel with the theme’s underlying code. The tab’s left-hand side shows you the theme’s files, in a tree of nested folders. Files and directories that should only be edited by the original theme developer are hidden from this view. To edit those files, you will need to use Stencil CLI.
- Theme Files — these are the folders and files that make up your theme. Click on a blue folder to open it. Click on a blue .html or .scss file to edit it. Greyed-out files can be altered only using Stencil CLI, although some greyed-out files can be viewed here.
- Code Panel — this is where you edit the code of the selected file
- Preview — will display a preview of your store, based on your last save
- Save File — will save the file currently open and recompile the theme
- Save All Files — will save all open files and recompile the theme
The file editor color-codes elements within your source HTML, for easy identification and will auto-suggest HTML as you type. It also includes the ability to Undo and Redo edits. The file editor allows for a mix of HTML, Handlebars statements, SCSS, and JavaScript tags in your theme’s template files.
Can I add JavaScript files? You can add JavaScript tags to the html, but you cannot add or edit JavaScript files with the File Editor. To add or edit JavaScript files, you must use the Stencil CLI.
Saving Theme Files
When you click the Save File or Save All Files button, it will recompile and repackage the theme files with your changes. You can then preview the revised theme and (if you choose) apply it to your store. Saving and compiling might take a few minutes to complete, depending on the complexity and number of the changes.
Once saved, you can preview the theme by clicking the Preview button.
Applying New Theme to Storefront
1. When you are happy with your changes, click Save to repackage the edited theme.
2. Navigate to Storefront › My Themes, then scroll down to the list of your themes.
3. Click on the Theme you copied and edited.
4. Choose layout that you want apply, then click Continue to apply.
Check your storefront to see your changes in action.
Something go wrong? After applying the new theme, if things are not working, you can go back to the original theme. Click on the thumbnail of the original theme and click the Apply button. Then you can troubleshoot your edited theme without disrupting your business.
Limitations
The following features are not available with Edit Theme Files:
- Editing assets like font files, .SVG files, or other image files
- Editing a theme’s config.json or schema.json configuration files (although you can view their contents)
- Have up to 10 files open, simultaneously, in the File Editor.
- Editing any JavaScript files
- Concurrent editing is not supported. For a given store, only one instance of the editor should be opened at any time.
Setting Up Header Content
What We'll Cover
Top Bar Promotion
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Header / Top Bar Promotion
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Store Logo
You can adjust the size of logo to fit with your site.
By default, store logo only shows on the left side. With the design of Annie's Garden, it won't look good if the logo changes position so it only has one style.
In the Admin panel -> go to Storefront -> Logo
Also, here is an article of BigCommerce for your reference: https://support.bigcommerce.com/articles/Public/Uploading-a-Custom-Logo/
Setting Dropdown Menu / Mega Menu
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Menu
Annie's Garden has 4 styles of Mega Menu. Our theme has Advanced Mega Menu which almost all of other themes don't offer. You can change columns, products, image and custom link in Theme Editor.
In case you cannot make change, our support team is available to support you, Our Support Portal: https://halosoft.ticksy.com/
First of all, you need to know the Numerical order of the category items:
Sample Options Megamenu Style 1
3 Columns Categories, 1 Custom Column, 1 Custom Product Block and 1 Right Banner
Recommended banner Size: 470x320px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
Setting for Mega Menu Style 1
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Menu -> MegaMenu Style 1
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Sample Options Megamenu Style 2
3 Columns Categories, 1 Custom Column, 1 Custom Brand Block and 2 Right Banners
Recommended banner Size: 270x365px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
Setting for Mega Menu Style 2
Go to Storefront -> My Themes -> Customize.
In the Stencil File Editor -> go to Menu -> MegaMenu Style 2
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Sample Options Mega Menu Style 3
5 Columns Categories with Top Banners
Recommended banner Size: 290x155px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
Setting for Mega Menu Style 3
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Menu -> MegaMenu Style 3
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Sample Options Mega Menu Style 4
3 Columns Categories, 1 Left Banner, 2 Right Banners and 1 Custom Product Block
Recommended banner Size: 605x450px and 270x150px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
Setting for Mega Menu Style 4
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Menu -> MegaMenu Style 4
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Menu Label: Sale, Hot, New
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Menu / Menu Label
If you want to disable New label on the main menu, please leave "New Label" field blank. The same for Sale label and Hot label.
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Setting Quick Search Dropdown
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Header / Quick Search
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Setting Up Footer Content
What We'll Cover
Common Settings
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Footer
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Footer Top
Footer Column 1
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Footer / Column 1
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Footer Column 2
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Footer / Column 2
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Footer Column 3
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Footer / Column 3
If you enable the Show Brands option, Column 3 will automatically display the brands on your website.
If you disable the Show Brands option, Column 3 will allow you to enter the text and url of each link you want.
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Footer Column 4
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Footer / Column 4
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Footer Bottom
Go to Storefront -> My Themes -> Customize
In the Theme Editor -> go to Footer / Common / Payment Icons / GeoTrust SSL
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Setting Up Home Page Content
What We'll Cover
- Home Page Carousel
- Block: Icon With Text 1
- Block: Icon With Text 2
- Block: Product By Categories With Flash Deals
- Block: Product Tabs
- Block: Special Product
- Block: Featured Products / New Products / Best Seller Products / Product By Category
- Block: Product By Categories With Banner
- Block: Brand Collection
- Block: Image Collection 1
- Block: Image Collection 2
- Block: Banner With Video
- Block: Short FAQs
- Block: Customer Reviews
- Block: Parralax Banner
- Block: Home Recent Blog
- Block: Instagram
- Block: Five Images
- Block: Three Images
- Block: Featured Collection
- Block: Marquee
- Block: Collection List
- Block: Special Banner
- Block: Image Comparison
- Block: Video Banner
- Block: Brand List
- Block: CountDown Banner
- Block: Top Reviews
- Block: Popular Collection
- Block: Policy
- Block: FAQs
- Block: Image Banner
Home Page Carousel
Recommended banner Size: 1920x720. Please notice that you will need to upload the correct size like our recommended size for slider banner to show the perfect banners like our Demo theme.
In the Admin panel -> go to Storefront -› Home Page Carousel
Also, Here is an article of BigCommerce for your reference: https://support.bigcommerce.com/articles/Public/Using-the-Carousel-Builder/
Setting Home Page Carousel
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Main Carousel
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Mobile Images must be successfully upload to the Image Manager.
Block: Icon With Text 1
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Icon With Text Block
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
- If you want to change the icon of the blocks with an image, please enter the image name in the Icon (x): Image field. Example: icon-block-1.jpg. Recommended image Size: 40x40.
- Or if you want to change the icon of the blocks with the SVG icon, please see the instruction below and leave the Icon (x): Image field blank.
How do I upload SVG icon for this block?
To upload SVG Icon, Go to Storefront -> My Themes -> Advanced -> Edit theme files.
In the Stencil File Editor -> go to assets/img/icon-sprite.svg file.
- Remove the attributes expect viewBox from the SVG element
- Convert the svg tag into symbol tag
- Remove the class attributes and add the id attributes.
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
How do I change SVG icon for this block?
To change SVG Icon, Go to Storefront -> My Themes -> Advanced -> Edit theme files.
In the Stencil File Editor -> go to templates/components/halothems/home/home-icon-with-text.html file.
Change href attribute of svg tags with Svg ID which you uploaded before.
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
For more information about SVG Icon, see How we use SVG sprites?
In case you cannot make change, our support team is available to support you, Our Support Portal: https://halosoft.ticksy.com/
Block: Icon With Text 2
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Icon With Text Block 2
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
- If you want to change the icon of the blocks with an image, please enter the image name in the Icon (x): Image field. Example: icon-block-1.jpg. Recommended image Size: 75x75.
- Or if you want to change the icon of the blocks with the SVG icon, please see the instruction below and leave the Icon (x): Image field blank.
How do I upload SVG icon for this block?
Please see the instruction here.
How do I change SVG icon for this block?
To change SVG Icon, Go to Storefront -> My Themes -> Advanced -> Edit theme files.
In the Stencil File Editor -> go to templates/components/halothems/home/home-icon-with-text2.html file.
Change href attribute of svg tags with Svg ID which you uploaded before.
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
For more information about SVG Icon, see How we use SVG sprites?
In case you cannot make change, our support team is available to support you, Our Support Portal: https://halosoft.ticksy.com/
Block: Product By Categories With Flash Deals
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Product By Categories With Flash Deals
We limit products by category / subcategory to 3 levels
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Block: Product Tabs
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Product Tabs
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Block: Special Product
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Special Product
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Block: Featured Products / New Products / Best Seller Products / Product By Category
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Product Block
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Block: Product By Categories With Banner
Layout 1:
This layout is only visible on Homepage Layout 1.
Layout 2:
This layout is only visible on Homepage Layout 2.
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Product By Categories With Banner
We limit products by category / subcategory to 3 levels
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Block: Brand Collection
Recommended banner Size: 210x100px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Brand Collection on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_top_brands" class="halo-marketing-banners">
<div class="halo-block halo-top-brands padding-top-60 padding-bottom-30">
<div class="container container-custom2 container-no-padding">
<div class="halo-block-header">
<h3 class="title">As Seen On</h3>
</div>
<div class="halo-row">
<div class="halo-row-slider">
<div class="halo-row-item">
<a href="#" class="image-with-border">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/brand-slider1.jpg" alt="Brand 1" title="Brand 1">
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a href="#" class="image-with-border">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/brand-slider2.jpg" alt="Brand 2" title="Brand 2">
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a href="#" class="image-with-border">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/brand-slider3.jpg" alt="Brand 3" title="Brand 3">
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a href="#" class="image-with-border">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/brand-slider4.jpg" alt="Brand 4" title="Brand 4">
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a href="#" class="image-with-border">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/brand-slider5.jpg" alt="Brand 5" title="Brand 5">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Image Collection 1
Recommended banner Size: 770x810px, 370x390px and 770x390px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Image Collection on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_top_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners padding-top-30 padding-bottom-0">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Weekly Special Offers</h3>
</div>
<div class="halo-image-collection">
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-top-banner-1.jpg" alt="Lorem Comodous" title="Lorem Comodous">
</a>
<div class="content-wrapper">
<span class="subtitle">Sale up to 60% Off</span>
<h2 class="title">Lorem Comodous</h2>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="item-child two-item-child">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-top-banner-2.jpg" alt="Dincidunteros" title="Dincidunteros">
</a>
<div class="content-wrapper">
<span class="subtitle">Sale 10% Off</span>
<h2 class="title">Dincidunteros</h2>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-top-banner-3.jpg" alt="Namdos Hempus" alt="Namdos Hempus">
</a>
<div class="content-wrapper">
<span class="subtitle">Sale 30% Off</span>
<h2 class="title">Namdos Hempus</h2>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item-child">
<div class="image-collection half-height">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-top-banner-4.jpg" alt="Pellento Habitande" title="Pellento Habitande">
</a>
<div class="content-wrapper">
<span class="subtitle">Today Only: Sale 40% Off</span>
<h2 class="title">Pellento Habitande</h2>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Image Collection 2
Recommended banner Size: 370x440px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Image Collection on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_middle_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners halo-banners2 padding-top-30 padding-bottom-30">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Shop By Categories</h3>
</div>
<div class="halo-image-collection2">
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-1.jpg" alt="Bulk Trays" title="Bulk Trays">
</a>
<div class="content-wrapper">
<h2 class="title">Bulk Trays</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-2.jpg" alt="Hardy Succulents" title="Hardy Succulents">
</a>
<div class="content-wrapper">
<h2 class="title">Hardy Succulents</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-3.jpg" alt="Indoor Succulents" title="Indoor Succulents">
</a>
<div class="content-wrapper">
<h2 class="title">Indoor Succulents</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-4.jpg" alt="Rare & Unusual" title="Rare & Unusual">
</a>
<div class="content-wrapper">
<h2 class="title">Rare & Unusual</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-5.jpg" alt="Cuttings & Bare Root" title="Cuttings & Bare Root">
</a>
<div class="content-wrapper">
<h2 class="title">Cuttings & Bare Root</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-6.jpg" alt="Catus" title="Catus">
</a>
<div class="content-wrapper">
<h2 class="title">Catus</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-7.jpg" alt="Rare Catus" title="Rare Catus">
</a>
<div class="content-wrapper">
<h2 class="title">Rare Catus</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-8.jpg" alt="Most Pupolar" title="Most Pupolar">
</a>
<div class="content-wrapper">
<h2 class="title">Most Pupolar</h2>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum...</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
</div>
<div class="halo-block-footer">
<a href="#" class="button button--transparent">Browse All</a>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Banner With Video
Recommended banner Size: 1345x760px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Banner With Video on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_bottom_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners-5 padding-top-0 padding-bottom-0">
<div class="container-fluid">
<div class="halo-fullwidth-banner">
<div class="video-block-left">
<div class="video-block-content">
<h2 class="title heading-with-line">
<span>Learn<br> how to care<br> for your<br> succulents</span>
</h2>
<span class="desc">Welcome to the Fascinating World of Cactus and Succulents! On this page we cover the basics for growing and maintaining your succulent plants, including hardiness information, soil suggestions, sunlight and watering tips, propagation techniques, and dealing with pests and diseases.
</span>
<a href="#" class="button button--primary">Read More</a>
</div>
</div>
<div class="video-block-right">
<a class="video-block-image" href="https://youtu.be/O98_vEL70tI" data-fancybox="videos">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-banner-video-block.jpg" alt="Learn how to care for your succulents" title="Learn how to care for your succulents">
</a>
<div class="block-content-video">
<a href="https://youtu.be/O98_vEL70tI" class="button-popup-video" data-fancybox="videos2">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-banner-video-icon.png" alt="Learn how to care for your succulents" title="Learn how to care for your succulents">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Short FAQs
To show Short FAQs on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input content below:
<div id="halo_short_faqs" class="halo-marketing-banners">
<div class="halo-block halo-faqs-block padding-top-40 padding-bottom-40">
<div class="container">
<div class="halo-short-faqs">
<div class="short-faqs-left">
<div class="image-wrapper">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/avatar-owner.png" alt="Annie Lee" title="Annie Lee">
</div>
<div class="content-wrapper">
<span class="subtitle">My Story</span>
<h3 class="title">Don’t stop giving love even if you don’t receive it.<br>Smile and have patience.</h3>
<div class="desc">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus leo, elementum in malesuada an darius ut augue. Cras sit amet lectus et justo feugiat euismod sed non erat. Nulla non felis id metus bibendum iaculis quis sit amet eros. Nam suscipit mollis tellus vel malesuada. Cum sociis natoque penatibus et magnis.</span>
<span>Duis danos an molestie, sem in sollicitudin sodales mi justo sagittis est id consequat ipsum ligula. Praesent deu odio des nisios dullamcorper sultricies.</span>
</div>
<div class="signature">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/signuature.png" alt="Annie Lee" title="Annie Lee">
</div>
<h4 class="name">Annie Lee</h4>
<span class="company">Store Owner at ANNIE'S GARDEN</span>
</div>
</div>
<div class="short-faqs-right">
<div class="faqs-paragraph">
<span class="subtitle">Help and FAQs</span>
<div id="accordion">
<div class="card">
<div class="card-header" id="faqs-1-title">
<button class="title" data-toggle="collapse" data-target="#faqs-1-content" aria-expanded="true" aria-controls="faqs-1-content">
Pharetra quis sapien et elementum interdum odio?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-1-content" class="collapse" aria-labelledby="faqs-1-title" data-parent="#accordion">
<div class="card-body">
<p>Quisque ligula sapien, luctus suscipit hendrerit id, suscipit vel leo. In hac habitasse platea dictumst. Donec rhoncus, erat vel ullamcorper suscipit, nisi lectus facilisis felis, vel pharetra augue purus vitae velit. Mauris non aliquet magna. Aenean tempus iaculis odio vitae sagittis fusce ultricies non dolor id honcus.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-2-title">
<button class="title" data-toggle="collapse" data-target="#faqs-2-content" aria-expanded="true" aria-controls="faqs-2-content">
Proin placerat sem non pellentesque varius?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-2-content" class="collapse" aria-labelledby="faqs-2-title" data-parent="#accordion">
<div class="card-body">
<p>Quisque ligula sapien, luctus suscipit hendrerit id, suscipit vel leo. In hac habitasse platea dictumst. Donec rhoncus, erat vel ullamcorper suscipit, nisi lectus facilisis felis, vel pharetra augue purus vitae velit. Mauris non aliquet magna. Aenean tempus iaculis odio vitae sagittis fusce ultricies non dolor id honcus.</p>
<p>Phasellus in arcu vitae nulla aliquam dictum sed quis metus. Cras iaculis turpis nibh. Sed euismod mauris delous dictum multricies suspendisse facilisis risus eget sapien luctus.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-3-title">
<button class="title" data-toggle="collapse" data-target="#faqs-3-content" aria-expanded="true" aria-controls="faqs-3-content">
Pellentesque vitae neque mollis urna mattis laoreeto?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-3-content" class="collapse" aria-labelledby="faqs-3-title" data-parent="#accordion">
<div class="card-body">
<p>Phasellus in arcu vitae nulla aliquam dictum sed quis metus. Cras iaculis turpis nibh. Sed euismod mauris delous dictum multricies suspendisse facilisis risus eget sapien luctus.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-4-title">
<button class="title" data-toggle="collapse" data-target="#faqs-4-content" aria-expanded="true" aria-controls="faqs-4-content">
Loremous tempor dullamcorper miaculis?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-4-content" class="collapse" aria-labelledby="faqs-4-title" data-parent="#accordion">
<div class="card-body">
<p>Quisque ligula sapien, luctus suscipit hendrerit id, suscipit vel leo. In hac habitasse platea dictumst. Donec rhoncus, erat vel ullamcorper suscipit, nisi lectus facilisis felis, vel pharetra augue purus vitae velit. Mauris non aliquet magna. Aenean tempus iaculis odio vitae sagittis fusce ultricies non dolor id honcus.</p>
<p>Phasellus in arcu vitae nulla aliquam dictum sed quis metus. Cras iaculis turpis nibh. Sed euismod mauris delous dictum multricies suspendisse facilisis risus eget sapien luctus.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-5-title">
<button class="title" data-toggle="collapse" data-target="#faqs-5-content" aria-expanded="true" aria-controls="faqs-5-content">
Pellentesque vitae neque mollis urna mattis laoreeto?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-5-content" class="collapse" aria-labelledby="faqs-5-title" data-parent="#accordion">
<div class="card-body">
<p>Quisque ligula sapien, luctus suscipit hendrerit id, suscipit vel leo. In hac habitasse platea dictumst. Donec rhoncus, erat vel ullamcorper suscipit, nisi lectus facilisis felis, vel pharetra augue purus vitae velit. Mauris non aliquet magna. Aenean tempus iaculis odio vitae sagittis fusce ultricies non dolor id honcus.</p>
</div>
</div>
</div>
</div>
<div class="faqs-paragraph-footer">
<a href="#" class="link"><span>View all topics</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Customer Reviews
To show Customer Reviews on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_parralax_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners-4 padding-top-0 padding-bottom-0">
<div class="container">
<div class="halo-banner-parallax2">
<div class="image-wrapper" data-image="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-parallax-banner.jpg">
</div>
<div class="content-wrapper">
<div class="halo-row">
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="customer-reviews">
<div class="customer-reviews-content">
<h3 class="title">Customer Reviews</h3>
<div class="avatar">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/avatar-customers.png" alt="Jessica D." title="Jessica D.">
</div>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum an lobortis at, mollis duto an risus. Sedcuman des faucibus sullamcorper mattis fusce de molestie elit a lorem tempus delo scelerisque blandit est cursus nam mattis et lectus blandit pharetra.</span>
<h4 class="name">
<span>Jessica D.</span>
</h4>
<span class="company">Alita Wedding + Events Co.</span>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="customer-reviews">
<div class="customer-reviews-content">
<h3 class="title">Customer Reviews</h3>
<div class="avatar">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/avatar-customers.png" alt="Jessica D." title="Jessica D.">
</div>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum an lobortis at, mollis duto an risus. Sedcuman des faucibus sullamcorper mattis fusce de molestie elit a lorem tempus delo scelerisque blandit est cursus nam mattis et lectus blandit pharetra.</span>
<h4 class="name">
<span>Jessica D.</span>
</h4>
<span class="company">Alita Wedding + Events Co.</span>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="customer-reviews">
<div class="customer-reviews-content">
<h3 class="title">Customer Reviews</h3>
<div class="avatar">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/avatar-customers.png" alt="Jessica D." title="Jessica D.">
</div>
<span class="desc">Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam elementum an lobortis at, mollis duto an risus. Sedcuman des faucibus sullamcorper mattis fusce de molestie elit a lorem tempus delo scelerisque blandit est cursus nam mattis et lectus blandit pharetra.</span>
<h4 class="name">
<span>Jessica D.</span>
</h4>
<span class="company">Alita Wedding + Events Co.</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Parralax Banner
To show Parralax Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_middle_parralax_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners-3 padding-top-0 padding-bottom-0">
<div class="container">
<div class="halo-banner-parallax">
<div class="image-wrapper">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-parallax.jpg" alt="Our Services" title="Our Services">
<img class="image-mobile lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-middle-banner-mobile.jpg" alt="Our Services" title="Our Services">
<div class="white-banner" data-parallax="{"x": -150 , "smoothness": 50}"> </div>
</div>
<div class="content-wrapper">
<span class="subtitle">Our Services</span>
<h2 class="title heading-with-line"><span>Excellent services<br/> for all customers.</span></h2>
<div class="desc">Nullam aliquet vestibulum augue non varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam praesento. Phasellus fringilla malesuada ligula pulvinar commodo maecenas suscipit auctor sodales an comodous. Divamus anos consectetur nisl vel ante consectetur sodales. Class aptent tacitis litora torquent lorem an conubia.</div>
<a class="button" href="#">
<span>Learn how</span>
</a>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Home Recent Blog
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Home Page / Home Recent Blog
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Instagram block has 3 options:
01: Use from Snappt App
You can connect your Instagram account to Snappt App to show Instagram Image on your website.
How to get the Instagram App Code?
1. Please go to this link: https://snapppt.com/users/sign_in -> click the Sign up link to create an account on https://snapppt.com
2. Fill out all fields and click the Sign Up button
3. Click the Connect Instagram button
4. Login with your Instagram account
5. Click the Authorize button
6. After you connected to instagram successfully, you will see this layout:
7. On the top right of the screen, hover on the SHOP THE FEED link -> choose SHOPPABLE GALLERIES. You can setting for Instagram gallery at the Shoppable galleries section. Then copy the code at the Gallery embed code section.
To show Instagram with Snapppt App on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_instagram" class="halo-marketing-banners">
<div class="halo-block halo-banners halo-banners2 padding-top-30 padding-bottom-30">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Image Gallery</h3>
<span class="desc">This is an image gallery block but you can use this block as an <strong>Instagram Feed</strong> by installing an <strong>Instagram App</strong></span>
</div>
<div id="instafeed">
<script type="text/javascript" src="https://snapppt.com/widgets/widget_loader/b172e0d5-5822-42ef-a544-89fd615b40cb/masonry.js" defer="defer"></script>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
02: Image Gallery
Recommended banner Size: 500x500px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Image Gallery on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_instagram" class="halo-marketing-banners">
<div class="halo-block halo-banners halo-banners2 padding-top-30 padding-bottom-30">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Image Gallery</h3>
</div>
<div class="halo-image-collection2 halo-image-instagram">
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-1.jpg" alt="Image Instagram 1" title="Image Instagram 1">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-2.jpg" alt="Image Instagram 2" title="Image Instagram 2">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-3.jpg" alt="Image Instagram 3" title="Image Instagram 3">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-4.jpg" alt="Image Instagram 4" title="Image Instagram 4">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-5.jpg" alt="Image Instagram 5" title="Image Instagram 5">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-6.jpg" alt="Image Instagram 6" title="Image Instagram 6">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-7.jpg" alt="Image Instagram 7" title="Image Instagram 7">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-8.jpg" alt="Image Instagram 8" title="Image Instagram 8">
</a>
</div>
</div>
</div>
<div class="halo-block-footer">
<a href="#" class="button button--primary">View Gallery</a>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
03: Image Gallery With Popup
Recommended banner Size: 500x500px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Image Gallery on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_instagram" class="halo-marketing-banners">
<div class="halo-block halo-banners halo-banners2 padding-top-30 padding-bottom-30">
<div class="container">
<div class="halo-block-header">
<h3 class="title">Image Gallery</h3>
</div>
<div class="halo-image-collection2 halo-image-instagram">
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-1.jpg" aria-label="Open Instagram Image 1 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-1.jpg" alt="Instagram Image 1" title="Instagram Image 1">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-2.jpg" aria-label="Open Instagram Image 2 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-2.jpg" alt="Instagram Image 2" title="Instagram Image 2">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-3.jpg" aria-label="Open Instagram Image 3 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-3.jpg" alt="Instagram Image 3" title="Instagram Image 3">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-4.jpg" aria-label="Open Instagram Image 4 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-4.jpg" alt="Instagram Image 4" title="Instagram Image 4">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-5.jpg" aria-label="Open Instagram Image 5 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-5.jpg" alt="Instagram Image 5" title="Instagram Image 5">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-6.jpg" aria-label="Open Instagram Image 6 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-6.jpg" alt="Instagram Image 6" title="Instagram Image 6">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-7.jpg" aria-label="Open Instagram Image 7 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-7.jpg" alt="Instagram Image 7" title="Instagram Image 7">
</a>
</div>
</div>
<div class="item">
<div class="image-collection2">
<a class="image-wrapper image-with-overlay" data-fancybox="images" href="javascript:void(0);" data-href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-8.jpg" aria-label="Open Instagram Image 8 in a popup">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/instagram-8.jpg" alt="Instagram Image 8" title="Instagram Image 8">
</a>
</div>
</div>
</div>
<div class="halo-block-footer">
<a href="#" class="button button--primary">View Gallery</a>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Five Images
Recommended banner Size: 570x510px and 470x240px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Five Images on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_top2_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners padding-top-30 padding-bottom-0">
<div class="container">
<div class="halo-image-collection">
<div class="item">
<div class="image-collection"><a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Smartphones" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Smartphones" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home2-top-banner-1.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Smartphones</h2>
<span class="subtitle">Starting at $899*</span>
<a class="button button--secondary" href="#">Shop Now</a></div>
</div>
</div>
<div class="item">
<div class="item-child two-item-child">
<div class="image-collection half-height"><a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Tablets" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Tablets" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home2-top-banner-2.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Tablets</h2>
<span class="subtitle">Starting at $499*</span>
<a class="button button--secondary" href="#">Shop Now</a></div>
</div>
<div class="image-collection half-height"><a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Laptops" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Laptops" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home2-top-banner-3.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Laptops</h2>
<span class="subtitle">Starting at $1,499*</span>
<a class="button button--secondary" href="#">Shop Now</a></div>
</div>
</div>
<div class="item-child two-item-child">
<div class="image-collection half-height"><a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Headphones" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Headphones" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home2-top-banner-4.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Headphones</h2>
<span class="subtitle">Starting at $399*</span>
<a class="button button--secondary" href="#">Shop Now</a></div>
</div>
<div class="image-collection half-height"><a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Smart TV" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Smart TV" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home2-top-banner-5.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Smart TV</h2>
<span class="subtitle">Starting at $799*</span>
<a class="button button--secondary" href="#">Shop Now</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Three Images
Recommended banner Size: 500x470px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Three Images on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="home2_bottom_banners" class="halo-marketing-banners">
<div class="halo-block halo-banners padding-top-30 padding-bottom-0">
<div class="container">
<div class="halo-image-collection">
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Games & Video Games" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Games & Video Games" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home-bottom-banner-1.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Games & Video Games</h2>
<span class="subtitle">Starting at $699*</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Home Decor & Furnitures" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Home Decor & Furnitures" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home-bottom-banner-2.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Home Decor & Furnitures</h2>
<span class="subtitle">Starting at $899</span>
<a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
<div class="item">
<div class="image-collection">
<a class="image-wrapper image-with-overlay" href="#"> <img class="lazyload" title="Beauty & Health" src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/content/loading.svg" alt="Beauty & Health" data-src="https://cdn11.bigcommerce.com/s-kiu7mh8g87/product_images/uploaded_images/home-bottom-banner-3.jpg" /> </a>
<div class="content-wrapper">
<h2 class="title">Beauty & Health</h2>
<span class="subtitle">Starting at $39</span> <a class="button button--primary" href="#">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is Home Page.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
Block: Featured Collection
Recommended banner Size: 641x804px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Featured Collection on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="featured_collections" class="featured-collections halo-marketing-banners">
<div class="featured-collections__wrapper">
<div class="featured-collections__item">
<div class="featured-collections__img">
<a href="/" title="Feat Collections 1">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-featured-collection-1.jpg" alt="Featured Collections 1">
</a>
</div>
<div class="featured-collections__content">
<h2>Audio</h2>
<ul class="featured-collections__list">
<li><a href="#" title="Filming">Filming</a></li>
<li><a href="#" title="Recording">Recording</a></li>
<li><a href="#" title="Cable">Cable</a></li>
<li><a href="#" title="Screen">Screen</a></li>
</ul>
</div>
</div>
<div class="featured-collections__item">
<div class="featured-collections__img">
<a href="/" title="Feat Collections 2">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-featured-collection-2.jpg" alt="Featured Collections 2">
</a>
</div>
<div class="featured-collections__content">
<h2>Watch</h2>
<ul class="featured-collections__list">
<li><a href="#" title="Filming">Filming</a></li>
<li><a href="#" title="Recording">Recording</a></li>
<li><a href="#" title="Cable">Cable</a></li>
<li><a href="#" title="Screen">Screen</a></li>
</ul>
</div>
</div>
<div class="featured-collections__item">
<div class="featured-collections__img">
<a href="/" title="Feat Collections 3">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-featured-collection-3.jpg" alt="Featured Collections 3">
</a>
</div>
<div class="featured-collections__content">
<h2>New Equipments</h2>
<ul class="featured-collections__list">
<li><a href="#" title="Filming">Filming</a></li>
<li><a href="#" title="Recording">Recording</a></li>
<li><a href="#" title="Cable">Cable</a></li>
<li><a href="#" title="Screen">Screen</a></li>
</ul>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Marquee
To show Marquee on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="marquee" class="marquee halo-marketing-banners">
<div class="marquee__wrapper">
<ul class="marquee__list">
<li><a href="#" aria-label="Attention">Intention</a></li>
<li><a href="#" aria-label="Gadget">Gadget</a></li>
<li><a href="#" aria-label="Micromachining">Micromachining</a></li>
<li><a href="#" aria-label="Automation">Automation</a></li>
<li><a href="#" aria-label="Biobased Materials">Biobased Materials</a></li>
<li><a href="#" aria-label="Interoperability">Interoperability</a></li>
<li><a href="#" aria-label="Audiovisual">Audiovisual</a></li>
</ul>
<ul class="marquee__list">
<li><a href="#" aria-label="Attention">Intention</a></li>
<li><a href="#" aria-label="Gadget">Gadget</a></li>
<li><a href="#" aria-label="Micromachining">Micromachining</a></li>
<li><a href="#" aria-label="Automation">Automation</a></li>
<li><a href="#" aria-label="Biobased Materials">Biobased Materials</a></li>
<li><a href="#" aria-label="Interoperability">Interoperability</a></li>
<li><a href="#" aria-label="Audiovisual">Audiovisual</a></li>
</ul>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Collection List
Recommended banner Size: 375x350px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Collection List on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="collections_list" class="collections-list halo-marketing-banners">
<div class="container container-1600">
<div class="collections-list__wapper">
<div class="collections-list__carousel">
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-1.jpg" alt="Keybroad"/>
</div>
<h3>Keybroad</h3>
<a href="#" title="Keybroad"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-2.jpg" alt="Headphones"/>
</div>
<h3>Headphones</h3>
<a href="#" title="Headphones"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-3.jpg" alt="Earphones"/>
</div>
<h3>Earphones</h3>
<a href="#" title="Earphones"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-4.jpg" alt="Camera"/>
</div>
<h3>Camera</h3>
<a href="#" title="Camera"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-1.jpg" alt="Keybroad"/>
</div>
<h3>Keybroad</h3>
<a href="#" title="Keybroad"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-2.jpg" alt="Headphones"/>
</div>
<h3>Headphones</h3>
<a href="#" title="Headphones"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-3.jpg" alt="Earphones"/>
</div>
<h3>Earphones</h3>
<a href="#" title="Earphones"></a>
</div>
</div>
<div class="collections-list__item">
<div class="collections-list__content">
<div class="collections-list__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-collection-list-4.jpg" alt="Camera"/>
</div>
<h3>Camera</h3>
<a href="#" title="Camera"></a>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Special Banner
Recommended banner Size: 785x410px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Special Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="special" class="special halo-marketing-banners">
<div class="container container-1600">
<h3 class="title">Special Event</h3>
<div class="special__wrapper">
<div class="special__item">
<div class="special__image">
<img class="lazyload" src=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-image-banner-1.jpg" alt="4.7 MEGA SALE with up to 60% OFF"/>
</div>
<div class="special__content">
<h4>4.7 MEGA SALE with up to 60% OFF</h4>
<p>Celebrating America's independence Day, we sale off all categories</p>
<a href="#" class="button" title="4.7 MEGA SALE with up to 60% OFF">Learn more</a>
</div>
</div>
<div class="special__item">
<div class="special__image">
<img class="lazyload" src=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-image-banner-2.jpg" alt="Anniversary Years Sale Event"/>
</div>
<div class="special__content">
<h4>Anniversary Years Sale Event</h4>
<p>Every year, the store celebrates founding day and sale off during a week up to 45%</p>
<a href="#" class="button" title="Anniversary Years Sale Event">Take partin</a>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Image Comparison
Recommended banner Size: 1328x550px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Image Comparison on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="image_comparison" class="image-comparison halo-marketing-banners" data-image-comparision>
<div class="container container-1600">
<div class="image-comparison__header">
<h3>PROJECTS</h3>
<p>The "Before and After" block on a website is a powerful tool that showcases the transformation or improvement achieved through a product, service, or process. It consists of a visual representation of the "before" state juxtaposed with the corresponding "after" state, highlighting the positive changes that can be achieved.</p>
</div>
<div class="image-comparison__wrapper" data-images-container style="--left-pos: 100%">
<div class="image-comparison__image image-comparison__image--first">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-before-after-1.jpg" alt="Anniversary Years Sale Event"/>
</div>
<div class="image-comparison__slider" data-image-slider>
<span class="slider-divider"></span>
<div class="slider-thumb">
<div class="slider-thumb-arrows">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret">
<path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" role="presentation" class="icon icon-caret">
<path d="M 7.75 1.34375 L 6.25 2.65625 L 14.65625 12 L 6.25 21.34375 L 7.75 22.65625 L 16.75 12.65625 L 17.34375 12 L 16.75 11.34375 Z"></path>
</svg>
</div>
</div>
</div>
<div class="image-comparison__image image-comparison__image--second">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-before-after-2.jpg" alt="Anniversary Years Sale Event"/>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Video Banner
Recommended banner Size: 1920x700px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Video Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_video_banner" class="halo-marketing-banners">
<div class="halo-block">
<div class="container-fluid">
<div class="halo-fullwidth-banner">
<a class="video-block-image" href="https://youtu.be/O98_vEL70tI" data-fancybox="videos">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-image-banner-3.jpg" alt="Video"/>
</a>
<div class="block-content-video">
<a class="button-popup-video" href="https://youtu.be/O98_vEL70tI" data-fancybox="videos2">
<img src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/home-banner-video-icon.png" alt="Video">
</a>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Brand List
Recommended banner Size: 310x100px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Brand List on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_brands_full" class="halo-marketing-banners">
<div class="halo-block halo-top-brands">
<div class="halo-row">
<div class="halo-row-slider">
<div class="halo-row-item">
<a class="image-with-border" href="#">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-brand-1.jpg" alt="Brand 1"/>
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a class="image-with-border" href="#">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-brand-2.jpg" alt="Brand 2"/>
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a class="image-with-border" href="#">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-brand-3.jpg" alt="Brand 3"/>
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a class="image-with-border" href="#">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-brand-4.jpg" alt="Brand 4"/>
</a>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<a class="image-with-border" href="#">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-brand-5.jpg" alt="Brand 5"/>
</a>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: CountDown Banner
Recommended banner Size: 1600x610px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show CountDown Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="countdown_banner" class="countdown-banner halo-marketing-banners">
<div class="container container-1600">
<div class="countdown-banner__wrapper">
<div class="countdown-banner__img" style="background-image: url(https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-image-banner-4.jpg)"></div>
<div class="countdown-banner__content">
<h3>Special Offer Limited</h3>
<p>Finish your order with coupon to save Extra 15% off. Hurry up, clock is counting!</p>
<div class="countdown-banner__countdown" data-count-down="Dec 31, 2023 18:00:00"></div>
<button type="button" class="button" aria-label="Grab Deals Now">Grab Deals Now</button>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Top Reviews
To show Top Reviews on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_top_reviews" class="halo-marketing-banners">
<div class="halo-block halo-banners-4">
<div class="halo-banner-parallax2">
<h3 class="title">Top Reviews</h3>
<div class="halo-row">
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="customer-reviews">
<div class="customer-reviews-content">
<span class="halo_top_reviews__rating">
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
</span>
<span class="desc">I recently purchased the latest laptop model and I am extremely impressed with its performance. The speed and efficiency are unmatched, allowing me to multitask seamlessly. The vibrant display and crisp resolution make my work and entertainment experiences more enjoyable. This device has definitely exceeded my expectations!</span>
<h4 class="name"><span>Miran Hasune Kimonkai</span></h4>
<span class="company">Marketer</span>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="customer-reviews">
<div class="customer-reviews-content">
<span class="halo_top_reviews__rating">
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
</span>
<span class="desc">I have been using the smartphone for a few weeks now. The camera quality is exceptional, capturing stunning photos with incredible detail. The battery life is impressive, lasting me through a full day of heavy usage. The sleek design and intuitive interface make it a pleasure to use. I highly recommend this smartphone to anyone looking for a top-notch device</span>
<h4 class="name"><span>Milan Don</span></h4>
<span class="company">Officer</span>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="customer-reviews">
<div class="customer-reviews-content">
<span class="halo_top_reviews__rating">
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
<svg aria-hidden="true"><use xlink:href="#icon-star"></use></svg>
</span>
<span class="desc">The smart TV has revolutionized my home entertainment experience. The picture quality is breathtaking, with vibrant colors and sharp clarity. The built-in streaming capabilities provide access to a wide range of content, making it a one-stop entertainment hub. The user-friendly interface and voice control feature make navigating through channels and apps a breeze</span>
<h4 class="name"><span>Tim</span></h4>
<span class="company">IT Developer</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Popular Collection
Recommended background Size: 1920x190px and banner Size: 385x600px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Popular Collection on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="popular_collection" class="popular-collection halo-marketing-banners">
<div class="container container-1600">
<div class="popular-collection__header">
<div class="popular-collection__header-left">
<h3>Popular Collection</h3>
<p>Discover our popular collection of cutting-edge electronics products that are taking the market by storm. Experience the power, speed, and innovation!</p>
</div>
<div class="popular-collection__header-right">
<button type="button" class="btn-gt-newsletter" aria-label="Go to newsletter">Sign up for new discount and premium voucher FREE, straight to your inbox.</button>
</div>
</div>
</div>
<div class="popular-collection__background">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-image-banner-6.png" alt="Popular Collection"/>
</div>
<div class="popular-collection__content">
<div class="popular-collection__wrapper">
<div class="popular-collection__carousel">
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-1.jpg" alt="Popular Collection 1"/>
<a href="#" title="Popular Collection 1"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-2.jpg" alt="Popular Collection 2"/>
<a href="#" title="Popular Collection 2"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-3.jpg" alt="Popular Collection 3"/>
<a href="#" title="Popular Collection 3"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-4.jpg" alt="Popular Collection 4"/>
<a href="#" title="Popular Collection 4"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-5.jpg" alt="Popular Collection 5"/>
<a href="#" title="Popular Collection 5"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-1.jpg" alt="Popular Collection 6"/>
<a href="#" title="Popular Collection 6"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-2.jpg" alt="Popular Collection 7"/>
<a href="#" title="Popular Collection 7"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-3.jpg" alt="Popular Collection 8"/>
<a href="#" title="Popular Collection 8"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-4.jpg" alt="Popular Collection 9"/>
<a href="#" title="Popular Collection 9"></a>
</div>
</div>
<div class="popular-collection__item">
<div class="popular-collection__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-popular-collection-5.jpg" alt="Popular Collection 10"/>
<a href="#" title="Popular Collection 10"></a>
</div>
</div>
</div>
<div class="popular-collection__progress">
<span class="progress"></span>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Policy
To show Policy on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_policy" class="halo-block halo-block-icon-text">
<div class="container container-1430">
<div class="halo-row">
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="icon-with-text">
<div class="icon">
<svg aria-hidden="true"><use xlink:href="#icon-shield"></use></svg>
</div>
<div class="content">
<h3 class="title">Preferential policy for customers</h3>
<a href="#" title="Free Ground Shipping"></a>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="icon-with-text">
<div class="icon">
<svg aria-hidden="true"><use xlink:href="#icon-headphone"></use></svg>
</div>
<div class="content">
<h3 class="title">Profesional Customer Service</h3>
<a href="#" title="Profesional Customer Service"></a>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="icon-with-text">
<div class="icon">
<svg aria-hidden="true"><use xlink:href="#icon-return"></use></svg>
</div>
<div class="content">
<h3 class="title">Preferential policy for customers</h3>
<a href="#" title="Preferential policy for customers"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: FAQs
To show FAQs on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_faqs" class="halo-marketing-banners">
<div class="halo-block halo-faqs-block">
<div class="container container-1430">
<div class="halo-short-faqs">
<div class="short-faqs-right">
<div class="faqs-paragraph">
<div id="accordion">
<div class="card">
<div id="faqs-1-title" class="card-header"><button class="title" data-toggle="collapse" data-target="#faqs-1-content"> Do you ship overseas? </button> <span class="icon-plus"> </span></div>
<div id="faqs-1-content" class="collapse" data-parent="#accordion" style="display: none;">
<div class="card-body">
<p>Yes, we ship all over the world. Shipping costs will apply, and will be added at checkout. We run discounts and promotions all year, so stay tuned for exclusive deals.</p>
</div>
</div>
</div>
<div class="card">
<div id="faqs-2-title" class="card-header"><button class="title" data-toggle="collapse" data-target="#faqs-2-content"> Do I need to setup an account to place an order? </button> <span class="icon-plus"> </span></div>
<div id="faqs-2-content" class="collapse" data-parent="#accordion" style="display: none;">
<div class="card-body">
<p>You do not need to set up an account to place an order. However creating an account allows you to store your shipping information, see order history, and view your product’s warranty information. Additional features will be added to the account page in the near future.</p>
</div>
</div>
</div>
<div class="card">
<div id="faqs-3-title" class="card-header"><button class="title" data-toggle="collapse" data-target="#faqs-3-content"> How long will it take to get my orders? </button> <span class="icon-plus"> </span></div>
<div id="faqs-3-content" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>It depends on where you are. Orders processed here will take 5-7 business days to arrive. Overseas deliveries can take anywhere from 7-16 days. Delivery details will be provided in your confirmation email.</p>
</div>
</div>
</div>
<div class="card">
<div id="faqs-4-title" class="card-header"><button class="title" data-toggle="collapse" data-target="#faqs-4-content"> Do you offer gift wrapping </button> <span class="icon-plus"> </span></div>
<div id="faqs-4-content" class="collapse" data-parent="#accordion">
<div class="card-body">
<p>Yes, we can wrap your item in our signature box with tissue paper, and include a card with your personal message. The option is available during checkout for an additional $5. Please note this service is not available for wireless speaker purchases.</p>
</div>
</div>
</div>
</div>
<div class="faqs-paragraph-footer"><a class="link" href="https://annies-garden-light-demo.mybigcommerce.com/faqs"><span>View all topics</span></a></div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Block: Image Banner
Recommended banner Size: 1600x710px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
To show Image Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div id="halo_banner" class="halo_banner halo-marketing-banners">
<div class="container container-1600">
<div class="halo_banner__wrapper">
<div class="halo_banner__img">
<img class="lazyload" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBzdHlsZT0ibWFyZ2luOiBhdXRvOyBiYWNrZ3JvdW5kOiBub25lOyBkaXNwbGF5OiBibG9jazsgc2hhcGUtcmVuZGVyaW5nOiBhdXRvOyIgd2lkdGg9IjEwMHB4IiBoZWlnaHQ9IjEwMHB4IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPgo8ZyB0cmFuc2Zvcm09InJvdGF0ZSgwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CjwvZz48ZyB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICA8cmVjdCB4PSI0NyIgeT0iMzQuNSIgcng9IjAiIHJ5PSIwIiB3aWR0aD0iNSIgaGVpZ2h0PSIxIiBmaWxsPSIjYmJiYmJiIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPjxnIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogIDxyZWN0IHg9IjQ3IiB5PSIzNC41IiByeD0iMCIgcnk9IjAiIHdpZHRoPSI1IiBoZWlnaHQ9IjEiIGZpbGw9IiNiYmJiYmIiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0Pgo8L2c+PGcgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgPHJlY3QgeD0iNDciIHk9IjM0LjUiIHJ4PSIwIiByeT0iMCIgd2lkdGg9IjUiIGhlaWdodD0iMSIgZmlsbD0iI2JiYmJiYiI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9nPgo8L3N2Zz4=" data-src="https://cdn11.bigcommerce.com/s-vrfmhd0sj1/images/stencil/original/image-manager/ag-tec-image-banner-5.jpg" alt="New technology every day"/>
</div>
<div class="halo_banner__content">
<h3>New technology every day</h3>
<p>Get your hands on the hottest electronic and computer products from our popular collection. Whether you're a tech enthusiast, a professional in need of reliable devices, or simply looking to upgrade your gadgets, our collection has you covered. Explore a range of top-rated smartphones, versatile tablets, powerful desktops, and accessories that enhance your digital lifestyle.</p>
<ul>
<li><a href="#"><span>Smart Watch</span><svg class="icon"><use xlink:href="#arrow-top-right"></use></svg></a></li>
<li><a href="#"><span>Keyboard</span><svg class="icon"><use xlink:href="#arrow-top-right"></use></svg></a></li>
<li><a href="#"><span>Headphone</span><svg class="icon"><use xlink:href="#arrow-top-right"></use></svg></a></li>
<li><a href="#"><span>Bluetooth Speaker</span><svg class="icon"><use xlink:href="#arrow-top-right"></use></svg></a></li>
</ul>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Setting Up Product Listing Pages
What We'll Cover
Top Banner
Recommended banner Size: 1920x250px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
If you want it to show on all Category Page:
To show Categories Top Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
If you want it to display on each Category Page::
To show Categories Top Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div class="category-header-image">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/category-banner.jpg" alt="Cosmo de Milance" title="Cosmo de Milance">
</div>
<div class="category-header-content">
<div class="container">
<h2 class="title">Cosmo de Milance</h2>
<p class="desc">Destibulum laoreet an risus porta quisque hasellus blandit lacinia neque multrices de loremous...</p>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is For a Specific Category.
Choose Location is Top of Page.
When you are happy with your changes, don't forget click Save.
This way also can apply to Brand Page and Search Results Page.
Common Settings
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Listing Page
When you are happy with your changes, don't forget click Save.
Bottom Banner
Recommended banner Size: 960x720px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
If you want it to show on all Category Page:
To show Categories Bottom Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
If you want it to display on each Category Page::
To show Categories Bottom Banner on Home page, In the Page Builder -> Go to Widgets -> drag and drop HTML block into specified sections.
In field HTML block:
After that, input sample content below:
<div class="category-footer-content">
<div class="container-fluid">
<div class="halo-fullwidth-banner">
<div class="video-block-left">
<a class="video-block-image" href="https://www.youtube.com/embed/O98_vEL70tI" data-fancybox="videos">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/category-footer-banner.jpg" alt="Custom CMS Block" title="Custom CMS Block">
</a>
<div class="block-content-video">
<a href="https://www.youtube.com/embed/O98_vEL70tI" class="button-popup-video" data-fancybox="videos2">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-banner-video-icon.png" alt="Custom CMS Block" title="Custom CMS Block">
<span>Watch now</span>
</a>
</div>
</div>
<div class="video-block-right">
<div class="video-block-content">
<span class="subtitle">Sample heading title</span>
<h2 class="title">
<span>Custom CMS Block</span>
</h2>
<span class="desc">Pellentesque diam dolor, elementum et lobortis at, mollis ut risus. Sedcuman des faucibus sullamcorper mattis fusce molestie elit a lorem tempus delos scelerisque blandito. Nullam aliquet vestibulum augue non varius. Cras cosmo congue an melitos.</span>
<a href="#" class="button button--primary">Discover Now</a>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own banners. Please click the Copy code on the popup after you changed all the blocks.
Then click Update button to go back previous screen.
Choose Show on Page is For a Specific Category.
Choose Location is Bottom of Page.
When you are happy with your changes, don't forget click Save.
This way also can apply to Brand page and Search Results page.
Setting Up Product Card
What We'll Cover
Common Settings
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Card
When you are happy with your changes, don't forget click Save.
Product Badges
1. New badges
Maximum New Products is 25 products per page.
2. Sale Badges
When a product has Sale Price, it'll show the Sale Badge.
3. Sold Out Badges
When a product is out of stock (on the product level or on the variant level), it'll show the Sold Out badge.
4. Custom Badges
In the Admin panel -> go to Products -> View. Then, click a product you want.
In the Product Details, please find tab: Custom Fields.
Custom Field #(number) Name must be: __customlabel.
Custom Field #(number) Value please enter text that you want show for the Custom badges.
5.Setting Product Badges:
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Card / Style
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Setting Up Product Detail Page
What We'll Cover
- Frequently Bought Together Add On (Bundle Products)
- CountDown
- Sold In Last Function
- Size Chart Function
- Customers View Products Function
- Previous / Next Products Function
- Hot Stock Function
- Buy It Now Function
- Secure Images
- Compare Color Function
- Sticky Add To Cart Add On
- Notify Me: Out Of Stock Function
- Product Lookbook
- Product Tabs: Description Tab, Warranty Information Tab & Custom Tab
- Product Tabs: Shipping Tab & Returns Policy Tab
- Product Custom Block
- Products Carousel
Frequently Bought Together Add On
There are 2 options for you to choose which products are used in the Frequently Bought Together:
- Using Related Product.
- Using Product ID.
1. Using Related Product.
Please go to any Product then open the “Custom Fields” tab:
Products → View → 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
*** 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.
2. 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
How do I get Product ID of a product?
- Please follow this instruction image:
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Countdown
There are 2 options for you to setup:
- Using different products for each product.
- Using same for all products.
1. Using different products for each product.
In the Admin panel -> go to Products -> View. Then, click a product you want
In the Product Details, please find tab: Custom Fields.
Custom Field #(number) Name must be: __countdown.
Custom Field #(number) Value please enter Time (ex: Oct 11, 2020 18:04:00)
When you are happy with your changes, don't forget click Save.
*** Notes:
- Input in Theme Editor limit 64 characters.
2. Using same for all products.
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / CountDown
When you are happy with your changes, don't forget click Save.
Please use the same this below structure/rule to insert countdown for your product.
Example: Oct 11, 2020 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
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Sold In Last Function
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Size Chart Function
To show size chart image, please prepare your own size chart image and then upload this image into Image Manager first (note: name image is: size-chart-img.jpg)
In the Admin panel -> go to Products -> View. Then, click a product you want
In the Product Details, please find tab: Custom Fields.
Custom Field #(number) Name must be: __sizechart.
Custom Field #(number) Value please enter size chart image
When you are happy with your changes, don't forget click Save.
Images must be successfully upload to the Image Manager.
Customers View Products Function
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Viewing Function
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Previous / Next Products Function
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Enable Previous / Next Products
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Hot Stock Function
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Hot Stock Function
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Buy It Now Function
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Enable Buy It Now
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Secure Images
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Secure Images
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Compare Colors Function
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Enable Compare Colors
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Sticky Add To Cart Add On
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Enable Sticky Add To Cart
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Notify Me: Out Of Stock Function
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Choose Notify Me: Out Of Stock
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Product Lookbook
In the Admin panel -> go to Products -> View. Then, click a product you want
In the Product Details, please find tab: Custom Fields.
Custom Field #(number) Name must be: __lookbookimage1 , __lookbookimage2, __lookbookimage3.
Custom Field #(number) Value please enter Image Url
Custom Field #(number) Name must be: __lookbookid1 , __lookbookid2, __lookbookid1.
Custom Field #(number) Value please enter Product ID
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Product With Lookbook
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
We limit image of this block to 3 images and a Product ID per image.
Images must be successfully upload to the Image Manager.
Product Tabs: Description Tab, Warranty Information Tab & Custom Tab
1. Description Tab
In the Admin panel -> go to Products -> View. Then, click a product you want
In the Product Details, please find tab: Description.
When you are happy with your changes, don't forget click Save.
2. Custom Tab
In the Admin panel -> go to Products -> View. Then, click a product you want
In the Product Details, please find tab: Description.
After that, input sample content below:
<div class="halo-custom-tab" data-custom-tab="">
<p>Damus de ullamcorper neque. Sed vitae mi a mi pretium aliquet an sed helito. Pellentesque nulla eros accumsan quis justo at tincidunto, de drostique des commodo pharetras retium.</p>
<div class="scrollable-wrapper">
<table>
<tbody>
<tr>
<td class="tb-title">Comodous</td>
<td>Comodous in tempor ullamcorper miaculis</td>
</tr>
<tr>
<td class="tb-title">Posuere</td>
<td>Nam tempus turpis at metus scelerisque placerat nulla deumantos solicitud felis</td>
</tr>
<tr>
<td class="tb-title">Divamus</td>
<td>Pellentesque vitae neque mollis durna mattis loreto</td>
</tr>
<tr>
<td class="tb-title">Molestie</td>
<td>Donec pretium egestas sapien et mollis</td>
</tr>
<tr>
<td class="tb-title">Milancelos</td>
<td>Proin molestie egestas morci de suscipit risus posuere lorem</td>
</tr>
<tr>
<td class="tb-title">Cosmopolis</td>
<td>Pellentesque diam dolor, elementum etos lobortis des mollis</td>
</tr>
</tbody>
</table>
</div>
</div>
When you are happy with your changes, don't forget click Save.
3. Warranty Information Tab
In the Admin panel -> go to Products -> View. Then, click a product you want
In the Product Details, please find tab: Storefront Details.
When you are happy with your changes, don't forget click Save.
Product Tabs: Shipping Tab & Returns Policy Tab
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Choose Tabs
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
To setup Shipping Tab, go to Storefront -> Web Pages -> Create a Web Page -> Enter name: Shipping or the name you want.
When you are happy with your changes, don't forget click Save.
To setup Returns Policy Tab, go to Storefront -> Web Pages -> Create a Web Page -> Enter name: Returns Policy or the name you want.
When you are happy with your changes, don't forget click Save.
Product Custom Block
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page / Choose Product Custom Block
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
To setup Product Custom Block content, go to Storefront -> Web Pages -> Create a Web Page -> Enter the name you want.
In field Page Content, click button HTML to open HTML Source Editor.
Then please input content below:
<div class="halo-about-us">
<div class="about-us-left">
<div class="content">
<h3 class="title">Why Annie's Garden?</h3>
<div class="content-top">
<p class="desc">Phasellus volutpat magna id mauris sodales et ornare urna molestie. Mauris non sem tincidunt, hendrerit nisi quis honcus felis. Suspendisse tempus mi durna in mattis nisl egestas quis. Proin nisi justo consectetur sed lacus ande bibendum commodo diam. Praesent vulputate arcu eros quis accumsan odio malesuada at. Nulla vel ante magna. Cras ultricies nulla porttitor metus cursus malesuada.</p>
<ul>
<li>
<span class="bold">Cosmopolis:</span> Comodous in tempor ullamcorper miaculis.
</li>
<li>
<span class="bold">Milancelos:</span> Pellentesque vitae neque mollis urna mattis laoreet. <a href="#" class="custom-link"><span>Sample custom link</span></a>
</li>
<li>
<span class="bold">Decortica:</span> Divamus sit amet purus justo. <a href="#" class="custom-link"><span>Sample custom link</span></a>
</li>
<li>
<span class="bold">Expertisan:</span> Proin molestie egestas orci ac suscipit risus posuere loremous.
</li>
<li>
<span class="bold">Customer Service:</span> Cras ultricies nulla porttitor metus. <a href="#" class="custom-link"><span>Phone or email</span></a>
</li>
</ul>
</div>
<div class="content-bottom">
<div class="image-wrapper">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/avatar-owner.png" alt="Annie Lee" title="Annie Lee">
</div>
<div class="content-wrapper">
<h4 class="name">Annie Lee</h4>
<span class="company">Store Owner at ANNIE'S GARDEN</span>
</div>
</div>
</div>
</div>
<div class="about-us-right">
<div class="content">
<h3 class="title">Featured on</h3>
<div class="items">
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-1.jpg" alt="Brand 1" title="Brand 1">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-2.jpg" alt="Brand 2" title="Brand 2">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-3.jpg" alt="Brand 3" title="Brand 3">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-4.jpg" alt="Brand 4" title="Brand 4">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-5.jpg" alt="Brand 5" title="Brand 5">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-6.jpg" alt="Brand 6" title="Brand 6">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-7.jpg" alt="Brand 7" title="Brand 7">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-8.jpg" alt="Brand 8" title="Brand 8">
</a>
</div>
<div class="item">
<a href="#" class="image-with-border">
<img class="lazyload" src="" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/top-brand-9.jpg" alt="Brand 9" title="Brand 9">
</a>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your Product Custom Block. Please click the Copy code on the popup after you changed image, text and link of all blocks.
Then click Update button to go back previous screen.
When you are happy with your changes, don't forget click Save.
Products Carousel
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Product Detail Page -> Products Block
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Setting Up Sidebar
What We'll Cover
Display & Content Settings
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Sidebar
Recommended Size for banner images: 270x390px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Setting Up Cart Page / Dropdown Cart
What We'll Cover
Cart Notification
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Pages / Cart Page
*** Notes:
- Input in Theme Editor limit 64 characters.
Cart Seal Logos
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Pages / Cart Page
When you are happy with your changes, don't forget click Save.
*** Notes:
- Input in Theme Editor limit 64 characters.
Calculate Free Shipping Message
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Calculate Free Shipping
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Go to Marketing -> Promotions -> click button New automatic promotion.
Fill in the content of Promotion Details such as this example below (you can change the price, countries,...)
Fill in the content of Promotion Options such as this example below
This is sample code:
<span class="congratulation">Congratulations Banner Message <span class="country">All</span></span>
This is sample code:
<span>Upsell Banner Message
<span class="condition_required">%%condition.required%%</span>
<span class="condition_matched">%%condition.matched%%</span>
<span class="condition_remaining">%%condition.remaining%%</span>
<span class="country">All</span>
</span>
Code explanation:
<span class="country">All</span>
Is the code of country you want to apply discount. Example:
<span class="country"> US,UK,CA </span> is for United State, United Kingdom and Canada
<span class="country"> VN </span> for Vietnam.
If you want to apply discount for all of countries, you can setup All <span class="country">All</span>
When you are happy with your changes, don't forget click Save.
Setting Up Other Pages
What We'll Cover
Brands Page
https://annies-garden-light-demo.mybigcommerce.com/brands
Layout Brands A to Z
Layout Brands Grid
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Brands Page
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Contact Us Page
https://annies-garden-light-demo.mybigcommerce.com/contact-us
Getting Google Map
- On your Web browser, browse to https://www.google.com/maps
- Search to your location -> click SHARE to show share dialog:
- click Embed map and copy iframe code
To setup Google Map, Go to Storefront -> My Themes -> Advanced -> Edit theme files.
In the Stencil File Editor -> go to templates/components/halothemes/halo-google-map.html file.
In the halo-google-map.html file, you can see a google map iframe enbed code.
You just need to replace the iframe embed code -> then change width and height attribute of iframe. Set width value 100% to display fullwidth
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
Setting Location Block
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Pages / Contact Us Page
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
FAQs Page
https://annies-garden-light-demo.mybigcommerce.com/faqs
1. How to Create FAQs Page?
Go to Storefront -> Web pages.
In the Create a Web Page -> Enter name: FAQs
In Advanced Options, choose Template Layout File is "faqs-layout".
When you are happy with your changes, don't forget click Save.
2. How to Change Content of FAQs Page?
Go to Storefront -> Web pages -> FAQs Page.
Open HTML Source Editor
After that, input content below:
<p class="faq-desc">Below FAQ are some common concerns of our clients before purchasing the theme, if you have other questions, please just send it to <a class="link" href="mailto:example@domain.com">example@domain.com</a></p>
<div class="faqs-paragraph">
<h3 class="faq-title">Pre-Sales Questions</h3>
<div id="accordion">
<div class="card">
<div class="card-header" id="faqs-1-title">
<button class="title" data-toggle="collapse" data-target="#faqs-1-content" aria-expanded="true" aria-controls="faqs-1-content">
Will your template be fully compatible with Bigcommerce?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-1-content" class="collapse" aria-labelledby="faqs-1-title" data-parent="#accordion">
<div class="card-body">
<p>Yes it is.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-2-title">
<button class="title" data-toggle="collapse" data-target="#faqs-2-content" aria-expanded="true" aria-controls="faqs-2-content">
Do you offer free trials?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-2-content" class="collapse" aria-labelledby="faqs-2-title" data-parent="#accordion">
<div class="card-body">
<p>No, We don't.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-3-title">
<button class="title" data-toggle="collapse" data-target="#faqs-3-content" aria-expanded="true" aria-controls="faqs-3-content">
Do you offer refund or exchange?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-3-content" class="collapse" aria-labelledby="faqs-3-title" data-parent="#accordion">
<div class="card-body">
<p class="italic">All purchases at HaloThemes are covered by our "Money Back Guarantee Policy". If you're not satisfied with your themes and/or add-ons / plugins / extensions, we will try our very best to help you as much as possible.</p>
<p class="bold red">In case our templates or extensions get any issue that we cannot help, we will refund the full price you paid immediately.</p>
<h4>WHY A REFUND MAY NOT BE GIVEN</h4>
<ul>
<li><span>You don't want it after you've downloaded it.</span></li>
<li><span>The item did not meet your expectations.</span></li>
<li><span>You simply change your mind.</span></li>
<li><span>You bought an item by mistake</span></li>
<li><span>You do not have sufficient expertise to use the item.</span></li>
<li><span>You ask for goodwill, or</span></li>
<li><span>You can no longer access the item because it has been removed / discontinue (we advise you to download items as soon as you have purchased them to avoid this situation).</span></li>
<li><span>Refund is not applicable on Custom Service (such as custom development works, consulting works and any order services we provide)</span></li>
</ul>
<h4>A REFUND MAY BE GIVEN</h4>
<p class="number"><strong>1. Product Not-As-Described</strong></p>
<p>Such issues should be reported to our Technical Support Department within 7 days from the date of the purchase. Clear evidence must be provided proving that the purchased product is not as it is described on the website. Complaints which are based merely on the customers false expectations or wishes are not honored.</p>
<p class="number"><strong>2. Major Defects</strong></p>
<p>Although all the products are thoroughly tested before release, unexpected errors may occur. Such issues must be submitted for our Technical Support Department. We keep the right to rectify the error or defect within 72 hours (exclude Sartuday and Sunday). Please note that our technicians can request temporary access to your server in order to identify and fix the possible issues with our Products. Failure to provide such access in a timely manner may result in a delayed resolution of the issue. Refusal to provide access to your sever will result in your inability to qualify for a refund.</p>
<p class="number"><strong>3. Item support extension not used</strong></p>
<p>If you purchase an item support extension and request a refund of that extension before your existing item support expires, we will provide you with a refund of that item support extension.</p>
</div>
</div>
</div>
</div>
</div>
<div class="faqs-paragraph">
<h3 class="faq-title">Theme Questions</h3>
<div id="accordion">
<div class="card">
<div class="card-header" id="faqs-4-title">
<button class="title" data-toggle="collapse" data-target="#faqs-4-content" aria-expanded="true" aria-controls="faqs-4-content">
Why I don’t see your themes & templates on Bigcommerce Theme Store?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-4-content" class="collapse" aria-labelledby="faqs-4-title" data-parent="#accordion">
<div class="card-body">
<p>Firstly, we understand your concerns about our Bigcommerce Themes. There are some store’s owners also have concerns before choosing our themes:</p>
<ul>
<li><a href="http://kellac.com/" target="_blank" rel="noopener">http://kellac.com/</a></li>
<li><a href="http://www.escapetoparadise.com.au/" target="_blank" rel="noopener">http://www.escapetoparadise.com.au/</a></li>
<li><a href="http://www.physiqapparel.com/" target="_blank" rel="noopener">http://www.physiqapparel.com/</a></li>
<li><a href="https://www.awesomegti.com/" target="_blank" rel="noopener">https://www.awesomegti.com/</a></li>
<li><a href="https://www.gravesport.com/" target="_blank" rel="noopener">https://www.gravesport.com/</a></li>
<li><a href="https://www.icefishingshack.ca/" target="_blank" rel="noopener">https://www.icefishingshack.ca/</a></li>
<li>and many more...</li>
</ul>
<p>We specialised in creating Premium Bigcommerce themes & templates which are suitable for experienced users. You may need basic HTML knowledge to control the theme. In the other hand, templates on Bigcommerce marketplaces need to be simple. Even newbies can control well the themes. This is why you don’t see our themes on Bigcommerce marketplace. However, we are also Bigcommerce partner. We are creating some basic templates and will submit on Bigcommerce marketplaces soon.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-5-title">
<button class="title" data-toggle="collapse" data-target="#faqs-5-content" aria-expanded="true" aria-controls="faqs-5-content">
Where is my theme package I just paid for it?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-5-content" class="collapse" aria-labelledby="faqs-5-title" data-parent="#accordion">
<div class="card-body">
<p>Please login to your account dashboard at <a href="http://halothemes.com/amember/" target="_blank" rel="noopener"><strong>http://halothemes.com/amember/</strong></a> and download your bigcommerce theme package.</p>
<p>After you already have download and extract (unzip) the Downloaded Package.</p>
<p>You will see the 02 folders: Theme Source (Ex.: ThemeName-Stencil-1.0.X.zip) – upload to Bigcommerce and Documentation folder – Theme User Guide. In the Documentation folder, please open the index.html file to start reading our Theme User Guide for how to manage new bigcommerce theme. You just need follow it exactly step-by-step in our Theme User Guide to complete your work.</p>
<p>If you have any questions, please contact us directly at: support@halothemes.com and we are happy to answer!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-6-title">
<button class="title" data-toggle="collapse" data-target="#faqs-6-content" aria-expanded="true" aria-controls="faqs-6-content">
Do I get update for free in the future?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-6-content" class="collapse" aria-labelledby="faqs-6-title" data-parent="#accordion">
<div class="card-body">
<p>Yes you will get free Bigcommerce theme update in the future when the latest version is available. Please check back our Bigcommerce Theme’s Chang Log for more details.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-7-title">
<button class="title" data-toggle="collapse" data-target="#faqs-7-content" aria-expanded="true" aria-controls="faqs-7-content">
Is the Bigcommerce template SEO friendly?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-7-content" class="collapse" aria-labelledby="faqs-7-title" data-parent="#accordion">
<div class="card-body">
<p>Yes, we integrated <a href="https://developers.google.com/search/docs/guides/intro-structured-data?visit_id=1-636409591203254689-3529937039&hl=en&rd=1" target="_blank" rel="noopener"><strong>Google Rich Snippet</strong></a> into our premium bigcommerce templates so your store will be friendly with SEO.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-8-title">
<button class="title" data-toggle="collapse" data-target="#faqs-8-content" aria-expanded="true" aria-controls="faqs-8-content">
Do you offer Full Installation Service for live store?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-8-content" class="collapse" aria-labelledby="faqs-8-title" data-parent="#accordion">
<div class="card-body">
<p>Yes we do. The service costs $149. We will install the Bigcommerce themes on a sample store and put your data (text/images) into this sample store then you can review how it looks. When you feel happy with the sample store, we will do the installation on your real store. This process will avoid the down time of your real store. Please find out more information about our Bigcommerce Installation Service below:</p>
<p><a href="https://www.halothemes.com/amember/signup?id=86" target="_blank" rel="noopener"><strong>Installation Service</strong></a></p>
<p>If you have any questions, please contact us directly at: <strong>support@halothemes.com</strong> and we are happy to answers!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-9-title">
<button class="title" data-toggle="collapse" data-target="#faqs-9-content" aria-expanded="true" aria-controls="faqs-9-content">
What’s Single Domain License?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-9-content" class="collapse" aria-labelledby="faqs-9-title" data-parent="#accordion">
<div class="card-body">
<p>Single Domain License allows you to use the purchased Bigcommerce theme and/or extension on a single domain (website). All our Bigcommerce themes & templates and addons come with Single Domain License. If you would like to use the Bigcommerce themes/addons for multiple domains, please contact us at <strong>support@halothemes.com</strong> for more details!</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-10-title">
<button class="title" data-toggle="collapse" data-target="#faqs-10-content" aria-expanded="true" aria-controls="faqs-10-content">
Do you provide any support? What’s your response time?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-10-content" class="collapse" aria-labelledby="faqs-10-title" data-parent="#accordion">
<div class="card-body">
<p>Please add our email: <strong>support@halothemes.com</strong> to your address book to ensure our response email isn’t marked as spam mail.</p>
<p>We’re available from <strong>Monday – Friday 08:30 A.M. to 06:00 P.M. (GMT+7 / Asia)</strong>, Saturday and Sunday Closed.</p>
<p><strong>We will try our best to reply your emails as soon as possible. However, we will prioritise email regarding Theme features and issues.</strong></p>
<p> – We will reply your email regarding Theme features and issues within 24 hours.</p>
<p> – Regarding emails about Bigcommerce template customisation, we will reply you within 48 hours (but normally much sooner).</p>
<p><strong>** Please feel understanding</strong>: we’re living & working in a different time zone (GMT+7/Asia). Therefore, if you have any questions/troubles. Please contact us directly at: <strong>support@halothemes.com</strong> and then we will try to check back/response for you ASAP.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="faqs-11-title">
<button class="title" data-toggle="collapse" data-target="#faqs-11-content" aria-expanded="true" aria-controls="faqs-11-content">
I’m looking to purchase the Premium Template for Bigcommerce Store. I have Product Filtering (Faceted Search) and was wondering if it would work with your template?
</button>
<span class="icon-plus"> </span>
</div>
<div id="faqs-11-content" class="collapse" aria-labelledby="faqs-11-title" data-parent="#accordion">
<div class="card-body">
<p>All our premium Bigcommerce themes & templates are compatible with Bigcommerce Product Filtering (Faceted Search).</p>
</div>
</div>
</div>
</div>
</div>
<div class="faq-content">
<p>Unable to find satisfactory answers? <a href="/contact-us" class="button button--primary">Contact Support</a></p>
</div>
Or use button below to generate the code with your own content. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
3. How to Change Sidebar of FAQs Page?
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Pages -> FAQs Page
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Lookbook Page
https://annies-garden-light-demo.mybigcommerce.com/lookbook
Recommended banner Size: 1570x720px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
1. How to Create Lookbook Page?
Go to Storefront -> Web pages.
In the Create a Web Page -> Enter name: Lookbook
In Advanced Options, choose Template Layout File is "lookbook-layout".
When you are happy with your changes, don't forget click Save.
2. How to Change Content of Lookbook Page?
Go to Storefront -> Web pages -> Lookbook Page.
Open HTML Source Editor
After that, input content below:
<div class="halo-lookbook-slider">
<div class="item">
<div class="image">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/lookobook-item-1.jpg" alt="Cosmopolis" title="Cosmopolis">
</div>
<div class="lookbook-info">
<div class="lookbook-text">Lookbook description goes here...</div>
</div>
<div class="content" style="top: 50%; left: 49%;">
<div class="item-point" data-product-id="122">+</div>
</div>
<div class="content" style="top: 27%; left: 73%;">
<div class="item-point" data-product-id="130">+</div>
</div>
</div>
<div class="item">
<div class="image">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/lookobook-item-2.jpg" alt="Milancelos" title="Milancelos">
</div>
<div class="lookbook-info">
<div class="lookbook-text">Lookbook description goes here...</div>
</div>
<div class="content" style="top: 38%; left: 58%;">
<div class="item-point" data-product-id="124">+</div>
</div>
</div>
<div class="item">
<div class="image">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/lookobook-item-3.jpg" alt="Indoor Pants" title="Indoor Pants">
</div>
<div class="lookbook-info">
<div class="lookbook-text">Lookbook description goes here...</div>
</div>
<div class="content" style="top: 38%; left: 58%;">
<div class="item-point" data-product-id="126">+</div>
</div>
</div>
</div>
<div class="lookbook-popup"></div>
<div class="lookbook-button">
<a class="button button--primary" href="#">Shop LookBook</a>
</div>
Or use button below to generate the code with your own content. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Portfolio Page
https://annies-garden-light-demo.mybigcommerce.com/portfolio
Recommended banner Size: 770x450px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
1. How to Create Portfolio Page?
Go to Storefront -> Web pages.
In the Create a Web Page -> Enter name: Portfolio
In Advanced Options, choose Template Layout File is "portfolio-layout".
When you are happy with your changes, don't forget click Save.
2. How to Change Content of Portfolio Page?
Go to Storefront -> Web pages -> Portfolio Page.
Open HTML Source Editor
After that, input sample content below:
<div class="halo-image-portfolio">
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/milancelos">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-1.jpg" title="Milancelos" alt="Milancelos">
</a>
<div class="content-wrapper">
<span class="subtitle">29 Images</span>
<h2 class="title">Milancelos</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/milancelos">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/suspendisse">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-2.jpg" title="Suspendisse" alt="Suspendisse">
</a>
<div class="content-wrapper">
<span class="subtitle">64 Images</span>
<h2 class="title">Suspendisse</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/suspendisse">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/mollis-sapieno">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-3.jpg" title="Mollis Sapieno" alt="Mollis Sapieno">
</a>
<div class="content-wrapper">
<span class="subtitle">10 Images</span>
<h2 class="title">Mollis Sapieno</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/mollis-sapieno">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/hendrerito">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-4.jpg" title="Hendrerito" alt="Hendrerito">
</a>
<div class="content-wrapper">
<span class="subtitle">30 Images</span>
<h2 class="title">Hendrerito</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/hendrerito">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/sed-congue">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-5.jpg" title="Sed Congue" alt="Sed Congue">
</a>
<div class="content-wrapper">
<span class="subtitle">9 Images</span>
<h2 class="title">Sed Congue</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/sed-congue">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/destibulum">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-6.jpg" title="Destibulum" alt="Destibulum">
</a>
<div class="content-wrapper">
<span class="subtitle">38 Images</span>
<h2 class="title">Destibulum</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/destibulum">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/pretiumo">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-7.jpg" title="Pretiumo" alt="Pretiumo">
</a>
<div class="content-wrapper">
<span class="subtitle">21 Images</span>
<h2 class="title">Pretiumo</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/pretiumo">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/cosmopolis">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-8.jpg" title="Cosmopolis" alt="Cosmopolis">
</a>
<div class="content-wrapper">
<span class="subtitle">36 Images</span>
<h2 class="title">Cosmopolis</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/cosmopolis">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/dorto-velite">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-9.jpg" title="Dorto Velite" alt="Dorto Velite">
</a>
<div class="content-wrapper">
<span class="subtitle">10 Images</span>
<h2 class="title">Dorto Velite</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/dorto-velite">View Gallery</a>
</div>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="/portas">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-10.jpg" title="Portas" alt="Portas">
</a>
<div class="content-wrapper">
<span class="subtitle">6 Images</span>
<h2 class="title">Portas</h2>
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada...</span>
<a class="button button--primary" href="/portas">View Gallery</a>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own content. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
3. How to Change Custom Banner of Portfolio Page?
Go to Storefront -> Web pages -> Portfolio Page.
Open HTML Source Editor
After that, input sample content below:
<div class="halo-block padding-top-40 padding-bottom-30"">
<div class="container container-custom2">
<div class="halo-portfolio-custom">
<div class="halo-row">
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="portfolio-custom">
<a class="image-wrapper" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-custom-1.png" title="Cosmo de Milancelos" alt="Cosmo de Milancelos">
</a>
<div class="content-wrapper">
<span class="subtitle">Custom Block</span>
<h2 class="title"><span>Cosmo de Milancelos</span></h2>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus leo, elementum in lorem malesuada an darius ut augue. Cras sit amet lectus et justo feugiat euismod sed non erat. Nulla non felis id metus bibendum iaculis quis sit amet eros. Nam suscipit mollis tellus vel malesuada. Cum sociis natoque penatibus et magnis...</span>
<a class="button button--primary" href="#">Discover</a>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="portfolio-custom">
<a class="image-wrapper" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-custom-2.png" title="Cosmo de Milancelos" alt="Cosmo de Milancelos">
</a>
<div class="content-wrapper">
<span class="subtitle">Custom Block</span>
<h2 class="title"><span>Cosmo de Milancelos</span></h2>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus leo, elementum in lorem malesuada an darius ut augue. Cras sit amet lectus et justo feugiat euismod sed non erat. Nulla non felis id metus bibendum iaculis quis sit amet eros. Nam suscipit mollis tellus vel malesuada. Cum sociis natoque penatibus et magnis...</span>
<a class="button button--primary" href="#">Discover</a>
</div>
</div>
</div>
</div>
<div class="halo-row-slider">
<div class="halo-row-item">
<div class="portfolio-custom">
<a class="image-wrapper" href="#">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-custom-3.png" title="Cosmo de Milancelos" alt="Cosmo de Milancelos">
</a>
<div class="content-wrapper">
<span class="subtitle">Custom Block</span>
<h2 class="title"><span>Cosmo de Milancelos</span></h2>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis risus leo, elementum in lorem malesuada an darius ut augue. Cras sit amet lectus et justo feugiat euismod sed non erat. Nulla non felis id metus bibendum iaculis quis sit amet eros. Nam suscipit mollis tellus vel malesuada. Cum sociis natoque penatibus et magnis...</span>
<a class="button button--primary" href="#">Discover</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Or use button below to generate the code with your own content. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
4. How to Change Product Block of Portfolio Page?
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Pages -> Portfolio Page
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Portfolio Detail Page
https://annies-garden-light-demo.mybigcommerce.com/sed-congue/
Recommended banner Size: 600x750px. Please notice that you will need to upload the correct size like our recommended size for this banner to show the perfect banners like our Demo theme.
1. How to Create Portfolio Page?
Go to Storefront -> Web pages.
In the Create a Web Page -> Enter name: Portfolio Detail Page
In Advanced Options, choose Template Layout File is "portfolio-layout".
When you are happy with your changes, don't forget click Save.
2. How to Change Content of Portfolio Detail Page?
Go to Storefront -> Web pages -> Portfolio Page.
Open HTML Source Editor
After that, input content below:
<div class="page-sidebar-mobile-wrapper">
<div class="page-sidebar-mobile">
<span class="text">Sidebar</span>
</div>
</div>
<div class="page-sidebar halo-portfolio-sidebar">
<div class="page-sidebar-close">
<a href="#" class="close">
<span class="icon">×</span>
<span class="text">Close</span>
</a>
</div>
<div class="page-sidebar-content">
<ul class="all-categories-list">
<li class="navPages-item current-cate is-clicked">
<a class="navPages-action" href="/milancelos">Milancelos</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/suspendisse">Suspendisse</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/mollis-sapieno">Mollis Sapieno</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/hendrerito">Hendrerito</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/sed-congue">Sed Congue</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/destibulum">Destibulum</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/pretiumo">Pretiumo</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/cosmopolis">Cosmopolis</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/dorto-velite">Dorto Velite</a>
</li>
<li class="navPages-item">
<a class="navPages-action" href="/portas">Portas</a>
</li>
</ul>
</div>
</div>
<div class="halo-image-portfolio halo-image-portfolio2">
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-1.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-1.jpg" title="Milancelos" alt="Milancelos">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-2.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-2.jpg" title="Suspendisse" alt="Suspendisse">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-3.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-3.jpg" title="Mollis Sapieno" alt="Mollis Sapieno">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-4.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-4.jpg" title="Hendrerito" alt="Hendrerito">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-5.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-5.jpg" title="Sed Congue" alt="Sed Congue">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-6.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-6.jpg" title="Destibulum" alt="Destibulum">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-7.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-7.jpg" title="Pretiumo" alt="Pretiumo">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-8.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-8.jpg" title="Cosmopolis" alt="Cosmopolis">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-9.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-9.jpg" title="Dorto Velite" alt="Dorto Velite">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
<div class="item">
<div class="image-portfolio">
<a class="image-wrapper" href="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-10.jpg" data-fancybox="images">
<img class="lazyload" src="https://annies-garden-light-demo.mybigcommerce.com/content/loading.svg" data-src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/home-portfolio-detail-10.jpg" title="Portas" alt="Portas">
</a>
<div class="content-wrapper">
<span class="desc">Nullam aliquet vestibulum augue nonde varius. Cras cosmo congue delos melitos. Duis tristique del ante le maliquam de praesento. Phasellus fringilla malesuada. Quisquemos sodales suscipit ditaemcos.</span>
</div>
<a class="external-link" href="#"> </a>
</div>
</div>
</div>
Or use button below to generate the code with your own content. Please click the Copy code on the popup after you changed all the blocks.
When you are happy with your changes, don't forget click Save.
Blog Post Page
https://annies-garden-light-demo.mybigcommerce.com/blog/commodo-muso-magna-cosmopolis-d0c691
Go to Storefront -> Blog -> Create a New Blog Post.
In the New Blog Post Panel -> go to Body -> HTML Buttonto open HTML Source Editor
After that, input sample content below:
<p>Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam dolor, elementum et lobortis at, mollis ut risus. Sedcuman des faucibus sullamcorper mattis fusce molestie elit a lorem tempus scelerisqaue blandit est cursus. Quisque volutpat orci ut metus malesuada in interdumos lectus anmos scelerisque lorem. Praesent deu odio des nisios dullamcorper sultricies. Cum sociis natoque penatibus et magnis dis parturient.</p>
<div class="custom-description">
<h3>Sample Unordered List</h3>
<ul>
<li>Quisque dolutpato lorem sultricie tempor ullamcorper miaculis parturient.</li>
<li>Binterdumo pellentesque vitae neque mollis urna mattis laoreeto parturiente. <a href="#">Custom Link</a></li>
<li>Libero milancelos divamus sit amet purus justo de milance.</li>
<li>Deumante proin molestie lorem egestas orci ac suscipit risus posuere.</li>
</ul>
<h3>Sample Ordered List</h3>
<ol>
<li>Quisque dolutpato lorem sultricie tempor ullamcorper miaculis parturient.</li>
<li>Binterdumo pellentesque vitae neque mollis urna mattis laoreeto parturiente. <a href="#">Custom Link</a></li>
<li>Libero milancelos divamus sit amet purus justo de milance.</li>
<li>Deumante proin molestie lorem egestas orci ac suscipit risus posuere. <a href="#">Custom Link</a></li>
</ol>
</div>
<h3>Sample lookbook Block</h3>
<div class="halo-blog-lookbook">
<div class="blog-lookbook-gallery">
<div class="lookbook-slider">
<div class="item">
<div class="image">
<img src="https://annies-garden-light-demo.mybigcommerce.com/product_images/uploaded_images/blog-post-lookbook-1.jpg" alt="Sample lookbook Block" title="Sample lookbook Block"/>
</div>
<div class="content" style="top: 42%; left: 22%;">
<div class="item-point" data-product-id="114">+</div>
</div>
<div class="content" style="top: 48%; left: 74%;">
<div class="item-point" data-product-id="115">+</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="https://annies-garden-light-demo.mybigcommerce.com/product_images/uploaded_images/blog-post-lookbook-2.jpg" alt="Sample lookbook Block" title="Sample lookbook Block">
</div>
</div>
<div class="item">
<div class="image">
<img src="https://annies-garden-light-demo.mybigcommerce.com/product_images/uploaded_images/blog-post-lookbook-3.jpg" alt="Sample lookbook Block" title="Sample lookbook Block">
</div>
<div class="content" style="top: 41%; left: 59%;">
<div class="item-point" data-product-id="121">+</div>
</div>
</div>
</div>
<div class="lookbook-popup">
<div class="popup"></div>
</div>
</div>
<div class="blog-lookbook-content">
<div class="lookbook-info">
<a class="image" href="#">
<img src="https://cdn11.bigcommerce.com/s-34p0m70zgu/product_images/uploaded_images/blog-post.jpg" alt="Succulents" title="Succulents">
</a>
<div class="content">
<span class="sub-heading">Must have</span>
<h3 class="heading heading-with-line heading-with-line2">
<span>Succulents</span>
</h3>
<span class="desc">
Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam dolor, elementum et lobortis at, mollis ut risus. Sedcuman des faucibus sullamcorper mattis fusce molestie elit a lorem tempus scelerisqaue blandit est cursus.
</span>
<a href="#" class="button button--primary">Shop the collection</a>
</div>
</div>
</div>
</div>
<h3>Sample Block Quote</h3>
<blockquote>
<p>Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam dolor, elementum et lobortis at, mollis ut risus. Sedcuman des faucibus sullamcorper mattis fusce molestie elit a lorem tempus scelerisqaue blandit est cursus.
</p>
</blockquote>
<h3>Sample Paragraph Text</h3>
<p>Nam tempus turpis at metus scelerisque placerat nulla deumantos sollicitudin felis. Pellentesque diam dolor, elementum et lobortis at, mollis ut risus. Sedcuman des faucibus sullamcorper mattis fusce molestie elit a lorem tempus scelerisqaue blandit est cursus. Quisque volutpat orci ut metus malesuada in interdumos lectus anmos scelerisque lorem. Praesent deu odio des nisios dullamcorper sultricies. Cum sociis natoque penatibus et magnis dis parturient.</p>
When you are happy with your changes, don't forget click Save.
For more information about Blog Post, see Using the Built-In Blog.
Setting Up Other Features
What We'll Cover
Ask An Expert Popup
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Ask An Expert
How to create and get link ask an expert form page?
When you are happy with your changes, don't forget click Save.
In case you cannot make change, our support team is available to support you, Support Portal: https://halosoft.ticksy.com/
Someone Just Bought Popup
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Recently Bought Popup
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
How do I get Product ID of a product?
- Please follow this instruction image:
Newsletter Signup Popup
Recommended banner Size: 470x570px. Please notice that you will need to upload the correct size like our recommended size for slider banner to show the perfect banners like our Demo theme.
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Newsletter Popup
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
To show "Newsletter Summary":
Go to Marketing -> Email Marketing.
At the Show Newsletter Summary? section, please check the Yes, Enable Newsletter Summary checkbox and input content that you want.
When you are happy with your changes, don't forget click Save.
Subscription Form
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Subcription Form
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Before You Leave Popup
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Before You Leave
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Images must be successfully upload to the Image Manager.
How do I get Product ID of a product?
- Please follow this instruction image:
Recently Viewed Popup
Go to Storefront -> My Themes -> Customize.
In the Theme Editor -> go to Other Settings -> Recently Viewed Popup
When you are happy with your changes, don't forget click Save and Publish to repackage the edited theme.
*** Notes:
- Input in Theme Editor limit 64 characters.
Knowledgebase
Fully Documentation of BigCommerce for your reference: https://support.bigcommerce.com/documentation
Changelog
Version 1.1.8 (29/02/2024)
- Fixed minor bugs.
- Update layout with correct usage of main tag.
- Anchor links on category pages are not working when product filtering is enabled.
- Dispatch an event on productOptionsChanged
- Display fees on cart page.
- Replace Twitter logo with X logo within social sharing and social link components.
- Displaying the Hidden cart_order_source Input Field on PDP page.
- Update Shop By Price Widget.
- Top Global Region Image Widget overlaps the mobile menu.
- Adding autocomplete to common input fields.
Version 1.1.7 (20/10/2023)
- Fixed minor bugs.
Version 1.1.6 (13/10/2023)
- Remove data_tag_enabled check from everywhere.
- Update Payment.
- Update Ask An Expert Form.
- Update Code Settings.
- Fixed minor bugs.
Version 1.1.5 (11/07/2023)
Added New Home: Tech
Version 1.1.4 (08/06/2023)
Update MegaMenu.
Version 1.1.3 (26/12/2022)
Update Code Preload/Early Hints.
Update micro data schema.
Update Code Sticky Add To Cart Function.
Update Code Page Builder.
Fixed minor bugs.
Version 1.1.2 (14/07/2022)
Update quick view as requested by Bigcommerce.
Version 1.1.1 (24/12/2021)
Fixed: the product in the bundle product list with the first variant is out of stock, the bundle function does not work.
Version 1.1.0 (23/11/2021)
Fixed the Calculate Free Shipping function that hides the promotional messages on the cart page.
Version 1.0.9 (17/11/2021)
Update meta images for Home 2
Version 1.0.8 (05/11/2021)
Added New Home: Shopica
Version 1.0.7 (13/09/2021)
Updated checkout page
Version 1.0.6 (08/09/2021)
Removed 25% discount on Marketplace
Version 1.0.5 (02/06/2021)
Added 25% discount on Marketplace
Version 1.0.4 (02/06/2021)
Fixed: minor bugs
Version 1.0.3 (01/11/2021)
Fixed image logo will overlap navigation menu if size exceeds a certain max height in page builder settings
Version 1.0.2 (02/06/2021)
Updated Caculate Free Shipping function (allow store owners to set up in Theme Editor not in Script Manager)
Updated theme with ADA compliance
Updated Shipping Tab + Return Tab on product detail page (get content of the tab from webpage)
Updated Block Custom HTML (get content of the tab from webpage)
Move slick code from Marketing Banner and Webpage to js file
And fixed some small bugs
Version 1.0.0 (13/04/2021)
Theme Release
Customer Support
Our Support Portal: https://halosoft.ticksy.com/
Our Technical Support Team will reply to you as soon as possible.
- We will reply your email regarding Theme features and issues within 24 hours.
- Regarding emails about template customisation, we will reply you within 48 hours (but normally much sooner).
Your opinions is highly appreciated and help us built better products.
Thank you.
Halothemes Team.