Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Move View All to Collection Name line - Dawn 14.0.0

Solved

Move View All to Collection Name line - Dawn 14.0.0

FloridaGlow
Explorer
92 0 11

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

Thanks!

Accepted Solution (1)

Guleria
Shopify Partner
3688 741 1038

This is an 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



- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

View solution in original post

Replies 14 (14)

Victor
Shopify Staff
2611 236 557

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. 

Victor | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Guleria
Shopify Partner
3688 741 1038

This is an 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



- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
FloridaGlow
Explorer
92 0 11

@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

Guleria
Shopify Partner
3688 741 1038

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.

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
FloridaGlow
Explorer
92 0 11

@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
Shopify Partner
3688 741 1038

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

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
FloridaGlow
Explorer
92 0 11

@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
Shopify Partner
3688 741 1038
.collection__view-all a {
    font-size: calc(var(--font-heading-scale) * 5.2rem);
}
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
FloridaGlow
Explorer
92 0 11

@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
Shopify Partner
3688 741 1038

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

 

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
FloridaGlow
Explorer
92 0 11

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

Guleria
Shopify Partner
3688 741 1038

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

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
FloridaGlow
Explorer
92 0 11

@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
Explorer
92 0 11

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