Recycling a color section with liquid theme

Store Design
1

Hello :slightly_smiling_face:

One of my website uses Ella Theme and has the following color section code

sukalde_0-1653313315595.png
sukalde_0-1653313315595.png915×179 104 KB

{% if section.settings.enable %}

   

     {% if section.settings.title != blank %}
       ### {% include 'multilang' with section.settings.title %}
    
     {% endif %}
  

  
    

      {% for block in section.blocks %}
      {% assign productIndex = forloop.index | minus:1 %}
      {% assign delayTime = settings.time_lazy_load | times : productIndex %}
      - {% if block.settings.image != blank %}
                {%- assign img_url = block.settings.image | img_url: '200x' -%}
              
                {% else %}	
                90 x 90PX
                {% endif %}
            
          

        

        
            {% if block.settings.heading != blank %}			
          
              #### 
                {% include 'multilang' with block.settings.heading %}
            
          
            {% endif %}
        

      
      {% endfor %}
    

  

{% endif %}
{% schema %}
  {
    "name": "color",
	"max_blocks": 11,
    "settings": [
      {
        "type": "checkbox",
        "id": "enable",
        "label": "Enable",
        "default": true
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title",
        "default": "The Colors of Le Creuset"
      },
      {
        "type": "color",
        "id": "color_title",
        "label": "Color",
        "default": "#66a3a1"
      },
      {
        "type": "text",
        "id": "font_size_title",
        "label": "Font Size",
        "default": "23px"
      }
    ],
    "blocks": [      
      {
        "type": "color",
        "name": "Color",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image",
			"info": "Width: 380px recommended"
          },
		  {
			"type": "text",
			"id": "heading",
			"label": "Heading",
			"default": "Color Name"
		  },
    	  {
            "type": "color",
            "id": "color_heading",
            "label": "Color",
            "default": "#555"
          },
          {
            "type": "text",
            "id": "font_size_heading",
            "label": "Font Size",
            "default": "14px"
          },
          {
            "type": "url",
            "id": "custom_bottom_url",
            "label": "Collection Link"
          }
        ]
      }
    ]
  }
{% endschema %}

Can I use that same code to create the same section in my other website using Mosaic theme? I tried to do so and it gave me an error because it was missing a snippet.

sukalde_3-1653313783317.png
sukalde_3-1653313783317.png808×435 178 KB

I created the snippet copying the code from my other website and it worked, I was able to work on the section, but the code is not working properly.

sukalde_2-1653313727554.png
sukalde_2-1653313727554.png1299×584 321 KB

When I add the colors to the section, I can´t see them.

Should I do something else? I dont know because its not giving me any error

2

Hi @sukalde ,

That kind of feature is highly dependent on the theme setup with html classes, javascript and css code. So this will not work on a theme other than the Ella theme.

1 Like