Hi,
Hi there! The featured collection section in Dawn pulls products directly from your collection using the collection’s default sort order. This means that even though you can change the order in your collections settings, the homepage will always display them in that same order.
A more flexible solution is to use a custom section that lets you manually select and arrange which products appear on your homepage. This way, you can reorder products exactly how you want without altering your collection’s order.
I actually have a custom section that does this and would be happy to provide it, you just need to go to edit code then add new section, and paste the code bellow
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{% endif %}
{%- unless section.settings.quick_add == 'none' -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
<script src="{{ 'quick-add-bulk.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quantity-popover.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'price-per-item.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'quick-order-list.js' | asset_url }}" defer="defer"></script>
{%- 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 blocks_count = section.blocks.size
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and blocks_count > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = false
if section.settings.enable_desktop_slider and blocks_count > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} isolate gradient">
<div class="collection{% if section.settings.quick_add == 'bulk' %} collection-quick-add-bulk{% endif %} section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}" id="collection-{{ section.id }}" data-id="{{ section.id }}">
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
{% if section.settings.title != blank %}
<h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.title }}
</h2>
{% endif %}
{% if section.settings.description != blank %}
<div class="collection__description {{ section.settings.description_style }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.description }}
</div>
{% endif %}
</div>
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul id="Slider-{{ section.id }}" data-id="{{ section.id }}" class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}" role="list" aria-label="{{ 'general.slider.name' | t }}">
{% assign skip_card_product_styles = false %}
{% for block in section.blocks %}
{% if block.type == 'product' and block.settings.product != blank %}
<li id="Slide-{{ section.id }}-{{ forloop.index }}" class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}" {% if settings.animations_reveal_on_scroll %} data-cascade style="--animation-order: {{ forloop.index }};" {% endif %}>
{% assign product = block.settings.product %}
{% render 'card-product',
card_product: product,
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,
section_id: section.id,
quick_add: section.settings.quick_add
%}
</li>
{% assign skip_card_product_styles = true %}
{% endif %}
{% endfor %}
</ul>
{% if show_mobile_slider or show_desktop_slider %}
<div class="slider-buttons">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="Slider-{{ section.id }}">
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="Slider-{{ section.id }}">
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
</div>
{% endif %}
</slider-component>
{% if section.settings.image_shape == 'arch' %}
{{ 'mask-arch.svg' | inline_asset_content }}
{% endif %}
</div>
</div>
{% schema %}
{
"name": "Manual Featured Products",
"tag": "section",
"class": "section",
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Featured Products",
"label": "Title"
},
{
"type": "richtext",
"id": "description",
"label": "Description"
},
{
"type": "select",
"id": "heading_size",
"options": [
{ "value": "h2", "label": "Heading 2" },
{ "value": "h1", "label": "Heading 1" },
{ "value": "h0", "label": "Heading 0" },
{ "value": "hxl", "label": "Heading XL" },
{ "value": "hxxl", "label": "Heading XXL" }
],
"default": "h1",
"label": "Heading Size"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 4,
"label": "Columns on Desktop"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "Columns on Mobile",
"options": [
{ "value": "1", "label": "1 Column" },
{ "value": "2", "label": "2 Columns" }
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "Enable Swipe on Mobile"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"default": false,
"label": "Enable Desktop Slider"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width Section",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "Show 'View All' Button"
},
{
"type": "select",
"id": "view_all_style",
"label": "View All Button Style",
"options": [
{ "value": "link", "label": "Link" },
{ "value": "outline", "label": "Outline" },
{ "value": "solid", "label": "Solid" }
],
"default": "solid"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{ "value": "adapt", "label": "Adapt" },
{ "value": "portrait", "label": "Portrait" },
{ "value": "square", "label": "Square" }
],
"default": "adapt",
"label": "Image Ratio"
},
{
"type": "select",
"id": "image_shape",
"options": [
{ "value": "default", "label": "Default" },
{ "value": "arch", "label": "Arch" },
{ "value": "blob", "label": "Blob" },
{ "value": "chevronleft", "label": "Chevron Left" },
{ "value": "chevronright", "label": "Chevron Right" },
{ "value": "diamond", "label": "Diamond" },
{ "value": "parallelogram", "label": "Parallelogram" },
{ "value": "round", "label": "Round" }
],
"default": "default",
"label": "Image Shape",
"info": "Select the shape of product images"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "Show Secondary Image"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "Show Vendor"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "Show Rating",
"info": "Display product ratings"
},
{
"type": "select",
"id": "quick_add",
"default": "none",
"label": "Quick Add",
"info": "Enable quick add functionality",
"options": [
{ "value": "none", "label": "None" },
{ "value": "standard", "label": "Standard" },
{ "value": "bulk", "label": "Bulk" }
]
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding Top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding Bottom",
"default": 36
}
],
"blocks": [
{
"type": "product",
"name": "Product",
"settings": [
{
"type": "product",
"id": "product",
"label": "Select Product"
}
]
}
],
"max_blocks": 25,
"presets": [
{
"name": "Manual Featured Products"
}
]
}
{% endschema %}
Shopify Partner/Developer | Helping eCommerce stores thrive
• Need expert Shopify help?
• Custom design, advanced coding & store modifications
• Quick quote – email me: info@sabrihamid.com | Timezone: GMT+1
