Some code to change default arrows to custom icon. Add code to Custom CSS box
Product Arrows
button.ProductItem-gallery-next:after, button.ProductItem-gallery-prev:after {
display: none !important;
}
button.ProductItem-gallery-next {
background-image: url(https://cdn.pixabay.com/photo/2023/06/02/14/10/woman-8035746_1280.jpg);
}
button.ProductItem-gallery-prev {
background-image: url(https://cdn.pixabay.com/photo/2023/10/19/21/08/sunset-8327637_1280.jpg);
}
Summary Block (Carousel)
div.summary-v2-block .sqs-gallery-controls .next, div.summary-v2-block .sqs-gallery-controls .previous {
background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
}
div.summary-v2-block .sqs-gallery-controls .previous {
background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
}
div.summary-v2-block .sqs-gallery-controls .next:before, div.summary-v2-block .sqs-gallery-controls .previous:before {
visibility: hidden;
}
Gallery Block (Carousel & Slideshow)
div.gallery-block .sqs-gallery-controls .next, div.gallery-block .sqs-gallery-controls .previous {
background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-arrow-left.png.dc3b32b710c169a07350cba2c41abf04.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-color: transparent !important;
}
div.gallery-block .sqs-gallery-controls .previous {
background-image: url(https://content.invisioncic.com/p289038/monthly_2023_04/heart-icon-right.png.b1403153d4b4a22c29b1cc99f821210a.png) !important;
}
div.gallery-block .sqs-gallery-controls .next:before, div.gallery-block .sqs-gallery-controls .previous:before {
visibility: hidden;
}
List Section (Banner Slideshow + Carousel)
button[class*="arrow-button"] svg {
display: none !important;
}
[class*="arrow-icon-background"] {
background-size: contain;
background-repeat:no-repeat;
background-position: center center;
background-color: transparent !important;
}
button[class*="arrow-button--left"] [class*="arrow-icon-background"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
button[class*="arrow-button--right"] [class*="arrow-icon-background"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
Gallery Section (Slideshow Simple)
button.gallery-slideshow-control-btn svg {
display: none !important;
}
button.gallery-slideshow-control-btn {
background-size: contain;
background-repeat:no-repeat;
background-position: center center;
background-color: transparent !important;
opacity: 1 !important;
padding: 30px !important;
}
div.gallery-slideshow-control-prev button {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
div.gallery-slideshow-control-next button {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
Gallery Section (Slideshow Full)
button.gallery-fullscreen-slideshow-control-btn svg {
display: none !important;
}
button.gallery-fullscreen-slideshow-control-btn {
background-size: contain;
background-repeat:no-repeat;
background-position: center center;
opacity: 1 !important;
padding: 30px !important;
}
.gallery-fullscreen-slideshow-control-btn::before, .gallery-slideshow-control-btn::before {
background-color: transparent !important;
}
button[aria-label="Previous Slide"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
button[aria-label="Next Slide"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
Gallery Section (Reel)
button.gallery-reel-control-btn svg {
display: none !important;
}
button.gallery-reel-control-btn {
background-size: contain;
background-repeat:no-repeat;
background-position: center center;
opacity: 1 !important;
padding: 30px !important;
}
.gallery-reel-control-btn::before {
background-color: transparent !important;
}
button.gallery-reel-control-btn[aria-label="Previous Slide"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
button.gallery-reel-control-btn[aria-label="Next Slide"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
Gallery Section (Lightbox Arrow)
button.gallery-lightbox-control-btn svg {
display: none !important;
}
button.gallery-lightbox-control-btn {
background-size: contain;
background-repeat:no-repeat;
background-position: center center;
background-color: transparent !important;
opacity: 1 !important;
padding: 30px !important;
}
button.gallery-lightbox-control-btn[aria-label="Next Slide"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
button.gallery-lightbox-control-btn[aria-label="Previous Slide"] {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
Pagination Arrows
/* Pagination arrows */
.item-pagination-icon svg {
display: none !important;
}
.item-pagination-link--prev .item-pagination-icon {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
.item-pagination-link--next .item-pagination-icon {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
Blog: Older – Newer Entries Arrows
/* Blog Page - Oder - Newer Entries - Arrows */
.blog-list-pagination-icon.icon.icon--stroke svg {
display: none !important;
}
.blog-list-pagination-icon.icon.icon--stroke {
background-size: contain;
background-repeat:no-repeat;
background-position: center center;
background-color: transparent !important;
}
.newer .blog-list-pagination-icon.icon.icon--stroke {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
.older .blog-list-pagination-icon.icon.icon--stroke {
background-image: url(https://content.invisioncic.com/p289038/monthly_2022_09/[email protected]);
}
