How to Create Bootstrap Shopify Menu Bootstrap Navbar

Retired Boards Appdev Custom Storefronts
1

I would like to create a “Live Preview” button for themes in Shopify. Think about each theme as a product in Shopify and each theme product page has a “Live Preview” button that goes to the live demo page of the theme.

I would like to list all of my themes to my Shopify website with CSV …

<div class="mainmenu-area navbar-light bg-light">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <nav class="navbar navbar-expand-lg">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">Navbar</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNav">
                            <ul class="navbar-nav">
                                {% for link in linklists.main-menu.links %}
                                    {% assign child_list_handle = link.title | handleize %}
                                    
                                    {% if linklists[child_list_handle].links != blank %}
                                        <li class="nav-item">
                                            <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" href="{{ link.url }}">{{ link.title }}</a>
                                            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                                                {% for childlink in linklists[child_list_handle].links %}
                                                    <li>
                                                        <a class="dropdown-item" href="{{ childlink.url }}">{{ childlink.title | escape }}</a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </li>
                                    {% else %}
                                    
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ link.url }}">{{ link.title }}</a>
                                    </li>
                                    {% endif %}
                                {% endfor %}
                                <li class="nav-item">
                                    <a class="nav-link" href="/cart">Cart</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
            </div>
        </div>
    </div>
</div>

Here is the custom development on Shopify menus

1 Like
2

Hi, @sidrakiyani
Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@sidrakiyani you can create the meta filed into the product page then add the add using the shopify api for product creating with shopify product meta field. i hope you know the shopify API knowledge

https://shopify.dev/api/admin-rest/2021-10/resources/product-variant#[post]/admin/api/2021-10/products/{product_id}/variants.json

https://shopify.dev/api/admin-rest/2021-10/resources/metafield#[post]/admin/api/2021-10/metafields.json

add those data.

simple to render the theme preview link on the product details page.

{% if variant.metafields.my_fields.variant_option_url != blank %}
             

variant_option_url : {{ variant.metafields.my_fields.variant_option_url }}

           {% endif %}