Move View All to Collection Name line - Dawn 14.0.0

[FloridaGlow]

Hey! I'm on Dawn 14.0.0 and want to change the placement of the "view all" on the homepage dealing with a featured collection. Please refer to the picture demonstrating what I would like to do:

Thanks!

[Victor]

Hi @FloridaGlow,

This change will likely require coding changes so I'd recommend reaching out to our support team to ask for their assistance. Our themes team can make changes to Shopify-made themes such as Dawn so this can be sent to them to review and if possible they can make this change. 

[Guleria · Accepted solution]

Hello @FloridaGlow ,

Edit Sections -> featured-collection.liquid
Search for this code

{%- if section.settings.show_view_all and more_in_collection -%}
      <div class="center collection__view-all">
        <a href="{{ section.settings.collection.url }}"
          class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
          aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
        >
          {{ 'sections.featured_collection.view_all' | t }}
        </a>
      </div>
    {%- endif -%}

Copy and cut it
Next search for this code

<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 %}">

and just above to it paste the code you copied in the first step.

Thanks

[FloridaGlow]

@Guleria Thanks! However, now it is centered. How can I align it with the collection title? The collection title is on the left and I want the view all on the right side but on the same line. Please refer to the picture:

 

[Guleria]

Replace this line 
<div class="center collection__view-all">
with 
<div class="right collection__view-all">

If still its not aligned please share the store URL

Don't forget to Like it and Mark it as Solution.

[FloridaGlow]

@Guleria just changed it but yeah still not aligned. I want it to be on the same line and have the same side padding to make it look even.

https://y4gicd6d8xurh2xj-57075630262.shopifypreview.com

[Guleria]

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

 .collection__view-all { 
padding: 0 5rem;
}

[FloridaGlow]

@Guleria that fixed the side padding, if you would be so kind to let me know how I can make the height the same as the collection name, that'd be greatly appriciated!

[Guleria]

.collection__view-all a {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
}

[FloridaGlow]

@Guleria that just made the font of the view all huge, the same as the collection name, but I want the font of the view all to stay how it was, I just want it the view all to be on the same line as the collection name, nothing with font size

[Guleria]

Same I want to explain collection title is using font size no height attribute used in it.

[FloridaGlow]

@Guleria I see. Is there any code that will allow me to manually change the height of the view all?

[Guleria]

You can make top and bottom space with padding here change 0 to 1rem or 2,3,4 a/to your need
 .collection__view-all { 
padding: 0 5rem;
}

[FloridaGlow]

@Guleria I don't understand, it seems to only change it sideways. I tried doing .collection__view-all {height: x} but that also changed the collection name and how far it was from the actual collection, so that didn't work.

[FloridaGlow]

@Guleria I understand the problem now. Is there code that can let me move the collection title down, but only collection titles that have a view all?