Move Collection List Controls and delete pagination

[ProconMarketing]

I would like to move my collection list arrows upward to the edge of the screen and make them bigger. 

Please see how my controls appear on my slideshow for reference (I want them exactly like this). Here is the link: https://8ae3b9-27.myshopify.com/

Also, on mobile, I do not want any controls or pagination at all.

I do not want the pagination below the collection lists. 

I had code to remove the controls, but then I added the code to move the controls higher on the slideshow and now its added the controls to the collection lists as well. 

Please help. 

[Made4uo-Ribe · Accepted solution]

Hi @ProconMarketing 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection-list-wrapper button.slider-button.slider-button--prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.collection-list-wrapper .slider-button .icon {
    height: 1.6rem;
}

.collection-list-wrapper button.slider-button.slider-button--next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.collection-list-wrapper .slider-counter.caption {
    display: none;
}

• And Save.
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[Shadab_dev]

Hey. its the guy who helped you with displaying your menu horizontally. Thank you for marking it as a solution. As for your query and any further help on theme customizations please reach out. Of course will be charging my service fee for my time. But if someone from the community answers your query then good for you.

[Ahsan_ANC]

Hi @ProconMarketing please share your store preview url or theme you are using 

[ProconMarketing]

https://8ae3b9-27.myshopify.com/

Dawn theme. 

Thanks!

[Ahsan_ANC]

to remove on mobile you can add this code at the bottom of base.css

@media only screen and (max-width: 768px){
#Slider-template--17516761284785__collection_list_YnwMjn{
 display:none !important;
}
}

[Made4uo-Ribe · Accepted solution]

Hi @ProconMarketing 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.collection-list-wrapper button.slider-button.slider-button--prev {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.collection-list-wrapper .slider-button .icon {
    height: 1.6rem;
}

.collection-list-wrapper button.slider-button.slider-button--next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.collection-list-wrapper .slider-counter.caption {
    display: none;
}

• And Save.
• Result:
  

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ProconMarketing]

Thanks! Worked perfectly. Can you please help me make them slightly wider? I'd like them to be as wide as the arrows on my slideshow (they must be in-line). 

Please help if possible.

[Made4uo-Ribe]

It needs to wider the collection if you like them align to the slideshow banner.

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[ProconMarketing]

Can they not be wider than the collection? I'd like them to appear in the open white spaces on the outside of the collection list, on the edge of the screen.

Exactly like this: 

Please. 

[Made4uo-Ribe · Accepted solution]

Please, add this one. 

@media only screen and (min-width: 749px){
.collection-list-wrapper button.slider-button.slider-button--prev {
    left: -35px;
}

.collection-list-wrapper button.slider-button.slider-button--next {
    right: -35px; 
}

.collection-list-wrapper .slider-button .icon {
    color: black;
}
.slider-button[disabled] .icon {
    color: rgba(var(--color-foreground), .3) !important;
    cursor: not-allowed;
}

.section-template--17516761284785__collection_list_YnwMjn-padding .slider-button .icon {
    color: white; 
}
}

And Save. 

Result:

Note: On the mobile screen the arrow will be inside.

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[ProconMarketing]

Thanks! I really appreciate your help. 

[Made4uo-Ribe]

Welcome!

[ProconMarketing]

Hi again @Made4uo-Ribe , would you mind helping me achieve this same control layout for my featured collection section?

Please. 

[Made4uo-Ribe]

Which collection your referring to? 

[ProconMarketing]

On this page: https://8ae3b9-27.myshopify.com/collections/browse-by-brand

You will see that the top is the collection list that you helped me design, and under it is a bunch of collection lists that i would like to design the same way please. 

[Made4uo-Ribe]

The code that I provide is for all the collect list slide. Seems like you hide theme before, the some code in the theme.liquid. 

Browse by brand folder, it been scattered all over your collection list folder. You to take that out. 

[ProconMarketing]

Sorry, what I meant is that I'd like to design the featured collections the same way that you helped me design the collection lists. 

Thats what I mean. 

If you could please help. 

Thanks. 

[ProconMarketing]

Sorry for the back and forth