Hey everyone!
In my featured collection section, I’ve added the option to have an image as the header rather than text. I’ve been super successful thus far as far as schema and having it appear on my site, but I’m not exactly sure how to code / where to put the @media screen part so that it’s responsive.
Thanks!
Below is the code from the featured.collection.liquid file.
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{%- if section.settings.enable_quick_add -%}
{%- 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;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- liquid
assign products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = false
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
{%- if section.settings.title != blank -%}
## {{ section.settings.title | escape }}
{%- endif -%}
{%- if section.settings.Image != blank -%}
{%- endif -%}
{%- if section.settings.description != blank or section.settings.show_description and section.settings.collection.description != empty -%}
{%- if section.settings.show_description -%}{{ section.settings.collection.description }}{%- else -%}{{ section.settings.description }}{% endif %}
{%- endif -%}
{%- if section.settings.show_view_all and more_in_collection -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{% schema %}
{
"name": "t:sections.featured-collection.name",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.label"
},
{
"type": "image_picker",
"id": "Image",
"label": "t:sections.featured-collection.settings.image.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"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "richtext",
"id": "description",
"label": "t:sections.featured-collection.settings.description.label"
},
{
"type": "checkbox",
"id": "show_description",
"label": "t:sections.featured-collection.settings.show_description.label",
"default": false
},
{
"type": "select",
"id": "description_style",
"label": "t:sections.featured-collection.settings.description_style.label",
"options": [
{
"value": "body",
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
}
],
"default": "body"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 12,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.featured-collection.settings.full_width.label",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "select",
"id": "view_all_style",
"label": "t:sections.featured-collection.settings.view_all_style.label",
"options": [
{
"value": "link",
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
},
{
"value": "outline",
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
},
{
"value": "solid",
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
}
],
"default": "solid"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.featured-collection.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.settings.swipe_on_mobile.label"
},
{
"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
}
],
"presets": [
{
"name": "t:sections.featured-collection.presets.name"
}
]
}
{% endschema %}