Re: Sticky header only on the product page

Nienke_pr · ‎07-28-2024

Hi guys,

I would like to have a sticky header only on the product page so when you scroll down the product the header will appear. I use dawn theme

miyucollective.com

vinh0225 · ‎07-28-2024

Hi @Nienke_pr

Does your theme has an announcement bar?

It will need some codebase update.

If you ask, I can help you.

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ [email protected].

BSSCommerce-B2B · ‎07-28-2024

Hi @Nienke_pr

Step 1. Go to Admin -> Online store -> Theme > Edit code

Step 2. Find the file base.css. Search for the following CSS snippet

.header-wrapper {
    display: block;
    position: relative;
    background-color: rgb(var(--color-background));
}

Please change to it

.header-wrapper {
    display: block;
    position: fixed !important;
    background-color: rgb(var(--color-background));
}

Result

If it helps you, please like and mark it as the solution.

Best Regards

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

BSSCommerce-B2B · ‎07-28-2024

HI @Nienke_pr ,

I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file theme.liquid. And add this code snippet before tag </head> or </body>:

 {% if template contains 'product' %}
    <style>
      header.header.header--top-center.header--mobile-center.page-width.drawer-menu.header--has-menu {
          position: fixed !important;
          width: 100% !important;
      }
      .header__icon {
          color: black;
      }
      main#MainContent {
          margin-top: 200px;
      }
    </style>
  {% endif %}

IN this step, I append on only product page, I change the color of icon header to black to avoid their color as same as background color body and margin-top the main body to display header properly.

Step 3: Save your code and reload this page.

=>> The result:

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir!

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.

B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.

B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.

BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

Dan-From-Ryviu · ‎07-28-2024

Hi @Nienke_pr

You can do that by adding this code to theme.liquid file, after <head> in Sale channels > Online Store > Themes > Edit code

{%- if template.name == 'cart' -%}
<style>
.section-header { top: 0px; }
</style>
{%- endif -%}

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Re: Sticky header only on the product page

Sticky header only on the product page

Community Blog Articles