Shopify themes, liquid, logos, and UX
How to I put the ACTION bar on product pages too?
I want the action bar (main pages menu) to be visible at all time to customers.
🙂
Hello TalulahBlue,
You can display the action bar on products pages.
1. In your Shopify Admin go to online store > themes > actions > edit code
2- Go to layout folder > theme.liquid
3- Press Ctrl + f and search for{% include 'action-bar' %}
4- replace the line of code above it from
{%- unless request.page_type == 'product' or request.page_type == 'search' or request.page_type == 'index' -%}
to
{%- unless request.page_type == 'search' or request.page_type == 'index' -%}
5- click save.
Best regards,
Diamond team
This is helpful. Is there a way I can move the action bar on my main page above the hero content?
Hello dconnors,
To Move the action bar on the main page above the hero content:
1. In your Shopify Admin go to online store > themes > actions > edit code
2- Go to layout folder > theme.liquid
3- Press Ctrl + f and search for{% include 'action-bar' %}
4- replace the line of code above it from
{%- unless request.page_type == 'product' or request.page_type == 'search' or request.page_type == 'index' -%}
to
{%- unless request.page_type == 'product' or request.page_type == 'search' -%}
5- click save.
6- Go to Templates folder > index.liquid
7- Press Ctrl + f and search for hero__header
8- Remove this code from this file
<div class="hero__header">
<div class="action-area">
{% include 'action-bar' %}
</div>
</div>
so the file content after removing this code will be:
<!-- /templates/index.liquid -->
{% comment %}
Define your section markup, using `section.settings.[setting_name]` to access specific settings.
* Sections do not have access to global liquid variables.
{% endcomment %}
{% assign slider_enabled = true %}
{% section 'slideshow' %}
</div>
{{ content_for_index }}
9- Click save.
Best regards,
Diamond team
WOW...that's incredible. Thanks so much for the quick response. That was super easy. It did leave me with a small issue probably because I didn't explain 100% correctly. Here is a link: https://blushchic.com/
As you can see, the action bar is actually on top of the hero section. Did I miss something with the code?
Hello dconnors,
I am not sure if I understand what you would like to do correctly, so please try the following code and let me know if that is what you want.
1. In your Shopify Admin go to online store > themes > actions > edit code
2- Go to Assets folder > theme.scss.liquid
3- Add this code at the bottom of this file
.template-index .site-header-wrapper {
position: static !important;
background: #efae09;
}
4- Click save.
Best regards,
Diamond team
You are all amazing. This is exactly what I needed.
Hello,
I am actually having some difficulty applying the action bar to just my product pages. I tried the initial code but it didn't work. Do you have any ideas?
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024