Change in shape theme

Store Design
, , , , , ,

Topic summary

Removal of circular navigation arrows on the Shopify home page (Shape theme), specifically in mobile view. The requester tried custom CSS and the theme editor without success and shared the store URL (fokus.shop).

Multiple helpers asked for the store URL and password (if enabled) to inspect; one noted these arrows aren’t standard in Shape and requested access to identify the element.

Two CSS-based solutions were proposed:

  • Theme settings > Custom CSS: hide slider arrows with .splide__arrows { display: none !important; }. “Splide” refers to a slider library; this targets its arrow buttons.
  • Edit code (theme.css/base.css): add a mobile media query @media(max-width:768px){ .flex.gap-2 { display: none !important; } } to hide the suspected arrow container on small screens.

Action items: apply one of the CSS snippets via Customize > Theme settings > Custom CSS or via Edit code; share password if the store is locked for deeper inspection.

Status: No confirmation from the requester yet; outcome unresolved. Images were shared to illustrate the arrows and the customization steps.

Summarized with AI on December 13. AI used: gpt-5.
1

IMG-20241130-WA0006.jpg
IMG-20241130-WA0006.jpg510×817 38.9 KB

Hi everyone

Need help removing the circle arrows on my Shopify home page. I am using shape theme. I have tried to remove it with custom Css and with shopify edit section but failed Please help any one has any idea or experience on this

2

Hi @Fokus , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

3

Hi @Fokus

I hope you are well.

We checked the theme “Shape” theme but didn’t find the arrow buttons as you mentioned.

Could you please share the store link and entry password if you have one with us so we can provide the customization code for this part?

Thank you!

Best,

Daisy - Avada Support Team.

4

Hey @Fokus

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

5

Fokus.shop and the problem is in mobile view

6

Url: Fokus.shop and the problem is in mobile view

7

Hi

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(max-width:768px){
.flex.gap-2 {
    display: none !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

@Fokus

8

Hi @Fokus

I hope you are well. You can follow our instructions below:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
Step 3: Copy the code below and paste it there

Here is the code for Step 3:

.splide__arrows {
    display: none !important;
}

image (5).png
image (5).png349×735 158 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.