How can I customize my mobile site's product navigation arrow size and color?

Store Design
,
1

I want Bold Big Size Product Navigation Arrow for Mobile User , as my all Order / Customer coming from Mobile website

it look like this on product page , for picture

< 1/2 > i want to make it Big Size like 12 number font with blue color

if possible 1/2 written in blue , big font size 12 font

< > arrow in Red Color , big font size 12 font

2

Hi @Pakistanpowerto
I would like to give you a solution.

  1. Go to Online Store → Theme → Edit code.

  2. Open your base.css in the Assets folder.

  3. Paste the below code at the end of the file.

.slider-buttons .slider-counter.caption{
  font-size: 15px;
   color: blue;
}
.slider-buttons svg.icon{
    width: 12px;
    height: 12px;

}
.slider-buttons svg.icon path{
   fill: red;
}

Best regards,
GemPages Support Team

3

Hello @Pakistanpowerto ,

You can try to do this:

Go to Online Store → Themes → Actions → Edit Code

Ref- step 1.png
Ref- step 1.png1434×819 104 KB

Go to assets folder → base.css → add the following code at the bottom

.slider-buttons .slider-counter.caption{
  font-size: 15px;
   color: blue;
}
.slider-buttons svg.icon{
    width: 12px;
    height: 12px;

}
.slider-buttons svg.icon path{
   fill: red;
}

Hope this can help

4

Hello

pasted the code , but it didnt work

.font-body-bold {
font-weight: var(–font-body-weight-bold);
}
.header__heading-link .h2,.header,.header__heading,.announcement-bar__message{font-weight:600!important} .section-collection-list .collection-list .grid__item { width: calc(33.33% - var(–grid-desktop-horizontal-spacing) * 4 / 5); max-width: calc(33.33% - var(–grid-desktop-horizontal-spacing) * 4 / 5); }
@media screen and (min-width: 990px){
.section-collection-list .collection-list .grid__item {
padding: 5rem; }
}

.slider-buttons .slider-counter.caption{
font-size: 15px;
color: blue;
}
.slider-buttons svg.icon{
width: 12px;
height: 12px;

}
.slider-buttons svg.icon path{
fill: red;
}

5

Hello ,

pasted the code , but it didnt work

.font-body-bold {
font-weight: var(–font-body-weight-bold);
}
.header__heading-link .h2,.header,.header__heading,.announcement-bar__message{font-weight:600!important} .section-collection-list .collection-list .grid__item { width: calc(33.33% - var(–grid-desktop-horizontal-spacing) * 4 / 5); max-width: calc(33.33% - var(–grid-desktop-horizontal-spacing) * 4 / 5); }
@media screen and (min-width: 990px){
.section-collection-list .collection-list .grid__item {
padding: 5rem; }
}

.slider-buttons .slider-counter.caption{
font-size: 15px;
color: blue;
}
.slider-buttons svg.icon{
width: 12px;
height: 12px;

}
.slider-buttons svg.icon path{
fill: red;
}