wishlist page issue

Shopify Discussion

Topic summary

A user installed the GroPlus Wishlist app but encountered a positioning problem where the wishlist page appears at the top of the screen instead of properly aligning below the header.

Proposed Solution:

A CSS-based fix was suggested involving these steps:

  • Access the theme code editor via Shopify Admin (Online Store > Themes > Edit Code)
  • Locate the main CSS file (typically theme.css or theme.scss.liquid in Assets)
  • Add CSS targeting .groplus-wishlist-page with margin-top: 100px to push content down
  • If the initial fix fails, use !important declarations with position: relative, top: auto, and margin-top to override potential JavaScript positioning
  • Use browser Developer Tools (F12) to verify the correct class name if needed

Status: The issue remains unresolved pending the user’s implementation of the suggested CSS modifications.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone, i have added a wishlist page using groplus wishlist app. but my wishlist page is taking the position from top of the scree which i want to allign properly below the header. can anyone please help me to resolve this issue. I am sharing the preview link of my store. https://0a7lebzzncxav0ib-67593830638.shopifypreview.com

looking forward to the solution

thank you

2

Hi @momsabhiruchi ,

It looks like the GroPlus Wishlist app’s wishlist page isn’t aligning correctly below the header. This is likely due to a CSS issue. Try the following steps:

  1. Find the Wishlist Page Selector

Open your Shopify Admin Panel.

Go to Online Store > Themes.

Click Customize on your active theme.

Under Theme Actions, click Edit Code.

  1. Modify CSS to Adjust Positioning

Find your theme’s CSS file (usually in Assets/theme.css or Assets/theme.scss.liquid).

Add the following CSS at the end of the file:

.groplus-wishlist-page {

margin-top: 100px; /* Adjust this value as needed */

}

If the class name isn’t correct, inspect the element using your browser’s Developer Tools (F12 or Right-click > Inspect) to find the correct class.

  1. Check If JavaScript is Controlling Position

If the above CSS doesn’t work, the GroPlus Wishlist app might be dynamically setting the position.

Try adding this CSS:

.groplus-wishlist-page {

position: relative !important;

top: auto !important;

margin-top: 100px !important;

}

  1. Save & Preview

Hope these steps solve the issue. Let me know if you need more help.

Regards,