Solved

How can I create a dynamic custom section for various content types?

lilac
Visitor
2 0 1

Hi, I have been trying to create a custom section to select between HTML, text, videos, and images along with custom width and making it dynamic. I am unable to do it. Can you please help? I was able to do it for texts.

 

<div id="section-test">
<div class="wrapper">
    <div class="grid-uniform">

      {% case section.blocks.size %}
        {% when 0 %}
        {% when 1 %}
          {% assign column_width = 'text-center' %}
        {% when 2 %}
          {% assign column_width = 'post-large--one-half medium--one-half' %}
        {% when 3 %}
          {% assign column_width = 'post-large--one-third medium--one-third' %}
        {% when 4 %}
          {% assign column_width = 'post-large--one-quarter medium--one-half' %}
        {% when 5 %}
          {% assign column_width = 'post-large--one-fifth medium--one-half' %}
        {% when 6 %}
          {% assign column_width = 'post-large--one-sixth medium--one-half' %}
      {% endcase %}

      {% for block in section.blocks %}
        {% case block.type %}

        {% when 'text' %}
            <div class="grid__item {{ column_width }}">
              <h3 class="h4">{{ block.settings.title }}</h3>
              <div class="rte">{{ block.settings.richtext }}</div>
            </div>
{% endcase %}
      {% endfor %}
  </div>
  </div>
</div>
{% schema %}
  {
    "name": "Test Custom",
    "max_blocks": 6,
    "blocks": [
      {
        "type": "text",
        "name": "Text",
        "settings": [
          {
            "type": "text",
            "id": "title",
            "label": "Text",
          },
          {
            "type": "richtext",
            "id": "richtext",
            "label": "Text"
          }
        ]
      }
{% endschema %}

 

 

Accepted Solution (1)

KetanKumar
Shopify Partner
36843 3636 11978

This is an accepted solution.

@lilac 

sorry for any issue 

you can try this way

http://www.codeshopify.com/blog_posts/shopify-sections-with-dynamic-blocks

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Reply 1 (1)

KetanKumar
Shopify Partner
36843 3636 11978

This is an accepted solution.

@lilac 

sorry for any issue 

you can try this way

http://www.codeshopify.com/blog_posts/shopify-sections-with-dynamic-blocks

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing