Editorial Theme: Need to add quantity field, changing position of price and other formatting changes

New Member
2 0 0

Hello, I'm having some issues with my theme - Editorial.

 

I want to change 2 of my product pages to look like this page (aside from a few changes)

https://number1sons.myshopify.com/collections/sour-boxes/products/the-sour-box 

password: theaza

 

Two pages that need changes:

  1. Holiday Sour Box: https://myshopify.com/collections/sour-boxes/products/holiday-sour-box-1
  2. Happy Family Holiday Sour Box: https://number1sons.myshopify.com/collections/sour-boxes/products/happy-family-holiday-sour-box

 

I need to make 7 changes:

1. Add the quantity field: The code for the quantity is:

 

<div class="js-qty relative">

      <label for="Quantity" class="quantity-selector text-align--left f--main font-size--m t--meta block">Quantity</label>

      <div class="js-qty__controls">
        <div class="table relative">
          <div class="table-cell align--middle js-qty__adjust-cell">
            <button type="button" class="js-qty__adjust js-qty__adjust--minus icon-fallback-text" data-id="" data-qty="0">
              <svg class="icon icon-chevron-left "><use xlink:href="#icon-chevron-left"></use></svg>

            </button>
          </div>
          <div class="table-cell align--middle full--w">
            <input type="text" class="js-qty__num t--meta" value="1" min="1" data-id="" aria-label="quantity" pattern="[0-9]*" name="quantity" id="Quantity">
          </div>
          <div class="table-cell align--middle  js-qty__adjust-cell">
            <button type="button" class="js-qty__adjust js-qty__adjust--plus icon-fallback-text" data-id="" data-qty="11">
              <svg class="icon icon-chevron-right "><use xlink:href="#icon-chevron-right"></use></svg>

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

    </div>

 

It seems like the quantity code is using either Javascript or an Application called Json? I found some similar code in the file:

<script type="application/json" id="ProductJson-{{ section.id }}" data-product-son>

    {{ product | json }}

  </script>

 

  <script type="application/json" id="FirstVariantJson-{{ section.id }}" data-first-variant-j-son>

    {{ product.selected_or_first_available_variant | json }}

  </script>

  

 

I tried to mimic the code above and added the following:

<script type="application/json" id="JsQty-{{ section.id }}" data-qty-json>

    {{ quantity | json }}

  </script>

 

However, none of that did anything.

 

2. I need to move the price below the quantity field, so that it goes quantity field, price, Add to Cart button: https://share.getcloudapp.com/kpumowqL. I used Chrome Inspect Element to see what code is being used on the page that is setup correctly:

<div class="h2 f--main caps regular font-size--ml" data-price-wrapper="">
    
    <span class="ProductPrice t--meta" itemprop="price" content="45.0" data-product-price="">
    $45.00
    </span>
  </div>

 

However the page already does have the price listed and I couldn’t find it in the code in Shopify. So I don't know how to change it.

3. I need to center the price

4. Add back the Buy it Now button, which appears briefly when the page loads but then disappears: https://www.loom.com/share/eec26eece2434bbfaa1b30bd2c5595b2 

5. Add a limit to how much text someone can enter into the Gift Note field and make Gift field same size as dropdown menus

6. Delete thumbnails and line below photo: https://share.getcloudapp.com/kpumoNAK

7. Move text further up page: https://share.getcloudapp.com/rRuLP0d1

 

 

I hope that all makes sense. Any help would be greatly appreciated!

 

Thanks!

0 Likes

Hello @picklepeople ,

CSS For https://number1sons.com/collections/sour-boxes/products/the-sour-box

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

need to center the price

#the-sour-box .h2.f--main.caps.regular.font-size--ml {
	text-align: center !important;
}

Delete thumbnails and line below photo

#the-sour-box .slider-nav.slick-initialized.slick-slider,#the-sour-box .slick-dots {
	display: none !important;
}

Move text further up page

 

#the-sour-box .product-content {
	padding-top: 0;
}

4. Add back the Buy it Now button, which appears briefly when the page loads but then disappears

As I saw your buy now button was display:none from your code

2019-12-07_15-45.jpg

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes