Shopify themes, liquid, logos, and UX
Hello, I wanted to limit my site to 1990px max-width because I was concerned about page speed. I want these slider buttons to be on the left and right side of the .product-grid, and I want them to stay centered if its on a larger screen, or scrolled out using 'control + mouse wheel' (which I've been generally using margin: 0 auto; to center my content).
My website is: https://mankave.store
and this is the CSS code for this section "component.slider.liquid" - I only changed the bottom part of the code: (It is sloppy because I've been messing with it for a while)
slider-component {
--desktop-margin-left-first-item: max(
5rem,
calc((100vw - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
);
position: relative;
display: block;
}
slider-component.slider-component-full-width {
--desktop-margin-left-first-item: 1.5rem;
}
@media screen and (max-width: 749px) {
slider-component.page-width {
padding: 0 1.5rem;
}
}
@media screen and (min-width: 749px) and (max-width: 990px) {
slider-component.page-width {
padding: 0 5rem;
}
}
.slider__slide {
--focus-outline-padding: 0.5rem;
--shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
--shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
scroll-snap-align: start;
flex-shrink: 0;
padding-bottom: 0;
}
@media screen and (max-width: 749px) {
.slider.slider--mobile {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider--mobile:after {
content: '';
width: 0;
padding-left: 1.5rem;
}
.slider.slider--mobile .slider__slide {
margin-bottom: 0;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
}
.slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: var(--focus-outline-padding);
}
.slider.slider--mobile.contains-content-container .slider__slide {
--focus-outline-padding: 0rem;
}
}
@media screen and (min-width: 750px) {
.slider.slider--tablet-up {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
}
.slider.slider--tablet-up .slider__slide {
margin-bottom: 0;
}
}
@media screen and (max-width: 989px) {
.slider.slider--tablet {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider--tablet:after {
content: '';
width: 0;
padding-left: 1.5rem;
margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
}
.slider.slider--tablet .slider__slide {
margin-bottom: 0;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
}
.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: var(--focus-outline-padding);
}
.slider.slider--tablet.contains-content-container .slider__slide {
--focus-outline-padding: 0rem;
}
}
.slider--everywhere {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.slider.slider--everywhere .slider__slide {
margin-bottom: 0;
scroll-snap-align: center;
}
@media screen and (min-width: 990px) {
.slider-component-desktop.page-width {
max-width: none;
}
.slider--desktop {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
scroll-padding-left: var(--desktop-margin-left-first-item);
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider--desktop:after {
content: '';
width: 0;
padding-left: 5rem;
margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
}
.slider.slider--desktop .slider__slide {
margin-bottom: 0;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
}
.slider--desktop .slider__slide:first-child {
margin-left: var(--desktop-margin-left-first-item);
scroll-margin-left: var(--desktop-margin-left-first-item);
}
.slider-component-full-width .slider--desktop {
scroll-padding-left: 1.5rem;
}
.slider-component-full-width .slider--desktop .slider__slide:first-child {
margin-left: 1.5rem;
scroll-margin-left: 1.5rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider-component-full-width .slider--desktop:after {
padding-left: 1.5rem;
}
.slider--desktop.grid--5-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2);
}
.slider--desktop.grid--4-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
}
.slider--desktop.grid--3-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4);
}
.slider--desktop.grid--2-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5);
}
.slider--desktop.grid--1-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9);
}
.slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: var(--focus-outline-padding);
}
.slider.slider--desktop.contains-content-container .slider__slide {
--focus-outline-padding: 0rem;
}
}
@media (prefers-reduced-motion) {
.slider {
scroll-behavior: auto;
}
}
/* Scrollbar */
.slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}
.slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}
.slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}
.slider-counter {
display: flex;
justify-content: center;
min-width: 4.4rem;
}
@media screen and (min-width: 750px) {
.slider-counter--dots {
margin: 0 1.2rem;
}
}
.slider-counter__link {
padding: 1rem;
}
@media screen and (max-width: 749px) {
.slider-counter__link {
padding: 0.7rem;
}
}
.slider-counter__link--dots .dot {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 0.1rem solid rgba(var(--color-foreground), 0.5);
padding: 0;
display: block;
}
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: rgb(var(--color-foreground));
}
@media screen and (forced-colors: active) {
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: CanvasText;
}
}
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
border-color: rgb(var(--color-foreground));
}
.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
transition: transform 0.2s ease-in-out;
}
.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
transform: scale(1.1);
}
.slider-counter__link--numbers {
color: rgba(var(--color-foreground), 0.5);
text-decoration: none;
}
.slider-counter__link--numbers:hover {
color: rgb(var(--color-foreground));
}
.slider-counter__link--active.slider-counter__link--numbers {
text-decoration: underline;
color: rgb(var(--color-foreground));
}
.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 990px) {
.slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
display: none;
}
}
@media screen and (max-width: 989px) {
.slider--desktop:not(.slider--tablet) + .slider-buttons {
display: none;
}
}
@media screen and (min-width: 750px) {
.slider--mobile + .slider-buttons {
display: none;
}
}
.slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.slider-button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}
.slider-button .icon {
height: 0.6rem;
}
.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 0.3);
cursor: not-allowed;
}
.slider-button--next .icon {
transform: rotate(-90deg);
}
.slider-button--prev .icon {
transform: rotate(90deg);
}
.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) scale(1.1);
}
.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) scale(1.1);
}
.slider-counter {
display: none !important;
}
.product-grid {
width: 100%;
max-width: 1990px;
margin: 0 auto;
}
.slider-mobile-gutter .slider-buttons {
position: absolute;
top: 20%;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
transform: translateX(-20%);
max-width: 1990px;
width: 100%;
margin: 1 auto;
}
.slider-mobile-gutter .slider-buttons button {
color: red;
border: none;
margin: 0 auto;
}
.slider-button {
max-width: 80px;
height: 180px;
color: red;
background: #171414;
border-radius: 25%;
opacity: 0.7;
}
.slider-button:hover {
opacity: 0.9;
}
.slider-buttons {
width: 100vw;
max-width: 1990px !important;
}
Solved! Go to the solution
This is an accepted solution.
Hello @ManKaveStore
To center the slider arrows on both side of the screen, i've found the solution for it.
You just need to follow below steps:
1. Go to admin > Online store > edit code.
2. In code directory, open the file where the CSS for slider is situated which you were mentioned above.
3. Copy below CSS rules and paste it at the end where above CSS ends.
slider-component {
position: relative;
}
slider-component .slider-buttons {
position: absolute;
top: 41%;
transform: translateY(-50%);
width: 100%;
background: transparent;
}
slider-component .slider-buttons .slider-counter {
display: none;
}
slider-component .slider-buttons .slider-button {
position: absolute;
margin: 0;
}
slider-component .slider-buttons .slider-button.slider-button--prev {
left: 25px;
}
slider-component .slider-buttons .slider-button.slider-button--next {
right: 25px;
}
4. Make sure that you added this CSS rules at right place and save the file.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
This is an accepted solution.
Hello @ManKaveStore
To center the slider arrows on both side of the screen, i've found the solution for it.
You just need to follow below steps:
1. Go to admin > Online store > edit code.
2. In code directory, open the file where the CSS for slider is situated which you were mentioned above.
3. Copy below CSS rules and paste it at the end where above CSS ends.
slider-component {
position: relative;
}
slider-component .slider-buttons {
position: absolute;
top: 41%;
transform: translateY(-50%);
width: 100%;
background: transparent;
}
slider-component .slider-buttons .slider-counter {
display: none;
}
slider-component .slider-buttons .slider-button {
position: absolute;
margin: 0;
}
slider-component .slider-buttons .slider-button.slider-button--prev {
left: 25px;
}
slider-component .slider-buttons .slider-button.slider-button--next {
right: 25px;
}
4. Make sure that you added this CSS rules at right place and save the file.
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.
Thank you for the help!
I'm so glad you liked it!
Always ready to help.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025