MAP Pricing + Add to Cart to see price

Highlighted
Tourist
10 0 1

Hi all,

I'm trying to find some way to comply with manufacturer enforced minimum advertised price, while still selling for less than that price. Is there a way I can show a higher price on a product's page than in the cart? 

Thanks,
Scott

0 Likes
Highlighted
Tourist
10 0 1

Well, I don't know if anyone will see this thread at all, but I figured it out. I now enter the MAP price as the compare at price, then our price as the item price. I then hide the item price from the page, and change the text on the add to cart button to "See Price In Cart". works for now!

0 Likes
Highlighted
Tourist
35 0 2

I too am interested in this, are there any other suggestions?

0 Likes
Highlighted
Tourist
35 0 2

"I then hide the item price from the page" MonsterMed How do you do that? Is it in code?

0 Likes
Highlighted
Tourist
10 0 1

Hey, I figured out something much less kludgey. It requires some basic scripting and modification of your theme file. 


There's a few things we need to address:
1.) Appearance on collection page. 

2.) Modifying the "Add to Cart" Button.

3.) Changing how the price displays on the product page.  

 

Collection Page

  • First, go to the products that require a MAP price to be displayed, and add the tag "map" to the product. Then...
  • Go to your shopify admin, then go to settings, and then template editor.
  • Go to "Snippets" and select "product-loop.liquid".
  • Find the section that starts with 
    <span class="price">
  • You'll need to add an if-then-else statement, saying "if the product contains this tag, instead of displaying the price, display this text". Here's what mine looks like! Italicized and bolded is the pertinent change.
         <span class="price">
          {% if product.available %}
            {% if product.compare_at_price_max > product.price %}
              {% if product.tags contains 'map' %}
                <h4 class="price">More Information</h4>
              {% else %}
                {% if product.compare_at_price_max > product.price %}
                  <del>{{ product.compare_at_price | money }}</del>
                {% endif %}
                {% if product.price_varies %}
                <small><em>from</em></small>
            	{% endif %}
          	    {{ product.price | money }}
              {% endif %} 
    	{% endif %}
          {% endif %}
        </span>
  • If done correctly, It should look something like this, dependent on your theme. 

I'll continue this shortly

0 Likes
Highlighted
Tourist
10 0 1

So on to parts 2 and 3...

Modifying the "Add to Cart" button.

  • While you're in the template editor, select "templates" then "product.liquid".
  • Find the line that starts with 
    <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
  • We're going to need to insert the very same "if-then-else" statement into this div. Again, how exactly you do this will depend on your theme, but for the purposes of this demo, I'm using the "Minimal" theme. Here's what my modified div looks like, and again, the pertinent change will be bolded and italicized. 

              <div class="purchase-section{% if product.variants.size > 1 %} multiple{% endif %}">
                 <div class="purchase">
                  {% unless product.available %}
                  <p>Sold Out</p>
                  {% else %}
                    {% if product.tags contains 'map' %} 
                      <input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="See Price In Cart" />
                    {% else %}
                      <input type="submit" id="add-to-cart" class="btn addtocart" name="add" value="Add To Cart" />
                    {% endif %}
                  <div id="cart-animation" style="display:none">1</div>
                  {% endunless %}
                 </div>
              </div>
  • If you did it right, any product which has the "map" tag will have this instead of the "Add to Cart" button.

 

 

0 Likes
Highlighted
Tourist
35 0 2

Wow thank you so much, it looks like this is going to help us out a lot!

0 Likes
Highlighted
Tourist
35 0 2

Wow that's actually a pretty elegant solution, thanks so much again.

0 Likes
Highlighted
Tourist
10 0 1

Glad to help Woki! On to part 3. For this section, I'm going to assume that your "Compare at Price" is set to the MAP price, and your "Price" is set to your actual selling price. This section will be trickier and maybe a bit ugly codewise (I am not a programmer, but play one when I have to). Again, how exactly you execute this will be dependent on your theme. If any of this has helped you, please feel free to upvote my replies! 

 

Editing your "theme.liquid"

  • In your template editor, Navigate to "Layouts" then "theme.liquid"
  • Again, we're using an if-then-else statement here. The cool thing is that the liquid script works right alongside the jquery, so you don't really have to learn too much jquery syntax to successfully make little changes like this. That said, this part is ugly, and I only came to it after much trial and error in a test environment! Again, I am not a programmer. 
  • You'll need to locate the section in your theme.liquid that begins with the line. Remember, you do this modification at your own risk, here there be dragons, and whatnot!
    var selectCallback = function(variant, selector) {
  • Somewhere underneath that you'll see this line: 
    if(variant.price < variant.compare_at_price){

          Followed by a jQuery statement that determines how pricing is displayed. What it's doing is displaying the compare at price and product price, as well loading in variant pricing, and showing the updated price when a variant is selected.  

  • What you want to do is copy that statement, making sure to get all the relevant curly brackets, and paste it into a text editor. In the text editor, change 
    Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
    

    to

    Shopify.formatMoney(variant.price, "<span style='display:none;'>" + "{{ shop.money_format }}") +"</span>");

    We'll refer to this modified statement as statement 1, and the original statement as statement 2. 

Next, you need to set up an if-then-else statement like so, substituting the actual code for the placeholders. 

{% if product.tags contains 'map' %}
  statement 1

{% else %}
  statement 2

{% endif %}

For me, the whole thing looks like this! it wasn't formatting correctly in the code snippet. 

  var selectCallback = function(variant, selector) {
    if (variant && variant.available) {
      jQuery('#add-to-cart').removeAttr('disabled').removeClass('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
      if(variant.price < variant.compare_at_price){
        {% if product.tags contains 'map' %}
        jQuery('#price-preview').html(" <del>" + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + "</del>" + Shopify.formatMoney(variant.price, "<span style='display:none;'>" + "{{ shop.money_format }}") +"</span>");
      } else {
        jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
      }

        {% else %}
        jQuery('#price-preview').html("<del>" + Shopify.formatMoney(variant.compare_at_price, "{{ shop.money_format }}") + "</del>" + Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
      } else {
        jQuery('#price-preview').html(Shopify.formatMoney(variant.price, "{{ shop.money_format }}"));
      }
        {% endif %}
    } else {
      jQuery('#add-to-cart').addClass('disabled').attr('disabled', 'disabled'); // set add-to-cart button to unavailable class and disable button
      var message = variant ? "Sold Out" : "Unavailable";
      jQuery('#price-preview').text(message);
    }
  };
  

Hope this helps!

1 Like
Highlighted
New Member
1 0 0

Just offer them a discount if they like your page, use Advocado or something. Then you get the price you want, and a like.

0 Likes