Move the "View all" button from home page feature collection, Debut theme

Solved
Highlighted
Pathfinder
104 2 22

Hello Guys,

 

Can i move the "View all" Button that is apear under the images?

I want to move it on the top right of the feature collection..

 

Thanks,

Sermak 

0 Likes
Highlighted

Hello ,

Please share your site url.

So that i can check and let you know the exact solution here.

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Expert
3903 559 937

HI @Sermak 

Follow this:

1. Open section-> collection.liquid

2. Now find below code on page look like:

  {% if section.settings.show_view_all %}
    <hr class="hr--invisible" aria-hidden="true" />
    <div class="text-center">
      <a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
  {% endif %}

3. Now cut it and Find 'section-header' look like bellow:

    <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
    </div>

4. Now add add it inside to 2nd step code next to "<h2>{{ section.settings.title | escape }}</h2>" so it look like:

  <div class="section-header text-center">
      <h2>{{ section.settings.title | escape }}</h2>
      
  {% if section.settings.show_view_all %}
    <hr class="hr--invisible" aria-hidden="true" />
    <div class="text-center">
      <a href="{{ collection.url }}" class="btn" aria-label="{{ 'collections.general.view_all_label' | t: collection_name: collection.title }}">
        {{ 'collections.general.view_all' | t }}
      </a>
    </div>
  {% endif %}
    </div>

5. Now add this css in asset->theme.scss file at bottom:

#shopify-section-featured-collections .section-header  h2{display: initial;}
#shopify-section-featured-collections hr{display:none;}
#shopify-section-featured-collections .text-center:last-child{float:right;}

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Pathfinder
104 2 22

@Jasoliya  Hello

 

It move under the title of the feature collection now, but i want it us a underlined word on the rop right not the center..

like this 

Καταγραφήgt.PNG

0 Likes
Highlighted
Shopify Expert
3903 559 937

As i can see in your image button placed where you want. send me your store url 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Pathfinder
104 2 22

I sent you email @Jasoliya 

0 Likes
Highlighted
Shopify Expert
3903 559 937

This is an accepted solution.

Add this css:

Add this class 'cust_col'  with 'page-width ' in section-> collection.liquid 

 

.cust_col .section-header  h2{display: initial;}
.cust_col hr{display:none;}
.cust_col .text-center:last-child{float:right;}

 

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
New Member
2 0 0

I did follow all the steps but it is not working.

I added these under "theme.scss.liquid"  since there was no "theme.scss"

.cust_col .section-header h2{display: initial;}
.cust_col hr{display:none;}
.cust_col .text-center:last-child{float:right;}

#shopify-section-featured-collections .section-header h2{display: initial;}
#shopify-section-featured-collections hr{display:none;}
#shopify-section-featured-collections .text-center:last-child{float:right;}

 

View All button moved under the title, but I failed to float it to the Right side.

And if possible, instead of the large button, I want to make it a text file with underline as well.

 

Thank you in advance.

Capture.PNG

0 Likes
Highlighted
Shopify Expert
3903 559 937

Hi @yoonmo9 

have you followed this step:

Add this class 'cust_col'  with 'page-width ' in section-> collection.liquid 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
3 0 0

Hi,
I've just found these instructions as I've been trying to do this also.
I have managed to get the 'view all' to show above the collection title, in the centre.

I have followed your additional steps below, but it is still showing in the centre above the title.

I am very new to this, so maybe I've missed something basic.  Each time I attempt to copy and past your examples below, I end up with html actually showing on the page.

I have attached a screen shot of what it is currently looking like.  I too am wanting the 'view all' button to be on the right.

 

Capture.JPG

0 Likes