---
title: How to create smart widgets in a grid format?
description: How to create smart widgets in a grid format?
---

[Skip to content](https://support.tagalys.com/how-to-create-smart-widgets-in-a-grid-format#main-content)

English

Show submenu for translations

[Contact us](https://support.tagalys.com/kb-tickets/new?hsLang=en)

![tagalys-logo white.png\]](https://support.tagalys.com/hs-fs/hubfs/tagalys-logo%20white.png?height=40&name=tagalys-logo%20white.png)

- Home
- Products
- Pricing
- Blog
- Company

Open main navigation

Close main navigation

- Home
- Products
- Pricing
- Blog
- Company
- English
  
  Show submenu for translations
- [Contact us](https://support.tagalys.com/kb-tickets/new)

 How can we help you today?

- There are no suggestions because the search field is empty.

1. [Support Center](https://support.tagalys.com/?hsLang=en)
2. [Recommendations](https://support.tagalys.com/recommendations?hsLang=en)

# How to create smart widgets in a grid format?

1. Create a Smart Widget in Tagalys Dashboard.  [Click Here](https://support.tagalys.com/how-do-i-create-custom-widgets-using-tagalys-and-use-it-in-my-website-frontend?hsLang=en) to know how to create.
2. Once the smart widget is created, the default embedded code would be in the carousel format.  To change the code for Grid format, please follow the below steps: 
     1. Copy the below embed code (Grid Format) and use it in the website frontend with your developer's support 
        
        ```
        <div id="tagalys-namespace" class="tagalys-namespace"data-tagalys-widget="custom"data-tagalys-widget-opts-custom-name="TOKEN VALUE"data-tagalys-widget-opts-limit="16"tagalys-widget-opts-hide-if-results-under="4"data-tagalys-widget-opts-display-format="grid"></div>
        ```
     2. To extract the 'Token value', click on the 'view' icon on the widget that is created.  
        ![Smart widgets - 4](https://support.tagalys.com/hs-fs/hubfs/Smart%20widgets%20-%204.png?width=688&name=Smart%20widgets%20-%204.png)
     3. Copy the "TOKEN VALUE"   
        ![](https://api-na1.hubspot.com/filemanager/api/v2/files/52338657309/signed-url-redirect?portalId=6037192)
3. Paste the Token Value in the embed code (Grid Format)
4. Follow steps 2 & 3 to convert existing carousel format widgets to grid format

- [Products](https://support.tagalys.com/products?hsLang=en#main-content)
  
  
  
  
  
    - [Categories | Collections](https://support.tagalys.com/products?hsLang=en#categories-collections)
    - [General](https://support.tagalys.com/products?hsLang=en#general)
    - [Customizations](https://support.tagalys.com/products?hsLang=en#customizations)
    - [Troubleshooting](https://support.tagalys.com/products?hsLang=en#troubleshooting)
- [Magento](https://support.tagalys.com/magento?hsLang=en#main-content)
  
  
  
  
  
    - [Installation and Onboarding](https://support.tagalys.com/magento?hsLang=en#installation-and-onboarding)
    - [Troubleshooting](https://support.tagalys.com/magento?hsLang=en#troubleshooting)
- [Shopify](https://support.tagalys.com/shopify?hsLang=en#main-content)
  
  
  
  
  
    - [Installation and Onboarding](https://support.tagalys.com/shopify?hsLang=en#installation-and-onboarding)
    - [Troubleshooting](https://support.tagalys.com/shopify?hsLang=en#troubleshooting)
    - [General](https://support.tagalys.com/shopify?hsLang=en#general)
    - [Uninstallation](https://support.tagalys.com/shopify?hsLang=en#uninstallation)
- [FAQs](https://support.tagalys.com/faqs?hsLang=en#main-content)
  
  
  
  
  
    - [Client Data](https://support.tagalys.com/faqs?hsLang=en#client-data)
    - [Pricing](https://support.tagalys.com/faqs?hsLang=en#pricing)
    - [General FAQs](https://support.tagalys.com/faqs?hsLang=en#general-faqs)
- [Integration](https://support.tagalys.com/integration?hsLang=en)
- [A/B testing](https://support.tagalys.com/a-b-testing?hsLang=en#main-content)
  
  
  
  
  
    - [A/B testing](https://support.tagalys.com/a-b-testing?hsLang=en#a-b-testing)
- [Collections merchandising](https://support.tagalys.com/collections-merchandising?hsLang=en#main-content)
  
  
  
  
  
    - [Product sequencing](https://support.tagalys.com/collections-merchandising?hsLang=en#product-sequencing)
    - [Global Sort Options (GSO)](https://support.tagalys.com/collections-merchandising?hsLang=en#global-sort-options-gso)
    - [Product pinning](https://support.tagalys.com/collections-merchandising?hsLang=en#product-pinning)
    - [Promotion/Demotion](https://support.tagalys.com/collections-merchandising?hsLang=en#promotion-demotion)
    - [Version Scheduling (Draft and historical versions)](https://support.tagalys.com/collections-merchandising?hsLang=en#version-scheduling-draft-and-historical-versions)
    - [A/B testing](https://support.tagalys.com/collections-merchandising?hsLang=en#a-b-testing)
    - [Other](https://support.tagalys.com/collections-merchandising?hsLang=en#other)
    - [Looks](https://support.tagalys.com/collections-merchandising?hsLang=en#looks)
- [Search](https://support.tagalys.com/search?hsLang=en#main-content)
  
  
  
  
  
    - [Search Results](https://support.tagalys.com/search?hsLang=en#search-results)
    - [Search Suggestions](https://support.tagalys.com/search?hsLang=en#search-suggestions)
    - [Search Analysis section](https://support.tagalys.com/search?hsLang=en#search-analysis-section)
    - [Search Accuracy](https://support.tagalys.com/search?hsLang=en#search-accuracy)
    - [Merchandised Search](https://support.tagalys.com/search?hsLang=en#merchandised-search)
    - [Other](https://support.tagalys.com/search?hsLang=en#other)
- [Recommendations](https://support.tagalys.com/recommendations?hsLang=en)
- [Markets and segments](https://support.tagalys.com/markets-and-segments?hsLang=en)
- [Dashboard Reporting](https://support.tagalys.com/dashboard-reporting?hsLang=en)
- [General](https://support.tagalys.com/general?hsLang=en)

- Home
- Products
- Pricing
- Blog
- Company

[![Chill listening crop-3](https://support.tagalys.com/hs-fs/hubfs/New-Tagalys-Black-Logo-Large-1.png?width=59&height=24&name=New-Tagalys-Black-Logo-Large-1.png "Chill listening crop-3")](http://tagalys.com)

Tagalys Support Center

<https://twitter.com/tagalys> <https://www.linkedin.com/company/tagalys/>

Copyright © 2026, Tagalys Inc