Header postioning

Shopify Discussion

Topic summary

Goal: Move the white header text (“Mens Pro Erex TM”) slightly higher on a single product page via CSS.

Proposed solutions:

  • Global container tweak: In the theme’s “Custom CSS,” reduce .content-container padding-top to 1rem (default 4rem). Combine with existing .content-container { margin-bottom: 5em; } to avoid overwriting.
  • Page-specific targeting: Use the product’s unique template/handle to only affect that page, e.g., .template-product–pro-erex-for-men .product__title { margin-top: -20px; }. If the theme uses different wrappers, inspect the element and adjust the selector. (“Template/handle” refers to Shopify’s page-specific identifiers.)

Notes and considerations:

  • One helper requested a correct URL or screenshot to provide exact CSS; the posted link may need fixing.
  • Page-specific CSS prevents site‑wide layout changes; the container padding edit could impact multiple pages.
  • Code snippets are central to the solution.

Status: No confirmation of implementation; guidance provided and awaiting feedback. The discussion remains open.

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

Hi all I am looking to move the text header slightly higher using custom CSS for just this page Pro-Erex for Men the text in question is the white text that states “Mens Pro Erex TM. any help is appreciated thanks.

2

Hi there! Yes, I can help you move the header text higher on that specific product page. Just let me know the product URL or a screenshot of the header section, and I’ll provide the exact custom CSS you need. Happy to help!

1 Like
3

In this section settings find “Custom CSS”.
Add this code

.content-container {
  padding-top: 1rem; /* default is 4rem */
}

Looks like you already have this in Custom CSS

.content-container {
    margin-bottom: 5em;
}

So you can combine:

.content-container {
  margin-bottom: 5em;
  padding-top: 1rem; /* default is 4rem */
}
1 Like
4

You can move that header text up on just one product page by targeting its unique template or handle with custom CSS.

Try something like:

.template-product–pro-erex-for-men .product__title {

margin-top: -20px;

}

If your theme uses a different wrapper, inspect the element and replace the class accordingly.

This only affects that single page and won’t touch the rest of your site.

Once your layout looks clean, tools like CatWalkCraft AI can help you generate consistent product visuals so your page looks polished overall.

If you want, I can check your theme code and give you the exact selector.

1 Like