Hi Everyone.
I have been using a shella theme for my store and it has been great. Fast, looks fantastic.
However, since connecting dynamic images from the collections into a banner for the collections I have been getting bad CLS on mobile.
Viewing I can see that the Title and Description are loading last after the banner and product grid and that is pushing the product grid down and causing the problems.
Can anyone tell me how to load the description before the product grid please?
Thanks
Hi @RussellAlex ,
Thank you for reaching out to the Shopify Community!
Please share your store URL here so that we can check and provide a solution to you.
Thanks & Regards,
Ahsan ANC
Thank you Ahsan,
It is a mobile collection problem only. Great on desktop, great on home page.
please share the collection template liquid file.
What would the file likely to be called please?
I have been looking into the collection.json
it should look like collection-header liquid
I hope its OK but had to send to your email as it would not accept PNG.
Can’t find a file called that.
“sections”: {
“7eb69ddf-38b3-469a-911e-f14b3a3bf6c3”: {
“type”: “home-builder”,
“blocks”: {
“381f1eef-5556-4a5b-bb5c-118f6876e423”: {
“type”: “promobox”,
“settings”: {
“url”: “”,
“image”: “{{ collection.image }}”,
“image_size”: 550,
“image_mobile”: “{{ collection.image }}”,
“image_mobile_size”: 550,
“image_position_x”: 0,
“color_image_mask”: “”,
“image_mask_opacity”: 0.1,
“text_line_1”: “”,
“text_line_2”: “{{ block.settings.list_1.title }}”,
“text_line_3”: “”,
“style”: “6”,
“button_1”: “”,
“button_1_url”: “”,
“color_button_type_1”: “default”,
“button_2”: “Button #2 text”,
“button_2_url”: “”,
“color_button_type_2”: “default”,
“list_1”: “”,
“custom_html”: “”,
“video_external_url”: “”,
“video_mp4_url”: “”,
“video_autoplay”: false,
“video_controls”: false,
“type”: “type-1”,
“content_position”: “bottom_center”,
“content_align”: “center”,
“add_container”: false,
“content_width”: 0,
“text_width”: 0,
“height”: “auto”,
“min_height”: 0,
“size_of_column”: “auto”,
“visible”: “desktop_mobile”,
“parallax”: “disable”,
“animation_to”: “none”,
“animation_from”: “none”,
“animation_opacity”: “none”,
“animation_text”: “none”,
“color_text_1”: “”,
“color_text_2”: “”,
“color_text_3”: “”,
“color_text_bg”: “#fafafa”,
“color_curtain_bg”: “”,
“customization_class”: “”
}
}
},
“block_order”: [
“381f1eef-5556-4a5b-bb5c-118f6876e423”
],
“settings”: {
“title”: “”,
“container”: “fullwidth”,
“size_of_columns”: “1”,
“size_of_columns_mobile”: “1”,
“margins_for_columns”: “none”,
“align_of_columns”: “top_center”,
“disable_column_paddings”: false,
“precedence”: “”,
“customization_class”: “”
}
},
“add04a46-4407-4154-a4f3-9e3c2fd22d2b”: {
“type”: “spacer”,
“settings”: {
“margin_top”: 0,
“margin_bottom”: 0,
“margin_top_mobile”: 0,
“margin_bottom_mobile”: 0,
“container”: “boxed”,
“show_separator”: false,
“title”: “”
}
},
“1652268166a93d7f7e”: {
“type”: “collection-page-heading”,
“blocks”: {
“c3c2f346-548f-4fba-94a7-8f4600d9f959”: {
“type”: “title”,
“settings”: {
“for_collection”: “{{ collection }}”,
“desktop_title”: “title_with_description”,
“mobile_title”: “title_with_description”
}
}
},
“block_order”: [
“c3c2f346-548f-4fba-94a7-8f4600d9f959”
],
“settings”: {
“position”: “products_grid_width”,
“default_desktop_title”: “title”,
“default_mobile_title”: “title”,
“margins_for_columns”: “none”,
“disable_column_paddings”: false
}
},
“163409726484d77b6d”: {
“type”: “spacer”,
“disabled”: true,
“settings”: {
“margin_top”: 30,
“margin_bottom”: 60,
“margin_top_mobile”: 30,
“margin_bottom_mobile”: 0,
“container”: “boxed”,
“show_separator”: true,
“title”: “”
}
},
“product-grid”: {
“type”: “main-collection-product-grid”,
“blocks”: {
“16965e1c-70f3-4981-950d-436766d0e581”: {
“type”: “collections”,
“settings”: {
“title”: “COLLECTION”,
“default_state”: “close”,
“menu”: “”,
“show_collection_product_count”: false
}
},
“48ad317a-ffbe-487b-b9b8-4db5add49b84”: {
“type”: “filters”,
“settings”: {
“default_state”: “close”,
“layout”: “1_col”,
“max_column_size”: 8
}
},
“a76651dd-1cd6-4d78-8c4d-bc9a5854f2e8”: {
“type”: “filter_settings”,
“settings”: {
“filter_name”: “Size”,
“title”: “”,
“default_state”: “close”,
“make_as_color”: false,
“layout”: “2_col”,
“max_column_size”: 8
}
}
},
“block_order”: [
“16965e1c-70f3-4981-950d-436766d0e581”,
“48ad317a-ffbe-487b-b9b8-4db5add49b84”,
“a76651dd-1cd6-4d78-8c4d-bc9a5854f2e8”
],
“settings”: {
“container”: “boxed”,
“products_per_page”: 12,
“enable_default_filtering”: true,
“show_selected_filters_counter”: false,
“show_filter_product_count”: false,
“hide_disabled_filters”: true,
“make_availability_as_rounded”: true,
“price_filter_type”: “slider”,
“sort_by_visibility”: “desktop”,
“info_visibility”: “desktop”,
“view_length_visibility”: “hide”,
“enable_view_length_6”: true,
“enable_view_length_12”: true,
“enable_view_length_18”: true,
“enable_view_length_24”: true,
“enable_view_length_48”: false,
“default_view_length”: “12”,
“view_grid_visibility”: “desktop_n_mobile”,
“show_view_grid_1”: true,
“show_view_grid_2”: true,
“show_view_grid_3”: true,
“show_view_grid_4”: true,
“show_view_grid_6”: false,
“show_view_grid_list”: true,
“view_grid_list_design”: “1”,
“enable_grid_tooltip”: false,
“default_view_grid_xl”: “3”,
“default_view_grid_lg”: “3”,
“default_view_grid_md”: “3”,
“default_view_grid_sm”: “2”,
“default_view_grid_xs”: “2”,
“current_filters_visibility”: “mobile”,
“uppercase_filter_title”: true,
“show_filter_border”: true
}
}
},
“order”: [
“7eb69ddf-38b3-469a-911e-f14b3a3bf6c3”,
“1652268166a93d7f7e”,
“add04a46-4407-4154-a4f3-9e3c2fd22d2b”,
“163409726484d77b6d”,
“product-grid”
]
}