Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
Solved! Go to the solution
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
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
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
@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:
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.
@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
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;
}
@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!
.collection__view-all a {
font-size: calc(var(--font-heading-scale) * 5.2rem);
}
@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
Same I want to explain collection title is using font size no height attribute used in it.
@Guleria I see. Is there any code that will allow me to manually change the height of the view all?
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;
}
@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.
@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?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024