Hi! So I used the help on this page: Solved: Re: Move View All to Collection Name line - Dawn 14.0.0 - Shopify Community to get the view all to the same line as the collection title in Dawn 14.0.0. However, now the lining is off. Is there code that will allow me to change the height of the collection title more down, if and only if there is a view more for that featured collection on the homepage? Please refer to the picture:
Could please share your store’s URL?
@WalkYourStyle I believe what I need is a code that moves the collection name down only if there is a view more on that featured collection, if that kind of code is possible.
I found the solution to this. Can you please share your ‘featured-collection.liquid’ code so I can help you further?
@WalkYourStyle here it is:
{{ ‘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 }}
{%- endunless -%}
{%- if section.settings.quick_add == ‘standard’ -%}
{%- endif -%}
{%- if section.settings.quick_add == ‘bulk’ -%}
{%- 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 -%}
{%- if section.settings.show_view_all and more_in_collection -%}
{%- endif -%}
{{ section.settings.title }}
{%- 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 -%}
-
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
- {% 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, section_id: section.id, quick_add: section.settings.quick_add %} {%- else -%} {%- for i in (1..section.settings.columns_desktop) -%}
- {% liquid assign ridx = forloop.rindex case ridx when 5 assign ridx = 1 when 6 assign ridx = 2 endcase %} {%- assign placeholder_image = 'product-apparel-' | append: ridx -%} {% render 'card-product', show_vendor: section.settings.show_vendor, media_aspect_ratio: section.settings.image_ratio, image_shape: section.settings.image_shape, placeholder_image: placeholder_image %} {%- endfor -%} {%- endfor -%}
{% render 'icon-caret' %}
{%- endif -%}
1
/
{{ 'general.slider.of' | t }}
{{ products_to_display }}
{% render 'icon-caret' %}
{% if section.settings.image_shape == ‘arch’ %}
{% render ‘mask-arch’ %}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.featured-collection.name”,
“tag”: “section”,
“class”: “section”,
“disabled_on”: {
“groups”: [“header”, “footer”]
},
“settings”: [
{
“type”: “inline_richtext”,
“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”: 6,
“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”: “color_scheme”,
“id”: “color_scheme”,
“label”: “t:sections.all.colors.label”,
“info”: “t:sections.all.colors.has_cards_info”,
“default”: “scheme-1”
},
{
“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”: “round”,
“label”: “t:sections.all.image_shape.options__8.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”: “select”,
“id”: “quick_add”,
“default”: “none”,
“label”: “t:sections.main-collection-product-grid.settings.quick_add.label”,
“info”: “t:sections.main-collection-product-grid.settings.quick_add.info”,
“options”: [
{
“value”: “none”,
“label”: “t:sections.main-collection-product-grid.settings.quick_add.options.option_1”
},
{
“value”: “standard”,
“label”: “t:sections.main-collection-product-grid.settings.quick_add.options.option_2”
},
{
“value”: “bulk”,
“label”: “t:sections.main-collection-product-grid.settings.quick_add.options.option_3”
}
]
},
{
“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 %}
Can you please provide me again the code but use the ‘Code sample’ in the reply. Click on the 3 dots and then click on the ‘</>’ symbol and paste the code
1 Like
{{ '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 }}
{%- endunless -%}
{%- if section.settings.quick_add == 'standard' -%}
{%- endif -%}
{%- if section.settings.quick_add == 'bulk' -%}
{%- 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 }}
{%- 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 -%}
{% if section.settings.image_shape == 'arch' %}
{% render 'mask-arch' %}
{%- endif -%}
{% schema %}
{
"name": "t:sections.featured-collection.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"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": 6,
"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": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"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": "round",
"label": "t:sections.all.image_shape.options__8.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": "select",
"id": "quick_add",
"default": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.label",
"info": "t:sections.main-collection-product-grid.settings.quick_add.info",
"options": [
{
"value": "none",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_1"
},
{
"value": "standard",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_2"
},
{
"value": "bulk",
"label": "t:sections.main-collection-product-grid.settings.quick_add.options.option_3"
}
]
},
{
"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 %}
Instructions
-
Go to ‘Online Store’ → Theme → Edit Code
-
In the sections folder locate the file ‘featured-collection.liquid’
-
Copy the above’s file contents
-
In the sections folder create a new file called ‘featured-collection-backup.liquid’
-
Paste the contents inside the new file
-
Go to ‘featured-collection.liquid’ file
-
Just before this element
Add the below code
{% if section.settings.show_view_all and more_in_collection %}
{% endif %}
So after adding the code it should look like this
{% if section.settings.show_view_all and more_in_collection %}
{% endif %}
- Now just after this code
{% if section.settings.show_view_all and more_in_collection %}
{{ 'sections.featured_collection.view_all' | t }}
{% endif %}
Add this code
{% if section.settings.show_view_all and more_in_collection %}
{% endif %}
So after everything it should look like this
{% if section.settings.show_view_all and more_in_collection %}
{% endif %}
{% if section.settings.title != blank %}
##
{{ section.settings.title }}
{% 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 %}
{% if section.settings.show_view_all and more_in_collection %}
{% endif %}
-
Now you will have to add some css to make it look nice
-
In the assets folder of your themes’ code locate the file ‘base.css’
-
At the bottom of the file add the below code
.my-title-view-all-container{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
flex: 1;
margin-bottom: 0;
}
.right.collection__view-all {
flex: 1;
}
h2.title.inline-richtext.h0.scroll-trigger.animate--slide-in {
margin-bottom: 0;
}
Please if it doesn’t work. Show me the code changes you made so I can help you instantly.
1 Like
@WalkYourStyle it worked on desktop! How do I get it to work on mobile and all other devices? Additionally, should I delete the backup file or just keep it?
I made some changes to the css code. If you can update it please, and let me know?
1 Like
@WalkYourStyle sorry, the updated code to add to the end of base.css only make the desktop “view all” too high and the mobile is still down there
Replace the css code with this:
.my-title-view-all-container{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
flex: 1;
margin-bottom: 0 !important;
}
.right.collection__view-all {
flex: 1;
}
h2.title.inline-richtext.h0.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
And at the start of the ‘base.css’ file add this code
@media screen and (max-width: 989px){
.my-title-view-all-container {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
}
1 Like
@WalkYourStyle This is what it looks like on mobile now, it made the collection name awkwardly to the right, but the view all can be good if the collection name gets fixed:
Replace the last code you added at the start with this one
@media screen and (max-width: 989px){
.my-title-view-all-container {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.collection__title.title-wrapper.title-wrapper--no-top-margin.page-width.title-wrapper--self-padded-tablet-down {
flex: 1;
margin-bottom: 0 !important;
}
.right.collection__view-all {
flex: 1;
}
h2.title.inline-richtext.h0.scroll-trigger.animate--slide-in {
margin-bottom: 0 !important;
}
}
1 Like
@WalkYourStyle it now looks like this on mobile, you are very close! The collection name just has to be on one line and there should be a bit of room (padding) on the right of the “view all” to not push it to the complete edge of the phone:
You forgot to add the padding :). Copy and add it again.
1 Like
@WalkYourStyle Thanks so much! Such a lifesaver! Looks great now!
1 Like