Shopify themes, liquid, logos, and UX
Okay coding wizards. I followed a tutorial to add the option for background images for other sections. In my case, the image grid section specifically. I got it working, but I cannot get the image to fill the entire section (it's locked to the content background, not the section background. See screenshot).
If anyone can find my mistake in the code, or know the workaround for this, I'd greatly appreciate it.
Theme: Yuva
<div class="{% if section.settings.enable-background %}add-background-{{ section.id }} {% endif %}container sm-container"> <div class="yv-images-grid-container {{ section.settings.content_position }}-content"> <div class="yv-images-grid-content-wrapper"> <div class="yv-images-grid-content"> {% if section.settings.heading != blank %} <{{ section.settings.seo_heading }} class="{{ section.settings.heading_size }} yv-images-grid-content-heading">{{ section.settings.heading }}</{{ section.settings.seo_heading }}> {% endif %} {% if section.settings.description != blank %} <div class="yv-images-grid-content-text"> {{ section.settings.description }} </div> {% endif %} {% if section.settings.btn_text != blank and section.settings.btn_link != blank %} <div class="yv-images-grid-buttons"> <a class="{% if section.settings.btn_as_link == true %}link{% else %}button small-btn m-small-btn{% endif %}" href="{{ section.settings.btn_link }}" > {{ section.settings.btn_text }} </a> </div> {% endif %} </div> </div> <div class="yv-images-grid-image-wrapper"> <div class="yv-images-grid-image-body" style="padding-bottom:{{ section.settings.image_height }}%"> <div class="yv-images-grid-image-list with-3-items"> {% for block in section.blocks %} <div class="yv-images-grid-image-list-item"> <div class="image-wrapper" style="padding-bottom:{{ section.settings.image_height }}%"> {% if block.settings.image != blank %} {% render 'lazy-image', image: block.settings.image %} {% else %} {{ 'collection-1' | placeholder_svg_tag: 'placeholder-svg' }} {% endif %} </div> </div> {% endfor %} </div> </div> </div> </div> </div> <style> {% if section.settings.enable-background %} .add-background-{{ section.id }}{ background-image: url({{ section.settings.enable-background-image | img_url: 'master' | width: 1440, height: 600 }}); background-size: cover; background-position: center center; background-attachment: local; } {% endif %} #shopify-section-{{ section.id }}.shopify-section { background:var(--{{- section.settings.bgcolor -}}ColorBody); padding-top:{{ section.settings.top_space_desktop }}px; padding-bottom:{{ section.settings.bottom_space_desktop }}px; {%- unless section.settings.bgcolor == 'primary' or section.settings.bgcolor == 'gradient' -%} --colorTextBody:var(--{{- section.settings.bgcolor -}}colorTextBody); --heading_color:var(--{{- section.settings.bgcolor -}}_heading_color); --primaryColorBody:var(--{{- section.settings.bgcolor -}}ColorBody); --colorLightTextBody:var(--{{- section.settings.bgcolor -}}ColorLightTextBody); --colorXlightTextBody:var(--{{- section.settings.bgcolor -}}ColorXlightTextBody); {%- endunless -%} } @media only screen and (max-width:991px) { #shopify-section-{{ section.id }}.shopify-section{ padding-top:{{ section.settings.top_space_mobile }}px; padding-bottom:{{ section.settings.bottom_space_mobile }}px; } } {% if section.settings.section_visibility == 'large' %} @media (max-width: 767px) { #shopify-section-{{ section.id }}{ display: none !important; } } {% elsif section.settings.section_visibility == 'small' %} @media (min-width: 768px) { #shopify-section-{{ section.id }}{ display: none !important; } } {% endif %} </style> {% schema %} { "name": "t:sections.image-grid.name", "tag": "section", "class": "yv-images-grid-section", "settings": [ { "type":"checkbox", "id":"enable-background", "label": "Enable Background Image" }, { "type":"image_picker", "id":"enable-background-image", "label": "Select Background Image" }, { "type": "select", "id": "content_position", "label": "t:sections.image-grid.settings.content_position.label", "default": "left", "options": [ { "value": "left", "label": "t:sections.image-grid.settings.content_position.options.left.label" }, { "value": "right", "label": "t:sections.image-grid.settings.content_position.options.right.label" } ] }, { "type": "select", "id": "image_height", "label": "t:sections.image-grid.settings.height.label", "default": "130", "options": [ { "value": "70", "label": "t:common.image_height.options.landscape.label" }, { "value": "130", "label": "t:common.image_height.options.portrait.label" }, { "value": "100", "label": "t:common.image_height.options.square.label" } ] }, { "type": "text", "label": "t:sections.image-grid.settings.heading.label", "id": "heading", "default": "Heading" }, { "type": "select", "id": "seo_heading", "label": "t:common.header.heading_tag.label", "info": "t:common.header.heading_tag.info", "default": "h2", "options": [ { "value": "h1", "label": "t:common.header.heading_tag.options.h1.label" }, { "value": "h2", "label": "t:common.header.heading_tag.options.h2.label" }, { "value": "h3", "label": "t:common.header.heading_tag.options.h3.label" }, { "value": "h4", "label": "t:common.header.heading_tag.options.h4.label" }, { "value": "h5", "label": "t:common.header.heading_tag.options.h5.label" }, { "value": "h6", "label": "t:common.header.heading_tag.options.h6.label" } ] }, { "type": "select", "id": "heading_size", "default": "h2", "label": "t:common.heading_size.label", "options": [ { "value": "h5", "label": "t:common.heading_size.options.small.label" }, { "value": "h4", "label": "t:common.heading_size.options.medium.label" }, { "value": "h2", "label": "t:common.heading_size.options.large.label" } ] }, { "type": "richtext", "label": "t:sections.image-grid.settings.description.label", "id": "description", "default": "<p>To provide clients insight into your brand, pair words with any image. Here you can tell a narrative, explain a product feature, or introduce a new campaign.</p>" }, { "type":"header", "content":"t:common.header.button_section.label" }, { "type":"checkbox", "id":"btn_as_link", "default": false, "label": "t:sections.image-grid.settings.btn_as_link.label" }, { "type": "text", "id": "btn_text", "default": "Button text", "label": "t:sections.image-grid.settings.text.label" }, { "type": "url", "id": "btn_link", "label": "t:sections.image-grid.settings.btn_link.label" }, { "type": "header", "content": "t:common.header.color_section.label" }, { "type": "select", "id": "bgcolor", "label": "t:common.header.background_section.label", "default": "primary", "options": [ { "value": "primary", "label": "t:common.header.primary.label" }, { "value": "secondary", "label": "t:common.header.secondary.label" }, { "value": "tertiary", "label": "t:common.header.tertiary.label" }, { "value": "quaternary", "label": "t:common.header.quaternary.label" }, { "value": "gradient", "label": "t:common.header.gradient.label" } ] }, { "type": "select", "id": "section_visibility", "label": "t:common.section_visibility.label", "default": "always", "options": [ { "label": "t:common.section_visibility.options.always.label", "value": "always" }, { "label": "t:common.section_visibility.options.small_devices.label", "value": "small" }, { "label": "t:common.section_visibility.options.large_devices.label", "value": "large" } ] }, { "type": "header", "content": "t:common.header.space_section.label" }, { "type": "range", "id": "top_space_desktop", "label": "t:common.top_space_desktop.label", "default": 30, "min": 0, "max": 100, "step": 5 }, { "type": "range", "id": "bottom_space_desktop", "label": "t:common.bottom_space_desktop.label", "default": 0, "min": 0, "max": 100, "step": 5 }, { "type": "range", "id": "top_space_mobile", "label": "t:common.top_space_mobile.label", "default": 30, "min": 0, "max": 100, "step": 5 }, { "type": "range", "id": "bottom_space_mobile", "label": "t:common.bottom_space_mobile.label", "default": 30, "min": 0, "max": 100, "step": 5 } ], "blocks": [ { "type": "image", "name": "t:sections.image-grid.blocks.name", "limit": 3, "settings": [ { "type": "image_picker", "id": "image", "label": "t:sections.image-grid.blocks.settings.image.label" } ] } ], "presets": [ { "name": "t:sections.image-grid.presets.name", "blocks": [ { "type": "image" }, { "type": "image" }, { "type": "image" } ] } ] } {% endschema %}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025