Hi,
On the Dawn theme, I would like my featured collection section to have the option to upload a different image to what is being pulled in automatically from the product page. How can I do this best?
Thanks so much!
2 Likes
Hi @INFRA ,
I’ve created a solution for your request to use different images in the featured collection section than what’s automatically pulled from the product pages.
I’ve developed a custom section file that extends the standard Dawn featured collection functionality while giving you complete control over which images appear. This custom section allows you:
- Upload custom images for any product in your featured collection
- Maintain all standard features of the Dawn featured collection section
- Easily manage which products show custom images through the theme editor
How to Use It
Once I implement this solution for you, here’s how you’ll be able to customize your featured collections:
- From the theme editor, add the “Custom Featured Collection” section
- Select which collection you want to feature
- Add “Product Custom Image” blocks for each product you want to customize
- For each block, select the specific product and upload your preferred image
The best part is that you can make these changes anytime through the theme editor without needing any further development work.
Here’s the code:
{% comment %}
Custom Featured Collection Section with Custom Image Upload
This section allows merchants to display a featured collection with the option to
upload a custom image instead of using the product's default image.
{% endcomment %}
{{ 'section-featured-collection.css' | asset_url | stylesheet_tag }}
{%- 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;
}
}
/* Custom styles for the custom image feature */
.custom-featured-collection__product-card {
position: relative;
}
.custom-featured-collection__custom-image {
position: relative;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.custom-featured-collection__custom-image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
{%- endstyle -%}
## {{ section.settings.title | escape }}
{%- 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 section.settings.collection.all_products_count > section.settings.products_to_show -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{%- if section.settings.show_view_all and section.settings.collection.all_products_count > section.settings.products_to_show -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{% schema %}
{
"name": "Custom Featured Collection",
"tag": "section",
"class": "section",
"settings": [
{
"type": "text",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.settings.title.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": 25,
"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": "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": "rounded",
"label": "t:sections.all.image_shape.options__8.label"
},
{
"value": "square",
"label": "t:sections.all.image_shape.options__9.label"
},
{
"value": "circle",
"label": "t:sections.all.image_shape.options__10.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.label",
"info": "t:sections.all.image_shape.info"
},
{
"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_add.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"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
},
{
"type": "header",
"content": "Custom Images (Will be populated based on collection selection)"
}
],
"blocks": [
{
"type": "product_image",
"name": "Product Custom Image",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
},
{
"type": "image_picker",
"id": "custom_image",
"label": "Custom Image"
}
]
}
],
"presets": [
{
"name": "Custom Featured Collection",
"settings": {
"products_to_show": 4,
"columns_desktop": 4,
"image_ratio": "square",
"collection": "",
"show_view_all": true,
"swipe_on_mobile": false
}
}
]
}
{% endschema %}
Would you like me to implement this solution for you? If so, I can make the necessary changes to your theme right away. If you have any questions or would like to see examples of how this will look, please let me know.
Best regards,
Shubham | Untechnickle