New section 2.0 inside grid product collection (DAWN 4.0)

Store Design
1

Hi there, i made a new section for my dawn theme, and i want to put it inside grid product collection, using

code for old themes :

{% if collection.title contains "COLLECTION TITLE" and forloop.index == 6 %}
      
        {% section 'image-slider-text' %}
      

      {% endif %}

that’s the way i was using on old themes before 2.0, it show section if collection title contains “name”, and appear after the 6th product on collection grid layot, but now if i use “render” i cannot take section inside another section, so can anyone guide me on how put my new section inside grid product collection?

here is the part of code where i have to add that new code,


              {%- for product in collection.products -%}
                {% assign lazy_load = false %}
                {%- if forloop.index > 2 -%}
                  {%- assign lazy_load = true -%}
                {%- endif -%}
                - {% render 'card-product',
                      card_product: product,
                      media_aspect_ratio: section.settings.image_ratio,
                      show_secondary_image: section.settings.show_secondary_image,
                      show_vendor: section.settings.show_vendor,
                      show_rating: section.settings.show_rating,
                      lazy_load: lazy_load,
                      show_quick_add: section.settings.enable_quick_add,
                      section_id: section.id

                    %}
                
              {%- endfor -%}
2

Hi @SHIBdev

Try this

{% if collection.title contains "COLLECTION TITLE" and forloop.index == 6 %}
- {% include 'image-slider-text' %}

{% else %}
- {% render 'card-product',
                      card_product: product,
    media_aspect_ratio: section.settings.image_ratio,
    show_secondary_image: section.settings.show_secondary_image,
    show_vendor: section.settings.show_vendor,
    show_rating: section.settings.show_rating,
    lazy_load: lazy_load,
    show_quick_add: section.settings.enable_quick_add,
    section_id: section.id

    %}

{% endif %}

So what I’m doing and what I think you are doing, on the 6th loop, add your content instead of the product. be weary you are using a “section” you cant put a section within another section. You need to input a snipper, use “include” or “render”

1 Like
3

@JohnFromJotting thanks for your answer, that’s the question, how can i manage it on customizer like a section:

12.jpg
12.jpg310×891 28.1 KB

if i convert it to snippet and use render on it, could i manage it on customizer like a section?

4

The JSON for the customization goes into the collection page. So turn that image carousel into a snippet, put all the JSON in the collection section.

1 Like
5

this is my JSON collection, you mean insert here JSON for that ‘image-slider-text’ snippet?

{
  "sections": {
    "banner": {
      "type": "main-collection-banner",
      "settings": {
        "show_collection_description": true,
        "show_collection_image": false,
        "color_scheme": "background-1"
      }
    },
    "product-grid": {
      "type": "main-collection-product-grid",
      "settings": {
        "products_per_page": 16,
        "columns_desktop": 3,
        "image_ratio": "portrait",
        "show_secondary_image": true,
        "show_vendor": false,
        "show_rating": false,
        "enable_filtering": true,
        "enable_sorting": true,
        "collapse_on_larger_devices": false,
        "columns_mobile": "2",
        "padding_top": 36,
        "padding_bottom": 36
      }
    }
  },
  "order": [
    "banner",
    "product-grid"
  ]
}

here is JSON generated on index for that section:

"16492383212e7e81c5": {
      "type": "image-slider-text",
      "blocks": {
        "78c57cc2-0c58-4a69-9c4f-5214d3ce638c": {
          "type": "text",
          "settings": {
            "text": "

La colección INFINITY BY ETTORE & GIO está inspirada en aquellos momentos del día que tienen una luz mágica. Momentos en los que las sombras se alargan y el sol envuelve todo lo que le rodea de un tono cálido. El lienzo secreto creado por la naturaleza se encuentra reflejado en esta colección, creando piezas únicas y exclusivas que denotan un extraordinario poder de su interior como una declaración de la fuerza y equilibrio de nuestra naturaleza. La vitalidad de los colores genera una caprichosa sensación de belleza y compone una sinfonía realizada por la luz que se filtra a través de cada piedra. <\/p>"
          }
        },
        "c81127dd-8372-4b30-9673-1ff896edd17b": {
          "type": "text",
          "settings": {
            "text": "

La feminidad se funde con la masculinidad dando como resultado una colección con una esencia genuina e innovadora, delicados e intrincados diseños con una estética minimalista pero contemporánea. Esta colección es el vínculo existente entre el universo y nosotros mismos. Un reflejo de tu esencia interior, elaborado con los materiales más preciosos. Los detalles más luminosos de nuestro día, son capturados en tonos dorados y piedras semipreciosas, cuidadosamente engastadas y talladas creando un manto de estrellas que reflejan poder, fuerza, equilibrio y elegancia. <\/p>"
          }
        },
        "1649238321d3b92a52-1": {
          "type": "image",
          "settings": {
            "image": "shopify:\/\/shop_images\/branded-valentineday-3.jpg"
          }
        },
        "d16d63a6-d839-4887-aa85-70b28e1d8283": {
          "type": "image",
          "settings": {
            "image": "shopify:\/\/shop_images\/branded-valentineday-1.jpg"
          }
        },
        "6569b445-0408-4a57-9f7b-68626b33f269": {
          "type": "image",
          "settings": {
            "image": "shopify:\/\/shop_images\/branded-valentineday-2.jpg"
          }
        }
      },
      "block_order": [
        "78c57cc2-0c58-4a69-9c4f-5214d3ce638c",
        "c81127dd-8372-4b30-9673-1ff896edd17b",
        "1649238321d3b92a52-1",
        "d16d63a6-d839-4887-aa85-70b28e1d8283",
        "6569b445-0408-4a57-9f7b-68626b33f269"
      ],
      "settings": {
        "heading": "UN ACTO. UN SENTIMIENTO. UN PODER ESENCIAL.",
        "slider_visual": "counter",
        "auto_rotate": true,
        "change_slides_speed": 5,
        "padding_top": 36,
        "padding_bottom": 36
      }
    }
6

Hi @SHIBdev

I can’t comment where, but that looks correct, one issue that could come up is if you want different text and images, then that would require more schemas or you can directly implement it without the schema. or you can have a few static ones in the schema and then loop them

1 Like
7

@JohnFromJotting i cannot found the way to make it possible… if i include that schema code into JSON collection, doesn’t work…