Dear community,
I am trying to add some whitespace left and right of my carousel display but only when the carousel is used in the featured collection section (and not e.g. on my product page image slider).
I have managed to add the space I want with the following CSS
@media (min-width: 902px) {
.product-slider .swiper-container {
padding-left: 10vw !important;
padding-right: 10vw !important;
padding-bottom: 0px;
}
}
The issue: this will apply the padding to all instances of the product slider. I would like to have it just for the featured-collection section.
How would I go about that? Is there a way to add a restriction to the CSS or can the CSS be placed as a style in the featured-collection section itself?
I also tried this in the featured collection section but without the desired effect:
Show More
{% style %} @media (min-width: 902px) { .product-slider .swiper-container { padding-left: 10vw !important; padding-right: 10vw !important; padding-bottom: 0px; } } {% endstyle %} {% endif %}
{% style %} {% if section.settings.color_scheme == "custom" %} .section-id-{{ section.id }} { background: {{ section.settings.color_bg }}; --cust-text-color: {{ section.settings.color_text }}; border-radius: 24px; } {% if section.settings.button_style == 'auto' %} #section-id-{{ section.id }} .button:hover { background-color: {{ section.settings.color_text }}; color: {{ section.settings.color_bg }}; border-color: {{ section.settings.color_bg }}; border-radius: 24px; } {% endif %} {% endif %} #section-id-{{ section.id }} .section-rich-text__image .rimage-outer-wrapper { width: {{ section.settings.height_mobile }}px; } @media (min-width: 768px) { #section-id-{{ section.id }} .section-rich-text__image .rimage-outer-wrapper { width: {{ section.settings.height_desktop }}px; } } @media (min-width: 768px) { #section-id-{{ section.id }} .h2 { {%- assign title_size_medium = section.settings.title_size | times: 0.7 -%} font-size: {{ title_size_medium }}px; } } @media (min-width: 992px) { #section-id-{{ section.id }} .h2 { font-size: {{ section.settings.title_size }}px; } } {% endstyle %}
{% if section.settings.title != blank or section.settings.subtitle !=blank %}## {{ section.settings.title | escape }} {% else %}
{% endif %}
{% if section.settings.subtitle != blank %}{% if section.settings.subtitle != blank %}## {{ section.settings.subtitle | escape }} {% else %}
{% endif %}
{% endif %}
{% if section.settings.show_view_all %} {{ 'collections.general.view_all' | t }} {% endif %} {% if section.settings.image != blank %}
{%- render 'responsive-image', image: section.settings.image -%}
{% endif %}
{% if section.settings.layout == 'carousel' %}
{% if section.settings.collection != blank %} {% assign collection = collections[section.settings.collection] %} {% for product in collection.products limit: 12 %}
{% assign animate_delay = forloop.index | times: 0.4 %} {% render 'product-block', product: product, product_class: product_class, i: forloop.index, animate: animate_delay, show_vendor: section.settings.show_vendor, show_custom_title: section.settings:show_custom_title, hide_swatches: section.settings.hide_swatches, hide_reviews: section.settings.hide_reviews %}
{% endfor %} {% else %} {% for i in (1..max_products) %}{% assign animate_delay = forloop.index | times: 0.4 %} {% render 'onboarding-product-block', i: forloop.index, product_class: product_class, animate: animate_delay %}
{% endfor %} {% endif %}
{% render 'svg-chevron-left' %} {% render 'svg-chevron-right' %}
{% else %}{% if section.settings.collection != blank %} {% assign collection = collections[section.settings.collection] %} {% for product in collection.products limit: max_products %} {% render 'product-block', product: product, product_class: product_class, animation_type: animation_type, i: forloop.index, show_vendor: section.settings.show_vendor, show_custom_title: section.settings:show_custom_title, animate: forloop.index, hide_swatches: section.settings.hide_swatches, hide_reviews: section.settings.hide_reviews %} {% endfor %} {% else %} {% for i in (1..max_products) %} {% assign animate_delay = forloop.index | times: 0.4 %} {% render 'onboarding-product-block', i: forloop.index, product_class: product_class, animate: animate_delay, animation_type: animation_type %} {% endfor %} {% endif %}
{% endif %}
{% if section.settings.show_policies %}
<small>Alle Preise inkl. MwSt. und Versand </small>
{% endif %} {% if section.settings.button_label != blank %}{{ section.settings.button_label | escape }}
{% endif %}
{% if section.settings.layout == 'carousel' %}
{% endif %} {% schema %} { "name": "Featured collection", "class": "section-featured-collection", "settings": [ { "type": "text", "id": "title", "label": "Heading", "default": "Featured collection" }, { "type": "text", "id": "subtitle", "label": "Subtitle", "default": "Subtitle" }, { "type": "range", "id": "title_size", "min": 20, "max": 100, "step": 2, "unit": "px", "label": "Heading & Subtitle text size", "default": 28 }, { "type": "image_picker", "id": "image", "label": "Image" }, { "type": "range", "id": "height_mobile", "min": 60, "max": 200, "step": 10, "unit": "px", "label": "Mobile image size", "default": 60 }, { "type": "range", "id": "height_desktop", "min": 60, "max": 400, "step": 20, "unit": "px", "label": "Desktop image size", "default": 60 }, { "type": "collection", "id": "collection", "label": "Collection" }, { "type": "select", "id": "layout", "label": "Layout", "options": [ { "value": "columns", "label": "Collage" }, { "value": "rows", "label": "Grid" }, { "value": "carousel", "label": "Carousel" } ], "default": "rows", "info": "Collage will only work when the 'Image shape' is set to Natural - in Products / Image shape" }, { "type": "checkbox", "id": "show_custom_title", "label": "Show custom title (metafield)", "default": false }, { "type": "checkbox", "id": "hide_reviews", "label": "Hide review stars", "default": false }, { "type": "checkbox", "id": "show_vendor", "label": "Show product vendor", "default": false }, { "type": "range", "id": "grid", "label": "Desktop products per row", "min": 2, "max": 4, "default": 3 }, { "type": "range", "id": "rows", "label": "Rows", "min": 1, "max": 4, "default": 2, "info": "Does not apply to carousel layout" }, { "type": "select", "id": "grid_mobile", "label": "Mobile products per row", "options": [ { "value": "1", "label": "1" }, { "value": "2", "label": "2" } ], "default": "2" }, { "type": "checkbox", "id": "smaller_tiles", "label": "Display smaller tiles on Desktop", "default": false, "info": "Setting is only relevant for 'Grid' Layout" }, { "type": "checkbox", "id": "hide_swatches", "label": "Hide color swatches", "default": false }, { "type": "checkbox", "id": "show_policies", "label": "Show Policies", "default": true }, { "type": "checkbox", "id": "show_view_all", "label": "Show 'View all' link", "default": true }, { "type": "checkbox", "id": "no_padding_top", "label": "Remove top spacing", "default": false }, { "type": "checkbox", "id": "no_padding_bottom", "label": "Remove bottom spacing", "default": false }, { "type": "checkbox", "id": "no_margin_top", "label": "Remove top margin", "default": false }, { "type": "radio", "id": "color_scheme", "label": "Color scheme", "default": "standard", "options": [ { "value": "standard", "label": "Standard" }, { "value": "alt", "label": "Alternate colors" }, { "value": "custom", "label": "Custom colors" } ] }, { "type": "color", "id": "color_bg", "label": "Custom background color" }, { "type": "color", "id": "color_text", "label": "Custom text color" }, { "type": "text", "id": "button_label", "label": "Button label" }, { "type": "url", "id": "link", "label": "Link" }, { "type": "select", "id": "text_alignment", "label": "Text alignment", "options": [ { "value": "left", "label": "Left" }, { "value": "center", "label": "Center" }, { "value": "right", "label": "Right" } ], "default": "center" }, { "type": "select", "id": "button_style", "label": "Button style", "default": "primary", "options": [ { "label": "Button - primary", "value": "primary" }, { "label": "Button - secondary", "value": "secondary" }, { "label": "Link", "value": "link" } ] } ], "presets": [ { "name": "Featured collection", "settings": {} } ], "templates": ["article", "index", "page", "product", "collection", "blog", "list-collections", "search", "404", "cart"] } {% endschema %} ```
I will appreciate any hints!
This is the preview to the site I am working on: https://rlpjv12t4kh4f4d5-60850798810.shopifypreview.com
I had the handle wrong and got it to work by using .product-list instead