Supply Thm: 2 requests - remove $0.00 and add contact button

Solved
psd_llc
Excursionist
12 1 2

Hello!

I've scoured community and the webs but unsuccessful in applying the information I found, which seemed to have worked for other people. My experience level is very novice.

1) There is a certain brand of products we do not want to be shop-able online but still display the images and description text when clicked on; items are available but we want customers to contact us directly. So where the price will show as $0.00 - we would like to remove that from product page and anywhere else $0.00 will show up (like collections or lists?).
  [[ I somehow managed to "remove/hide" the Add to Cart and Buy It Now buttons... but now there is all this empty space between the title and the start of the description. Any idea how to move up the description text? ]]

2) For these custom items, we would like to add a button that says "Contact Us For Pricing" or something to that effect. Once that button is clicked, we want the customer to be directed to a new contact form but with specific questions, i.e., -Which product(s) are you interested in?; How many operatories?; Ceiling height measurement?; etc.
  For now, I just have text that says "...contact us...." in the description.


1----For $0.00 I tried

{% if product.price > 0 %}
  {{ product.price }}
{% endif %}


in section/products-template.liquid and in snippets/product-list-item.liquid, under where I could find "price".
Also tried it in snippets/price.liquid.
I am either adding it in the wrong section or on the wrong template/snippet.


2----I don't even know where to start on this one >__<


If you are able to help, can you be specific on where to post codes?  like... go to edit code -- sections -- products-template.liquid -- line 5000 or under {% if section.settings.product_vendor_enable %}. (I am of the type of person who follows a recipe exactly but somehow the food still comes out terrible)

 

Thanks much in advance!!

0 Likes
VishvasMishra
Shopify Partner
189 38 44

@psd_llc 

Which theme you have used and where you want to show contact from product page or product listing page.

Thanks

Vishvas Mishra

For Design, Development and custom changes Hire Me.
If your problem solved then Like & Accept this Solution.
Email ID: technicalvishvas@gmail.com
0 Likes
psd_llc
Excursionist
12 1 2

We are using the Supply theme. Attached is what a product page looks like. Again, I have already removed the 'Add to Cart' and 'Buy It Now' buttons.

Where '$0.00' is showing, I would like to hide that or remove, including other products that shows that price.

The orange rectangle is where I would like the 'Contact Us' button to go.

The area with the red brackets is empty space that I would like to see if I could minimize.

Screenshot_2020-07-31 ADS AJ12 Patient Chair.jpg

0 Likes
psd_llc
Excursionist
12 1 2

This is an accepted solution.

EDIT: My problem was solved off of Community.

0 Likes
iramccully
Excursionist
11 1 4

Any chance you can explain how you did this? I'ts exactly what I'm looking to do. Contact button instead of buy button for a product.

0 Likes
psd_llc
Excursionist
12 1 2

Hey @iramccully! Sorry for the late response. I ended up getting help from a Shopify expert. They created a new section (along with a template) and I wouldn't be able to tell you exactly what they did from here. 

We only want certain products to not show prices - so when adding (or editing) a product, somewhere on the right will be a small section "Theme templates", and from there I would select the appropriate template to use for those products. Does that make sense?

Are you familiar with code? If you want, I can send you what they created - you would just need to figure it out  >___<  where to edit and input to fit your site. I'm still using the Supply theme.

