Hi Fellow Developers,
I am trying to figure out how to pull out the shopify id of App Wrapper so that the padding top and padding-bottom is part of the theme setting
Below is what I am trying to achieved. This is a “logo-list” section, it has a background for the section itself and the all spacing is for padding of section
If you gonna check it on google dev tools this is how it looks like
Now I am trying to have this features in App Wrapper for app widgets, that it gives a background color for section. I managed to have a background color but the problem the background color is just placed around the media carousel, not the entire section(check image below)
This is the tricky part, If I check it google dev tools the background color is already in section based on the style, check image below
Now I am sharing the liquid code of “logo-list” and “app” as well
indez__logo-list.liquid
{% comment %}
** Logo list **
{% endcomment %}
{% comment %} Is the color set to transparent? {% endcomment %}
{%- assign background_alpha = section.settings.background | color_extract: 'alpha' -%}
{%- assign gradient_alpha = section.settings.gradient | color_extract: 'alpha' -%}
{% comment %} Section specific CSS {% endcomment %}
{% capture section_css -%}
.section {
background-image: linear-gradient({{ section.settings.gradient_rotation }}deg, rgba(255,255,255,0), {{ section.settings.gradient }});
background-color: {%- if background_alpha != 0 -%}{{ section.settings.background }}{%- endif -%};
}
{%- endcapture -%}
{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
padding-left: {{ section.settings.padding_left }}px;
padding-right: {{ section.settings.padding_right }}px;
{% if section.settings.width == 'wide' %}
width: 100%;
{% elsif section.settings.width == 'half' %}
width: 50%;
{% endif %}
}
{% render 'css-loop',
css: section_css,
id: section.id
%}
{% render 'css-loop',
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}
{% comment %} HTML markup {% endcomment %}
{% schema %}
{
"name": "Logo list",
"class": "logo-list",
"max_blocks": 20,
"settings": [
{
"type": "range",
"id": "logos_per_row",
"label": "Logos per row",
"min": 1,
"max": 8,
"default": 5
},
{
"type": "select",
"id": "logo_size",
"label": "Logo size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "header",
"content": "Background"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"step": 10,
"default": 0,
"unit": "deg"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"default": "standard",
"options": [
{
"value": "half",
"label": "Half"
},
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
]
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_left",
"label": "Left spacing",
"min": 0,
"max": 80,
"default": 0,
"unit": "px"
},
{
"type": "range",
"id": "padding_right",
"label": "Right spacing",
"default": 0,
"min": 0,
"max": 80,
"unit": "px"
},
{
"type": "select",
"id": "animation",
"label": "Animation",
"default": "none",
"options": [
{
"value": "none",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade in"
},
{
"value": "fadeInDown",
"label": "Fade in down"
},
{
"value": "fadeInLeft",
"label": "Fade in left"
},
{
"value": "fadeInRight",
"label": "Fade in right"
},
{
"value": "slideInLeft",
"label": "Slide in left"
},
{
"value": "slideInRight",
"label": "Slide in right"
},
{
"value": "zoomIn",
"label": "Zoom in"
}
]
},
{
"type": "header",
"content": "Advanced"
},
{
"type": "paragraph",
"content": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"blocks": [
{
"type": "logo_image",
"name": "Logo",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "800 x 800px recommended"
},
{
"type": "url",
"id": "link",
"label": "Link"
}
]
}
],
"presets": [
{
"name": "Logo list",
"category": "Image",
"blocks": [
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
},
{
"type": "logo_image"
}
]
}
]
}
{% endschema %}
apps.liquid
{% comment %}
** Shopify App Wrapper **
{% endcomment %}
{% assign id = section.id %}
{% comment %}Layout{% endcomment %}
{% assign width = section.settings.width %}
{% assign animation = section.settings.animation | default: 'none' %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = section.settings.css_class %}
{% assign custom_css = section.settings.custom_css %}
{% comment %} Is the color set to transparent? {% endcomment %}
{%- assign background_alpha = section.settings.background | color_extract: 'alpha' -%}
{%- assign gradient_alpha = section.settings.gradient | color_extract: 'alpha' -%}
{% comment %} Section specific CSS {% endcomment %}
{% capture section_css -%}
.section {
background-image: linear-gradient({{ section.settings.gradient_rotation }}deg, rgba(255,255,255,0), {{ section.settings.gradient }});
background-color: {%- if background_alpha != 0 -%}{{ section.settings.background }}{%- endif -%};
}
{%- endcapture -%}
{% style %}
#shopify-section-{{ section.id }} {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
{% if width == 'wide' %}
width: 100%;
{% endif %}
}
{% render 'css-loop',
css: section_css,
id: section.id
%}
{% render 'css-loop',
css: section.settings.custom_css,
id: section.id
%}
{% endstyle %}
{% comment %} HTML markup {% endcomment %}
{% schema %}
{
"name": "App wrapper",
"settings": [
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "width",
"label": "Width",
"options": [
{
"value": "standard",
"label": "Standard"
},
{
"value": "wide",
"label": "Wide"
}
],
"default": "standard"
},
{
"type": "range",
"id": "padding_top",
"label": "Top spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "range",
"id": "padding_bottom",
"label": "Bottom spacing",
"min": 0,
"max": 80,
"default": 20,
"unit": "px"
},
{
"type": "header",
"content": "Advanced",
"info": "[Learn more](https://help.outofthesandbox.com/hc/en-us/articles/360022329373)"
},
{
"type": "header",
"content": "Background"
},
{
"type": "color",
"id": "background",
"label": "Background",
"default": "rgba(0,0,0,0)"
},
{
"type": "color",
"id": "gradient",
"label": "Gradient",
"default": "rgba(0,0,0,0)"
},
{
"type": "range",
"id": "gradient_rotation",
"label": "Gradient rotation",
"min": 0,
"max": 180,
"step": 10,
"default": 0,
"unit": "deg"
},
{
"type": "text",
"id": "css_class",
"label": "CSS Class"
},
{
"type": "textarea",
"id": "custom_css",
"label": "Custom CSS"
}
],
"blocks": [
{
"type": "@app"
}
],
"presets": [
{
"name": "App wrapper"
}
]
}
{% endschema %}
As you can see I do some copy and modify code from logo-list to apps, just to get background color.
I don’t know if you understand hoping some do.
This is preview link: https://9kraskd7ryhnftgc-27506769997.shopifypreview.com/,
BTW, this concern is in product page, you can go to product page check from there. As of now the background is transparent.
Looking forward for your help.
Kim