Assistance Needed to Hide Arrow Button on Homepage

Store Design

Topic summary

A store owner seeks help hiding an arrow button on their homepage that redirects customers to a product page, disrupting the desired checkout flow.

Initial Attempts:

  • Tried adding CSS code to the featured-product.liquid file (lines 1948-1501)
  • Code didn’t work, likely due to incorrect selector or placement

Community Guidance Provided:

  • Multiple users requested the store URL (mpamstore.com) to inspect the actual element
  • Two main solutions emerged:

Solution 1 (niraj_patel & Moeed):

  • Add CSS in theme.liquid file before </body> tag
  • Use actual element class name instead of placeholder
  • Emphasized need to identify correct class selector

Solution 2 (Made4uo-Ribe):

  • Add code to main.css/base.css in Assets folder
  • Provided specific CSS: .share-button+.product__view-details { display: none; }
  • Recommended removing previously added code

Current Status:
The store owner confirmed the arrow still appears after initial attempts. Community members are awaiting confirmation of which solution successfully resolved the issue. Screenshots and Google Drive links were shared for troubleshooting.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I hope this message finds you well. I am currently working on optimizing the user flow of my store to ensure a seamless shopping experience for my customers. Specifically, I would like to allow customers to access the homepage directly and proceed to checkout without being redirected through an arrow button on the homepage that leads to a product link (as seen in the image below)

3. arrow.jpg
3. arrow.jpg443×368 10.4 KB

I have already attempted to hide this arrow via:

  • Go to Online Store > Themes in Shopify admin.
  • Click on Actions > Edit code next to the current theme.
  • Open the featured-product.liquid under the Sections folder.

There, I don’t know what to do with CSS code. I tried the CSS code below at the end of this section (from line 1498 to line 1500), but it didn’t work.

  • Save my changes.

Therefore, I kindly ask for your assistance to review and guide me on the correct method to hide this arrow.

Your timely support in this matter would greatly help me activate my store as soon as possible.

Thank you so much for your attention and assistance.

Your advice and help are greatly appreciated.

Thanks so much again!

1 Like
2

Hey @happyforever

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

3

Hello @happyforever

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

4

https://drive.google.com/file/d/1GRHVqhe-kjJoT6CaQhotWAaslsFeowfW/view

5

.arrow-class-name { /* Replace ‘arrow-class-name’ with the actual class name of the arrow */
display: none !important;
}

6

Wrap the code you highlighted in the screen-shot with style tag.
Also change the class name with actual class.
Still if you are not sure please share the theme name.

e.g.

// Your highlighted code goes here
7

I would like to send the link to the CSS code image, as well as the content of the CSS code above. I hope everyone can take a look. Thank you so much!

8

You can add code by following these steps

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

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

add your class(like class name is .arrow) { display :none !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

9

https://drive.google.com/file/d/19V6f-RGqcr1KAVDc8i-6oinji5pWHBZU/view

Hi Techlyser_web Thank you so much for your support. I tried following your instructions (details as shown in the image), but the arrow still appears on the homepage. I would really appreciate it if you could take another look and help me. I am truly very grateful.

10

that is an example @happyforever you have to add your element class.

11

Hi @happyforever

What theme your are using? If you dont like to share on public you can always PM. The code that you’ve trying to wouldn’t work. You need to change the selector name and it place on the wrong area.

12

My store URL is https://mpamstore.com/

I am not really sure what an element class is. Could you please provide further guidance? Thank you so much.

13

Hey @happyforever

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1721383477682.png
Moeed_0-1721383477682.png1082×803 490 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
14

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. Then place the code below at the very bottom of the file.
.share-button+.product__view-details {
    display: none;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!