[Resolved] Embed Shopify Buy Button in Nav

[Ian]

So I have been able to ad a button in the Primary Nav using the GP KB. Is there anyway to embed a Shopify button? Shopify code looks like HTML + javascript. Is this possible?

[Elvin]

Yes that’s 100% possible.

You can use generate_inside_navigation hook.
https://docs.generatepress.com/article/generate_inside_navigation/

or if you’re using the new 3.0 flexbox, you can use generate_menu_bar_items.
https://docs.generatepress.com/article/switching-from-floats-to-flexbox/#menu-item-float-right

Let us know if you have further questions. 🙂

[Ian]

ok, this is fantastic. Inside customizer > General, I have chosen Structure = Flexbox. But I only see generate_inside_navigation and not generate_menu_bar_items inside the Hook Element. Any ideas?

I was able to add the HTML button using generate_inside_navigation. Before I Float it to the proper place, I thought I might as well go with the newer Flexbox method. Any tips?

[Ian]

Wait a sec, perhaps use a custom hook and call it: generate_menu_bar_items

If that is the case, how do I make this Element part of the Primary Nav so it also gets wrapped into the hamburger menu?

[Elvin]

I was able to add the HTML button using generate_inside_navigation. Before I Float it to the proper place, I thought I might as well go with the newer Flexbox method. Any tips?

You may want to consider having a separate staging site for it as flexbox is only available on GP 3.0.

Note: GP 3.0 is still in alpha stage.

If that is the case, how do I make this Element part of the Primary Nav so it also gets wrapped into the hamburger menu?

Perhaps you’re pertaining to “hamburger” mobile menu?

GP’s mobile menu is a completely separate set of elements, it has its own hooks.

You can use the generate_inside_mobile_menu_bar hook for that. https://docs.generatepress.com/article/generate_inside_mobile_menu_bar/

You may want to look at this. It’s a visual guide for GP hooks. https://docs.generatepress.com/article/hooks-visual-guide/

Here’s a list of available hooks that may be helpful.
https://docs.generatepress.com/collection/hooks/?article-sort=alphabetically

[Ian]

So I am using generate_menu_bar_items to add a Button to the Primary Nav. It works as the button shows up after the Nav items. But when the nav menu goes into hamburger mode, the button sits outside of it. Any ideas?

Also, after adding the element using generate_menu_bar_items, the hamburger menu if left aligned and no longer center aligned. Is there a way to center align again?

[Elvin]

So I am using generate_menu_bar_items to add a Button to the Primary Nav. It works as the button shows up after the Nav items. But when the nav menu goes into hamburger mode, the button sits outside of it. Any ideas?

Also, after adding the element using generate_menu_bar_items, the hamburger menu if left aligned and no longer center aligned. Is there a way to center align again?

Oh I should mention that you’ll have to style them with CSS.

That said, can you provide a URL link to the site you’re working on? So we could take a look at the CSS selectors used to assist with styling of these custom buttons you’re adding.:)

You can add your details on the Private information field.

[Ian]

Thanks Elvin, appreciate it. I can style the buttons, I am now wondering how to include it inside the Nav so that it is part of the hamburger menu. Currently, it sits outside of the hamburger menu.

[Elvin]

You can add it again on mobile using generate_after_slideout_navigation hook.

So basically, you have 2 variants:
1 for desktop (hooked to generate_menu_bar_items)
1 for mobile (hooked to generate_after_slideout_navigation)

You then style them differently. You can set the desktop one to appear only on desktop and the mobile one to appear only on mobile by doing something like this:

@media (max-width:768px){
.desktop-button{
display:none;
}
.mobile-button{
display:block;
}
}

@media (min-width:769px){
.desktop-button{
display:block;
}
.mobile-button{
display:none;
}
}

If this is all too tedious, you can try adding your html code as a custom link on your menu at Appearance > Menu and add the JS script using some sort of Code Snippets plugin.:)

Bottomline is, there are plenty of ways to do this.:)

[Ian]

Hi Elvin,

I ran through your suggestions in details and cannot get things to work. I was able to create separate elements and included the Shopify store script for the Buy Button.

1. generate_menu_bar_items worked to get the button to display on desktop nicely but on mobile, it is showing after the hamburger menu and not inside it.

2. generate_after_slideout_navigation also worked to display the button but now, the button shows up twice and both are outside of the mobile menu. Did I need to target classes to the buy button from your CSS to hide them on mobile vs desktop?

[Leo]

Are you able to link us to the page in question?

[Ian]

I think I found the problem. This site has DNS pointed to it but it is behind Seedprod’s Coming Soon plugin. It’s still running WP Version 5.4.2 but it says “You have the latest version of WordPress.”. How do I force 5.5.1 to update here? Any ideas?

[Ian]

I think I may have found something. As someone at GP was helping me troubleshoot another ticket, I had to roll back WP to test something as I am running betas for GP and GB. I installed WP Rollback and I think that is preventing the update from happening. I have since uninstalled WP Rollback, re-installed the current version and still says 5.4.2 is the latest version. Any troubleshooting tips?

[Ian]

OMG! Noticed I also had WP Downgrade activated while doing the previous troubleshooting. Disabled that and I now have 5.5.1. The responsive preview works now! Thank you!

[Leo]

Glad to hear 🙂

[Author]

Posts