Shopify themes, liquid, logos, and UX
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
Hi @Nienke_pr
Does your theme has an announcement bar?
It will need some codebase update.
If you ask, I can help you.
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
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
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! Support me! 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.
We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024