A Shopify store owner seeks to customize their mobile product page by changing carousel navigation dots to horizontal lines (or making them smaller) and increasing the red sale price font size to 20px.
Solutions Provided:
Dots to Lines: CSS code provided to transform circular pagination bullets into 30px-wide dash lines using .swiper-pagination-bullet styling with modified width, height, and border-radius properties.
Price Font Size: CSS targeting .product__price span[data-price] to increase font size to 20px (adjustable).
Current Issue:
After implementing the price size increase, an alignment problem emerged between the sale price and compare-at price. A follow-up CSS solution was offered using padding-top: 5px on the compare price element to fix vertical alignment.
Status: The dots-to-lines solution was marked as resolved. The price sizing issue has a proposed fix awaiting confirmation from the store owner on whether the alignment correction works.
Hi,
id like to change the mobile scroll dots to __ lines. My site is https://vazluxe.com/collections/new-in/products/off-white-off-white-layered-sleeveless-top-with-242411dto000001-1001
if not possible then smaller is ok. They’re too big.
Also I’d like to increase the Red Price size to maybe 20px.
Hi @Luxurymrkt 
I’m Ellie from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)
To change the mobile scroll dots to dash lines, Please follow my steps below:
Step 1. Go to Online Store
Step 2. Find “Edit Code”
Step 3. Go to any CSS file
Step 4. Paste this code anywhere you want in that CSS file
.swiper-pagination-bullet{
width: 30px !important;
height: 3px !important;
border-radius: 0 !important;
}
Result:
If my code worked, appreciate if you could Like and Accept as Solution!
@Luxurymrkt , Ellie gain from BOGOS, #1 Shopify Promotion App (Gifts, Bundles, Upsells, Discounts)
To increase your Red Price size to 20px, Please follow my steps below:
Step 1. Go to Online Store
Step 2. Find “Edit Code”
Step 3. Go to any CSS file
Step 4. Paste this code anywhere you want in that CSS file:
.product__price span[data-price]{
font-size: 20px !important;
}
*You can adjust the size by changing the “20x” in my code.
If this answer works as well, appreciate if you could Like and Accept both of my 2 answers as Solutions!
Hi @Luxurymrkt How about increasing your Red Price size? Does my code work, or do you need any help?
By the way, thanks for marking my previous code as a solution!
Hi, it increase it but then it doesn’t line up with the compare price
Thank you, @Luxurymrkt , for clarifying that!
Please add this code under my previous one:
.product__price s[data-compare-price]{
padding-top: 5px !important;
}
If my code worked, appreciate if you could Like and Accept as Solution!
Hi @Luxurymrkt Has your Red Price size has been increased with my code I provided? Do you need any help?