Shopify create custom shop page

Question

I want to create a custom shop page in shopify store. The shopping process will be handled step by step in this page. The first step should have some variant option when the user selects the option get the product that satisfies the condition. After that choose the product he wants and then go to checkout option.

I create a custom page and show some static data.

   
<form method="post" action="/cart/add">
    <section class="prtn_cstm_crt_pg">
        <!--====================== step forms content========================= -->
        <div class="step-content">
            <!-- ~~~~~~~~~~~~~STEP 01~~~~~~~~~~~~~~ -->
            <div class="cstm_crt_first-step">
                <div class="Step_bnner">
                    <h1 class="Step_bnner_heading">CREATE YOUR FIRST BOX</h1>
                    <p class="Step_bnner_subtitle">Choose from 15 healthy, resturant-quality meals each week</p>
                </div>
                <div class="first-step-inner">
                    <!-- Choose Meal -->
                    <div class="Choose-meal">
                        <h2 class="step_heading">1. CHOOSE YOUR PROTEIN PREFERENCE</h2>
                        <p class="step_para">Your preferences will help us show you the most relevant meals first. You
                            will still be able to view all meals.</p>
                        <div class="select_boxs_first">
                            <div class="select_box">
                                <input type="radio" id="Veg_and_nonveg_meal_radio" name="protien-preference"
                                    class="select_radio_input" value="Meat & Vegan">
                                <label class="selector-item_label" for="Veg_and_nonveg_meal_radio">
                                    <span class="select_box_title">Meat & Vegan</span>
                                </label>
                            </div>
                            <div class="select_box">
                                <input type="radio" id="meat_radio" name="protien-preference" class="select_radio_input"
                                    value="Meat Only">
                                <label class="selector-item_label" for="meat_radio">

                                    <span class="select_box_title">Meat Only</span>
                                </label>
                            </div>
                            <div class="select_box">
                                <input type="radio" id="vegan_radio" name="protien-preference"
                                    class="select_radio_input" value="Vegan Only">
                                <label class="selector-item_label" for="vegan_radio">
                                    <span class="select_box_title">Vegan Only</span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <!-- Choose Meal End -->

                    <!-- Meal Quantity -->
                    <div class="Meal-Quantity">
                        <h2 class="step_heading">2. CHOOSE YOUR PORTION PREFERENCE</h2>
                        <div class="select_boxs_second">
                            <div class="select_box_with_price">
                                <div class="select_box">
                                    <input type="radio" id="Standard_meal_radio" name="Meal-Quantity"
                                        class="select_radio_input" value="Standard">
                                    <label class="selector-item_label" for="Standard_meal_radio">
                                        <span class="select_box_title">Standard</span>
                                    </label>
                                </div>
                            </div>
                            <div class="select_box_with_price">
                                <div class="select_box">
                                    <input type="radio" id="large_meal_radio" name="Meal-Quantity"
                                        class="select_radio_input" value="Large">
                                    <label class="selector-item_label" for="large_meal_radio">
                                        <span class="select_box_title">Large</span>

                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Meal Quantity -->

                    <!-- Meal Number -->
                    <div class="meal__number">
                        <h3 class="step_heading">3. SELECT MEALS PER WEEK</h3>
                        <div class="select_boxs_second">
                            <div class="select_box_with_price">
                                <div class="select_box">
                                    <input type="radio" id="six_meal_pr_wk" name="meal__number"
                                        class="select_radio_input" value="6">
                                    <label class="selector-item_label" for="six_meal_pr_wk">
                                        <span class="select_box_title">6</span>
                                    </label>
                                </div>
                                <div class="select_box_description">
                                    <!-- <span class="meal_price_by_number"><em>(£7.49)</em> £5.99/meal</span> -->
                                </div>
                            </div>
                            <div class="select_box_with_price">
                                <div class="select_box">
                                    <input type="radio" id="eight_meal_pr_wk" name="meal__number"
                                        class="select_radio_input" value="8">
                                    <label class="selector-item_label" for="eight_meal_pr_wk">
                                        <span class="select_box_title">8</span>
                                    </label>
                                </div>
                                <div class="select_box_description">
                                </div>
                            </div>
                            <div class="select_box_with_price">
                                <div class="select_box">
                                    <input type="radio" id="ten_meal_pr_wk" name="meal__number"
                                        class="select_radio_input" value="10">
                                    <label class="selector-item_label" for="ten_meal_pr_wk">
                                        <span class="select_box_title">10</span>
                                    </label>
                                </div>
                                <div class="select_box_description">

                                </div>
                            </div>
                            <div class="select_box_with_price">
                                <div class="select_box">
                                    <input type="radio" id="twelve_meal_pr_wk" name="meal__number"
                                        class="select_radio_input" value="12">
                                    <label class="selector-item_label" for="twelve_meal_pr_wk">
                                        <span class="select_box_title">12</span>
                                    </label>
                                </div>
                                <div class="select_box_description">

                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- ~~~~~~~~~~~STEP 01 END~~~~~~~~~~~~ -->
        </div>
    </section>
    <div class="product">
        <div class="page-width">
            <div class="product-variant-details">
                <!-- The updated variant details will be displayed here -->
            </div>
        </div>
    </div>
    <button id="plan-submit-btn" type="submit" class="custom_cart_next_btn">SELECT PLAN</button>
</form>

Answer 1

The HTML seems good.
Are we talking about multiple products?
Or is it only one product with multiple variants?
You should do it with one product that has all these variants, and create a custom Liquid product template file for this page.
After connecting the template to the product you could easily use the Liquid product object to access all the information you will need.

When it comes to the code, you have two options:

1. Use the theme's original product template and tweak it a bit to match your needs.
2. Manually - This is actually the less recommended option because you will have to write a bunch of code with a bunch of iterations that the theme's code probably already does as well.
   If I'd have to go with this one,

• I'd start by adding <input type="hidden" name="id" value="{{ product.variants[0].id }}" /> to the form, the value of this input is the ID of the variant you wish to add to cart.

• Then I'd create some kind of Javascript object that holds information about each variant and its options combination ({ variantID: [option1, option2, option3] }, ...).
  Should look something like this:
  { 123456789: ['Vegan', 'Large', '6'], ... }

• Then listen to every radio input change,
  check the object to determine which is the newly selected variant ID (according to the selected options) and change the "id" input's value to the newly selected variant ID.

Doing that, everything should work properly.
Let me know if it works for you.