I Want That Dots Which Is Down in My Website should Be With The Image’s
My Website URL https://hypestockexchange.in/
Topic summary
A user wants to reposition slideshow navigation dots on their website to align with the images, similar to a reference site. The dots currently appear below the slideshow area.
Solutions provided:
-
Option 1 (Hide dots): Navigate to Online Store → Theme → Edit code → Assets folder → component-slider.css. Add CSS code at the end to hide dots:
.slider-counter.slider-counter--dots { display:none !important; } -
Option 2 (Reposition dots): Go to Online Store → Theme → Edit code → base.css file. Add CSS at bottom to adjust positioning with z-index and absolute positioning properties for
.slideshow__controls.slider-buttonselements.
Both solutions involve editing theme CSS files directly. A third user requests similar help for their Shopify store using the ‘Warehouse’ theme but hasn’t received a response yet. The discussion remains open with no confirmation if the original poster’s issue was resolved.
Hi,
Go to Online Store → Theme -->click the 3 dots next to the Customize → select Edit code
Go to Assets Folder on left —> select file name component-slider.css
Add below code at end of the file :
slider-counter slider-counter–dots { display:none !important; }
Then click save.
Hi @Emiway
This is Henry from PageFly - Landing Page Builder App
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file base.css
Step 3: Paste the below code at bottom of the file → Save
@media (max-width: 767px){
.slideshow__controls.slider-buttons.no-js-hidden {
position: absolute !important;
z-index: 9999 !important;
top: 90%;
}}
Hope that my solution works for you.
Best regards,
Henry | PageFly
Hi,
Can you help me for my Shopify shop please, I have tried several codes and no luck. Theme is ‘Warehouse’