Related products section now showing correctly

Shopify Discussion
, , , ,
1

image
image362×395 38.8 KB

Can someone help me with this code the product cards are missing spacing in tablet and mobile display

{{ ‘component-card.css’ | asset_url | stylesheet_tag }}
{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘section-related-products.css’ | asset_url | stylesheet_tag }}

{% if section.settings.image_shape == ‘blob’ %}
{{ ‘mask-blobs.css’ | asset_url | stylesheet_tag }}
{%- endif -%}

{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

.section-{{ section.id }}-padding .product-grid {
display: flex;
overflow-x: auto;
overflow-y: hidden;
gap: 0.75rem;
list-style: none;
padding: 0;
margin: 0;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}

.section-{{ section.id }}-padding .product-grid .grid__item {
flex: 0 0 calc(50% - 0.375rem);
min-width: calc(50% - 0.375rem);
scroll-snap-align: start;
}

.section-{{ section.id }}-padding .product-grid .grid__item:not(:last-child) {
margin-right: 0.75rem;
}

@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}

.section-{{ section.id }}-padding .product-grid .grid__item {
  flex: 0 0 calc(25% - 1.25rem);
  min-width: calc(25% - 1.25rem);
}

.section-{{ section.id }}-padding .product-grid .grid__item:not(:last-child) {
  margin-right: 1.5rem;
}

.section-{{ section.id }}-padding .product-grid {
  gap: 0;
}

}
{%- endstyle -%}

{% if recommendations.performed and recommendations.products_count > 0 %}

{{ section.settings.heading }}

    {% assign skip_card_product_styles = false %} {% for recommendation in recommendations.products %}
  • {% render 'card-product', card_product: recommendation, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, skip_styles: skip_card_product_styles %}
    • {%- assign skip_card_product_styles = true -%} {% endfor %}
{% endif %} {% if section.settings.image_shape == 'arch' %} {{ 'mask-arch.svg' | inline_asset_content }} {%- endif -%}

{% schema %}
{
“name”: “t:sections.related-products.name”,
“tag”: “section”,
“class”: “section”,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:sections.related-products.settings.paragraph__1.content”
},
{
“type”: “inline_richtext”,
“id”: “heading”,
“default”: “t:sections.related-products.settings.paragraph__1.default”,
“label”: “t:sections.related-products.settings.heading.label”
},
{
“type”: “select”,
“id”: “heading_size”,
“options”: [
{
“value”: “h2”,
“label”: “t:sections.all.heading_size.options__1.label”
},
{
“value”: “h1”,
“label”: “t:sections.all.heading_size.options__2.label”
},
{
“value”: “h0”,
“label”: “t:sections.all.heading_size.options__3.label”
},
{
“value”: “hxl”,
“label”: “t:sections.all.heading_size.options__4.label”
},
{
“value”: “hxxl”,
“label”: “t:sections.all.heading_size.options__5.label”
}
],
“default”: “h1”,
“label”: “t:sections.all.heading_size.label”
},
{
“type”: “range”,
“id”: “products_to_show”,
“min”: 2,
“max”: 10,
“step”: 1,
“default”: 4,
“label”: “t:sections.related-products.settings.products_to_show.label”
},
{
“type”: “range”,
“id”: “columns_desktop”,
“min”: 1,
“max”: 6,
“step”: 1,
“default”: 4,
“label”: “t:sections.related-products.settings.columns_desktop.label”
},
{
“type”: “select”,
“id”: “columns_mobile”,
“default”: “2”,
“label”: “t:sections.related-products.settings.columns_mobile.label”,
“options”: [
{
“value”: “1”,
“label”: “t:sections.related-products.settings.columns_mobile.options__1.label”
},
{
“value”: “2”,
“label”: “t:sections.related-products.settings.columns_mobile.options__2.label”
}
]
},
{
“type”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“info”: “t:sections.all.colors.has_cards_info”,
“default”: “scheme-1”
},
{
“type”: “header”,
“content”: “t:sections.related-products.settings.header__2.content”
},
{
“type”: “select”,
“id”: “image_ratio”,
“options”: [
{
“value”: “adapt”,
“label”: “t:sections.related-products.settings.image_ratio.options__1.label”
},
{
“value”: “portrait”,
“label”: “t:sections.related-products.settings.image_ratio.options__2.label”
},
{
“value”: “square”,
“label”: “t:sections.related-products.settings.image_ratio.options__3.label”
}
],
“default”: “adapt”,
“label”: “t:sections.related-products.settings.image_ratio.label”
},
{
“type”: “select”,
“id”: “image_shape”,
“options”: [
{
“value”: “default”,
“label”: “t:sections.all.image_shape.options__1.label”
},
{
“value”: “arch”,
“label”: “t:sections.all.image_shape.options__2.label”
},
{
“value”: “blob”,
“label”: “t:sections.all.image_shape.options__3.label”
},
{
“value”: “chevronleft”,
“label”: “t:sections.all.image_shape.options__4.label”
},
{
“value”: “chevronright”,
“label”: “t:sections.all.image_shape.options__5.label”
},
{
“value”: “diamond”,
“label”: “t:sections.all.image_shape.options__6.label”
},
{
“value”: “parallelogram”,
“label”: “t:sections.all.image_shape.options__7.label”
},
{
“value”: “round”,
“label”: “t:sections.all.image_shape.options__8.label”
}
],
“default”: “default”,
“label”: “t:sections.all.image_shape.label”
},
{
“type”: “checkbox”,
“id”: “show_secondary_image”,
“default”: false,
“label”: “t:sections.related-products.settings.show_secondary_image.label”
},
{
“type”: “checkbox”,
“id”: “show_vendor”,
“default”: false,
“label”: “t:sections.related-products.settings.show_vendor.label”
},
{
“type”: “checkbox”,
“id”: “show_rating”,
“default”: false,
“label”: “t:sections.related-products.settings.show_rating.label”,
“info”: “t:sections.related-products.settings.show_rating.info”
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
]
}
{% endschema %}

2

Hey @Ecomowner,

The requested changes requires to do the custom code in your theme file.

Could you please share your store url along with the collab code so that I can take a look and do the requested changes.

Thanks

3

Hey! I’ve seen this spacing issue a few times — it usually happens because of how the grid gap and margin rules interact in the product section CSS.
From your code, it looks like the spacing values on tablet and mobile are being overridden by the desktop media query.

I can take a quick look inside your store to identify the exact CSS causing the spacing collapse and fix it directly in your theme files, it’s a small adjustment once located.

If you’re comfortable with that, just send me a staff access invite or your collaboration code (you can remove it anytime after I’m done).
And i will need your store link also
Which theme are you using currently?