Screenshots below of the product with hidden price. Clicking that button will bring viewers to the contact page (for the custom fields I looked elsewhere and now I don't remember where or how).

 

Screenshot_2020-10-27 ADS AJ16 Beyond 400 Operatory Package with Left Right Swing Unit.pngScreenshot_2020-10-27 Contact US.png

0 Likes
iramccully
Excursionist
11 1 4

Oh heck yeah I would love to see that code! Copy paste in here and I'll mark this as resolved. I ended up doing something like this in debut theme, but it was scabby and then broke when I switched to warehouse.

 

0 Likes
psd_llc
Excursionist
12 1 2

Hey! OK so this is titled product-contact.liquid under Sections:

<div id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-zoom-toggle="zoom-in" data-zoom-enabled="{{ section.settings.product_image_zoom_enable }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-social-sharing="{{ section.settings.social_sharing }}" data-show-compare-at-price="{{ section.settings.product_show_compare_at_price }}" data-stock="{{ section.settings.product_quantity_message }}" data-incoming-transfer="{{ section.settings.product_incoming_message }}" data-ajax-cart-method="{{ settings.ajax_cart_method }}">
{% include 'breadcrumb' %}

{% case section.settings.add_to_cart_button_size %}
  {% when 'small' %}
    {% assign btn_class = 'btn' %}
  {% when 'medium' %}
    {% assign btn_class = 'btn btn--wide' %}
  {% when 'large' %}
    {% assign btn_class = 'btn btn--full btn--large' %}
{% endcase %}
  

  

{% if section.settings.add_to_cart_button_size == 'large' %}
  <style>
    .selector-wrapper select, .product-variants select {
      max-width: 100%;
    }
  </style>
{% endif %}

{% if section.settings.product_quantity_enable == false %}
  <style>
    .selector-wrapper select, .product-variants select {
      margin-bottom: 13px;
    }
  </style>
{% endif %}

<div class="grid" itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
  <meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

  <div class="grid-item large--two-fifths">
    <div class="grid">
      <div class="grid-item large--eleven-twelfths text-center">
        <div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
          {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
          {% for image in product.images %}
            {%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
            {%- assign max_width = 700 -%}
            {%- assign max_height = 1024 -%}

            {%- include 'image-logic' with width: max_width, height: max_height -%}

            {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
            <div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
              <div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                <img id="{{ img_id }}"
                  {% if forloop.first == true %}
                  src="{{ featured_image | img_url: '300x300' }}"
                  {% endif %}
                  class="lazyload no-js lazypreload"
                  data-src="{{ img_url }}"
                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}"
                  {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>
              </div>
            </div>
            {% if forloop.first == true %}
              <noscript>
                <img src="{{ image | img_url: '580x' }}"
                  srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
                  alt="{{ image.alt }}" style="opacity:1;">
              </noscript>
            {% endif %}
          {% endfor %}
        </div>

        {% if product.images.size > 1 %}
          <ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

            {% for image in product.images %}
              <li class="grid-item medium-down--one-quarter large--one-quarter">
                <a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
                  <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                </a>
              </li>
            {% endfor %}

          </ul>
        {% endif %}

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

  <div class="grid-item large--three-fifths">

    <h1 class="h2" itemprop="name">{{ product.title }}</h1>

    {% if section.settings.product_vendor_enable %}
      <p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
    {% endif %}

    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

      {% assign variant = product.selected_or_first_available_variant %}

      <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
      <meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">


      {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
        <div class="product__policies rte">
          {%- if shop.taxes_included -%}
            {{ 'products.general.include_taxes' | t }}
          {%- endif -%}
          {%- if shop.shipping_policy.body != blank -%}
            {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
          {%- endif -%}
        </div>
      {%- endif -%}

      <hr id="variantBreak" class="hr--clear hr--small">

      <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

      {% capture "form_class" -%}
        addToCartForm{% if section.settings.enable_payment_button %} addToCartForm--payment-button{% endif %}
      {%- endcapture %}

      {%- capture "form_id" -%}addToCartForm-{{ section.id }}{%- endcapture -%}

      {% form 'product', product, class:form_class, id:form_id, data-product-form: '' %}
        <select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}" style="display: none;">
          {% for variant in product.variants %}
            {% if variant.available %}

              <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{% unless product.price <= 0 %}
                																																							{{ variant.title }} - {{ variant.price | money_with_currency }}
          																																									{% endunless %} </option>

            {% else %}
              <option disabled="disabled">
                {{ variant.title }} - {{ 'products.product.sold_out' | t }}
              </option>
            {% endif %}
          {% endfor %}
        </select>
      <br>
      <a href="/pages/get-in-touch" class="btn" target="_blank">{{ 'products.product.contact_us_button' | t }}</a>
      
      {% endform %}

      <hr class="{% if section.settings.enable_payment_button %}product-template-hr{% endif %}">
    </div>

    <div class="product-description rte" itemprop="description">
      {{ product.description }}
    </div>

    {% if section.settings.social_sharing_products %}
      {% include 'social-sharing' %}
    {% endif %}

  </div>
</div>

{% if section.settings.related_products_enable %}
  {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
  {% include 'related-products' %}
{% endif %}

{% if section.settings.product_reviews_enable %}
  <hr>
  <div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
{% endif %}

{% unless product == empty %}
  <script type="application/json" id="ProductJson-{{ section.id }}">
    {{ product | json }}
  </script>
  {% if section.settings.product_quantity_message or section.settings.product_incoming_message %}
    <script type="application/json" id="VariantJson-{{ section.id }}">
      [
        {% for variant in product.variants %}
          {% capture variant_inventory %}
            {%- if section.settings.product_incoming_message -%}
              ,
              "incoming": {% if variant.incoming == 'null' or variant.next_incoming_date == null %}false{% else %}{{ variant.incoming | default: false | json }}{% endif %},
              "inventory_policy": {{ variant.inventory_policy | json }},
              "next_incoming_date": {{ variant.next_incoming_date | date: format: 'date' | json }}
            {%- endif -%}
            {%- if section.settings.product_quantity_message -%}
              ,
              "inventory_quantity": {{ variant.inventory_quantity | json }}
            {%- endif -%}
          {% endcapture %}
          {
            {{ variant_inventory | remove_first: ',' | strip }}
          }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    </script>
  {% endif %}
{% endunless %}
</div>

Along with the above, they also created the template for it titled: product.requires-contact.liquid under Templates. Of course, you can name the titles however you like.

 

0 Likes
luigiferrara91
Tourist
11 0 1

Hi, thanks. Can you help me for do this with Debut Theme?

0 Likes