CODEWITHSUNDEEP
shopifyliquid
Eddie Carty
Eddie Carty

Reputation: 3

How to change the background color for individual rows in a collapsible content menu in liquid?

I'm just getting used to liquid and can't for the life of me figure out how to input the code to assign a color for each row in an accordion style collapsible menu.

I've managed to make the schema for the theme editor but can't get it to control the liquid.

I'm thinking it belongs where I've written [HERE] below but have no idea. If anyone could help I would super appreciate it!

Code below:

      {% endif %}
      <div class="grid__item">
        {%- for block in section.blocks -%}

[ HERE?? ]

        <div class="accordion{% if section.settings.layout == 'row' %} content-container color-{{ section.settings.row.color }} gradient{% endif %}" {{ block.shopify_attributes }}>
            <details id="Details-{{ block.id }}-{{ section.id }}"{% if section.settings.open_first_collapsible_row and forloop.first %} open{% endif %}>
              <summary id="Summary-{{ block.id }}-{{ section.id }}">
                {% render 'icon-accordion', icon: block.settings.icon %}
                <h3 class="accordion__title h4">
                  {{ block.settings.heading | default: block.settings.page.title }}
                </h3>
                {% render 'icon-caret' %}
              </summary>
              <div class="accordion__content rte" id="CollapsibleAccordion-{{ block.id }}-{{ section.id }}" role="region" aria-labelledby="Summary-{{ block.id }}-{{ section.id }}">
                {{ block.settings.row_content }}
                {{ block.settings.page.content }}
              </div>
            </details>
          </div>
        {%- endfor -%}
      </div>

Schema I created:

{ "type": "color", "id": "row_color", "default": "#FFFFFF", "label": "Row Color", "info": "Changes color for this individual row" },

Upvotes: 0

Views: 669

Answers (1)

davidthorand
davidthorand

Reputation: 403

You can access the section block schema data like this:

{{ block.settings.id }}

id is the ID you defined for the specific setting, in this case it would be row_color.

In conclusion:

{{ block.settings.row_color }} // Returns either your default value `#ffffff` or the one selected in the customizer

Upvotes: 0

Related Questions