Move View All to Collection Name line - Dawn 14.0.0

Technical Q&A
, ,
1

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:

IMG_7855.jpg
IMG_7855.jpg2770×1194 597 KB

Thanks!

2

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.

1 Like
3

Hello @FloridaGlow ,

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

{%- if section.settings.show_view_all and more_in_collection -%}
      
        
          {{ 'sections.featured_collection.view_all' | t }}
        
      

    {%- endif -%}

Copy and cut it
Next search for this code


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

Thanks
4

@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:

IMG_7879.jpg
IMG_7879.jpg2847×1162 340 KB

5

Replace this line

with

If still its not aligned please share the store URL

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

6

@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

1 Like
7

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;
}

8

@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!

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

@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

11

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

12

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

13

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;
}

14

@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.

15

@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?