Product feature section background color

Solved

Hi Everyone,

I want to add background color picker for below section. Section name "product feature".

https://oleemaatee.com/products/ceramic-berry-bowl

I already added background color picker for "Image with Text" section, but not able to find the solution for the above section.

We are using Modular theme.

0 Likes

Hello,
Please share the screenshot of which section background color picker you want to add.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
0 Likes

Hi 

On the product page - product feature section need color picker option

Product Feature Capture.JPG

 

{% comment %} Product features {% endcomment %}
{%- assign blocks_alignment = section.settings.blocks_alignment -%}
{%- assign image_height = section.settings.image_aspect_ratio | times: 100 | append: '%' -%}


{%- if section.blocks.size > 0 -%}
  <div data-section-id="{{ section.id }}" data-section-type="product-features">
    <div class="product-features--container pad-sm">
      <div class="container">
        <div class="row">
          {%- for block in section.blocks -%}
            {%- assign is_block_odd = false -%}
            {%- assign block_parity = forloop.index | modulo: 2 -%}
            {%- if block_parity == 0 -%}
              {%- assign is_block_odd = true -%}
            {%- endif -%}

            {%- render 'product-features__item', block: block, image_height: image_height, blocks_alignment: blocks_alignment, is_block_odd: is_block_odd -%}
          {%- endfor -%}
        </div>
      </div>
    </div>
  </div>
{%- endif -%}

{% schema %}
{
  "name": "Product features",
  "max_blocks": 4,
  "class": "shopify-section--product-features product-features",
  "settings": [
    {
      "type": "header",
      "content": "Blocks Alignment"
    },
    {
      "type": "select",
      "id": "blocks_alignment",
      "label": "Text alignment",
      "options": [
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "top",
          "label": "Top"
        }
      ]
    },
    {
      "type": "range",
      "id": "image_aspect_ratio",
      "label": "Image aspect ratio",
      "min": 0.5,
      "max": 1.5,
      "step": 0.1,
      "unit": ":1",
      "default": 0.9
    }
  ],
  "blocks": [
    {
      "name": "Product feature",
      "type": "text",
      "settings": [
        {
          "type": "header",
          "content": "Text"
        },
        {
          "type": "textarea",
          "id": "title",
          "label": "Heading",
          "default": "This is a heading for a Product feature block."
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>Use this text to share information about the point put forth above. Describe a product, your brand, or what makes you special.</p>"
        },
        {
          "type":"header",
          "content":"Images"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "image_link",
          "label": "Image link"
        },
        {
          "type": "header",
          "content": "Button"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Text"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Link"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "Style",
          "default": "primary",
          "options": [
            { "label": "Primary", "value": "primary" },
            { "label": "Secondary", "value": "secondary" }
          ]
        }
      ]
    }
  ],
  "presets": [
    {
      "category": "Text",
      "name": "Product features",
      "blocks": [
        {
          "type": "text"
        },
        {
          "type": "text"
        },
        {
          "type": "text"
        }
      ]
    }
  ]
}
{% endschema %}

 

This is product feature liquid code.

 

I want to add this style code to this section

 

<section class="gallery-wrap container-wrap" id="gallery-module-{{ section.id }}" data-section-type="gallery" data-dots-style="{{ dots_style }}" style="background:{{ section.settings.custom_background_color }}">

 

and this schema code

{
	      "type": "color",
		  "id": "custom_background_color",
		  "label": "Background color",
		  "default": "#ffffff"
	      },

 

0 Likes

This is an accepted solution.

Hi Everyone,

 

I found the solution for this.

If anybody need to do this type of customization will help to do that.

Just send me your requirement and site link.

 

Thanks

0 Likes