add product grid section from collection page to homepage on refresh theme. I need to add the full s

[nikz35]

add product grid section from collection page to homepage on refresh theme. I need to add the full section with filter and all to my homepage. i tried to add a new section with same code from gird section and it was not showing in the dashboard.

[PageFly-Amelia]

This is Amelia from PageFly - Landing Page Builder App

To add a product grid section from the collection page to your homepage in the Refresh theme, including filters, follow these steps:

1. Create a New Section:

   • Go to your Shopify admin and navigate to Online Store > Themes > Actions > Edit Code.
   • In the Sections folder, click Add a new section and name it home-collection-product-grid.

2. Add Code to the New Section:

   • Copy the code from the collection product grid section (usually found in collection-template.liquid or a similar file) and paste it into your new home-collection-product-grid.liquid file.
   • Here’s a basic structure to get you started:

     {% schema %}
     {
       "name": "Home Collection Product Grid",
       "settings": [
         {
           "type": "collection",
           "id": "collection",
           "label": "Collection"
         },
         {
           "type": "number",
           "id": "products_per_page",
           "label": "Products per page",
           "default": 12
         }
       ],
       "presets": [
         {
           "name": "Home Collection Product Grid"
         }
       ]
     }
     {% endschema %}
     
     <div class="section">
       <div class="grid">
         {% paginate collection.products by section.settings.products_per_page %}
           {% for product in collection.products %}
             {% include 'product-grid-item', product: product %}
           {% endfor %}
         {% endpaginate %}
       </div>
     </div>

3. Include Filters:

   • If your collection page includes filters, ensure you copy the relevant filter code as well. This might involve JavaScript and additional Liquid code to handle the filtering logic.

4. Add the Section to the Homepage:

   • Go to Online Store > Themes > Customize.
   • In the left sidebar, click Add section and select your newly created Home Collection Product Grid.
   • Configure the section by selecting the desired collection and setting the number of products per page.

5. Test and Adjust:

   • Save your changes and preview your homepage to ensure the product grid and filters are working correctly.
   • Make any necessary adjustments to the code or settings to fit your design and functionality needs.

Hope that my solution works for you.

Best regards,

Amelia | PageFly