BOUNDLESS THEME - How to I put the ACTION bar on product pages?

TalulahBlue
Visitor
1 0 0

 

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.

 

🙂

Replies 7 (7)

Diamond_Team
Shopify Partner
112 14 24

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' -%}
Copy

to

 {%- unless request.page_type == 'search' or request.page_type == 'index' -%}
Copy

5- click save.

Best regards,

Diamond team

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
dconnors
Tourist
6 0 2

This is helpful. Is there a way I can move the action bar on my main page above the hero content?

Diamond_Team
Shopify Partner
112 14 24

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' -%}
Copy

to

{%- unless request.page_type == 'product' or request.page_type == 'search' -%}
 
Copy

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

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
dconnors
Tourist
6 0 2

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? 

Diamond_Team
Shopify Partner
112 14 24

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

 

If the answer was helpful for you, then please Like and Accept the Solution.
Get our new boundless theme product page template from here
Want modifications or custom changes on a store contact us
Email: diamondteam4coding@gmail.com
dconnors
Tourist
6 0 2

You are all amazing. This is exactly what I needed. 

Pheonaa
Visitor
1 0 0

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?