Add Baseprice on Product page and Product Grid

Comments

25 comments

  • Avatar
    DD

    Hi,

     

    I am looking for the same information. Have you been able to resolve the issue?

    As each Theme is structured different the guide from Shopify is not really useful.

     

    Thanks

    0
    Comment actions Permalink
  • Avatar
    minc

    Hi DD,

    I have hired an expert on stortasker to do the modifications. I'll report here as soon as it's done.

    In general I think such a mod should be done by the theme developer. Specially if the theme is in a price range like this one.

    Although the flex theme seems to be great I would wish to have a better support team here.

    cheers

    4
    Comment actions Permalink
  • Avatar
    DD

    Hi Ingo,

     

    Thanks a lot. Would be great if you could share the solution here ;-) I agree that this option should be integrated in those themes as well as to handle taxes correctly in Europe. 

    0
    Comment actions Permalink
  • Avatar
    DD

    Hi Ingo,

    As far as I see OOTSB could relatively easy integrate this option at their TOP Themes. So again OOTSB, please add this "standard" functionality to your themes!!!!

    Do you already have a solution Ingo?

     

    Thanks

    1
    Comment actions Permalink
  • Avatar
    Oleg Schmidt

    We run into the same issue.

     

    Is there a solution or can we expect one from OOTSB?

     

    Regards!

    0
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    Hello everyone,

    Do any of you now have a solution for the Unit Price problem? I have the same problem. I have the flex theme.

     

    Best Regards

     

    Matthias

    0
    Comment actions Permalink
  • Avatar
    nils

    same here, waiting since months. it´s a shame that it´s not build in the themes.

    0
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    Hey,

    i got a solution from a developer (Metafields Guru). This is an APP, that can create Metafields. I think this is a great temporary solution up to the update from out of the Sandbox (they will add this feature in 2020). If you have a big catalog it might be a little bit of work to add the unitprice, because you need to add it manually for every product in a metafield. But the big benefit ist, that it changes automaticly the unitprice if you change variants in the product page!

    I programmed an other solution by myself before, but the problem there was, that the unitprice was not changing when a variant was changed on the product page. If you dont use variants in shopify, my own solution mght be the better one because it shows automaticly the correct unitprice without adding the unitprice in metafields for every product.

    If you use variants the way with metafields guru might be the better solution because it changes automaticly.

     

    interested?

     

    0
    Comment actions Permalink
  • Avatar
    Justin Busch

    Hey Marcel,

    I hope you are seeing this. Would you mind sharing your solution with me in detail? I am having the same problem. Would be willing to pay for the right info! 

    Regards,

    Justin

    0
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    Hey Justin, sure. wich variant? First is with the app Metafields GURU. Second is by myshelf ;-). Do you use variants? Problem by metafields Guru is that there is a problem with safari on mobile... so it might be an big problem.

    1
    Comment actions Permalink
  • Avatar
    nils

    Hey Marcel, you wrote that OOTSB will have implemented it in 2020. Was this a fact or are wish?

    Nils

    0
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    That was my wish :-). I asked the support and they told me that it will be there at the end of 2020. But I think they had some other important updates, so it will take a little bit longer. But I am not updated right now. may it is implemented already. Fact is, that the best solution is programmed by OOTSB. My solution is okay to be legal conform, but at the end it is not the same...

    0
    Comment actions Permalink
  • Avatar
    Justin Busch

    Hey Marcel, appreciate the quick answer! Unfortunately, we do use variants which makes your own solution not viable, right? 

    0
    Comment actions Permalink
  • Avatar
    nils

    Ok, got it.

    No, there is no progress in this case.

    My impression is, that they don´t put much effort in aftersales support. Every request I had, was declined: unit price, support for Mailchimp "Form Action URL" etc. pp.

    Since that experience, we never bought a theme of them again and put more budget in own developement.

    0
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    @ nils. I can understand that. The problem arises  at the point that we all? come from Europe and it is legally simply necessary. In other countries it is not necessary. Therefore it is probably not a prio. but you also have to say that the themes are worth the money. In contrast to others, these are worlds apart. If you find a good Shopify programmer can certainly customize you a lot

    @ Justin. My solution works, but as soon as you change the variants, you have to update the page so that the base price adjusts. There is no Java script behind it. That would be the only problem. You can argue if this is problematic or not. I find it not optimal. As soon as you aktuallisiertst but also changes the base price.

    0
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    * as soon as you update the page, the price chages (there was an germen word, sorry :D)

    0
    Comment actions Permalink
  • Avatar
    minc

    Hi,

    I'm the starter of this topic. Maybe I can extract the code changes and document them here. My solution works smooth with variants. Probably I'll find some time the next days to post it here.

    1
    Comment actions Permalink
  • Avatar
    Marcel Wohn

    Hey,

    is your solution with metafields app? (I only ask out of interest)

    And does it works on safari mobile? If yes your solution might solve all problems :-)

    0
    Comment actions Permalink
  • Avatar
    minc

    it's just some changes in theme files. Then it renders the shopify build-in baseprice fields. But you need to get the baseprice function activated by shopify first.

    0
    Comment actions Permalink
  • Avatar
    Justin Busch

    minc That would be awesome! Looking forward to your solution. Send me your PayPal and I'll gladly send you some money for a coffee or a beer haha :D.

    Marcel Wohn Thank you as well. For now, I will wait for the optimal solution by minc. 

    0
    Comment actions Permalink
  • Avatar
    nils

    hi minc, great offer. Please share your solution and a buymeacoffee link.

    Nils

    0
    Comment actions Permalink
  • Avatar
    minc

    Hi Justin,

    so here is my quick-and-dirty instruction. Please let me know if it works.

    Note: my flex is not up2date, so this might vary if you are using the newest version.

    cheers

    Instruction: read from top to bottom!

    File: assets\utilities.js **********************

    Find:
    if (variant.price > 0) {
    $('.current_price', $product).html('<span class="money">' + Shopify.formatMoney(variant.price, $('body').data('money-format')) + '</span>');
    } else {
    $('.current_price', $product).html(Shopify.translation.free_price_text);
    }

    Add below:
    try{
    if(variant.unit_price_measurement){
    var ref="";
    if(variant.unit_price_measurement.reference_value != 1){
    ref=variant.unit_price_measurement.reference_value;
    }
    ref+=variant.unit_price_measurement.reference_unit;
    $('#unitPrice').html('<span data-unit-price>'+Shopify.formatMoney(variant.unit_price, $('body').data('money-format'))+'</span><span aria-hidden="true">/</span><span data-unit-price-base-unit>'+ref+'</span>');
    document.getElementById("unitPriceContainer").style.display=null;
    }else{
    document.getElementById("unitPriceContainer").style.display="none";
    }
    }catch(e){
    console.log("Error updating unit price: ");
    console.log(e);
    }


    File: assets\utilities.js **********************

    Find:
    showQuickShop: function showQuickShop() {
    //EVENT - click on quick-shop
    $('body').on('click', '.js-quick-shop-link', function (e) {
    e.preventDefault(); //Set productData object based on data attributes

    Add below:
    var variant=$(this).data('variant');
    try{
    if(variant.unit_price_measurement){
    var ref="";
    if(variant.unit_price_measurement.reference_value != 1){
    ref=variant.unit_price_measurement.reference_value;
    }
    ref+=variant.unit_price_measurement.reference_unit;
    $('#unitPrice').html('<span data-unit-price>'+Shopify.formatMoney(variant.unit_price, $('body').data('money-format'))+'</span><span aria-hidden="true">/</span><span data-unit-price-base-unit>'+ref+'</span>');
    document.getElementById("unitPriceContainer").style.display=null;
    }else{
    document.getElementById("unitPriceContainer").style.display="none";
    }
    }catch(e){
    console.log("Error updating unit price: ");
    console.log(e);
    }


    File: layout\theme.liquid **********************

    Find:
    data-money-format="{{ shop.money_format }}"
    data-shop-url="{{ shop.url }}">

    Add below:
    <style>
    .price__unit dt, dd{
    display:inline-block;
    }
    </style>




    File: sections\product__main.liquid **********************

    Add this code where you want the baseprice to be rendered:

    {%comment%}Unit Price{%endcomment%}
    <div class="price__unit" id="unitPriceContainer" style="{% unless product.available and variant.unit_price_measurement %}display:none{%endunless%}">
    <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd id="unitPrice" class="price-unit-price">
    {%- capture unit_price_separator -%}
    <span aria-hidden="true">/</span>{%- endcapture -%}{%comment%}<span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>{%endcomment%}

    {%- capture unit_price_base_unit -%}
    <span data-unit-price-base-unit>
    {%- if product.available and variant.unit_price_measurement -%}
    {%- if variant.unit_price_measurement.reference_value != 1 -%}
    {{- variant.unit_price_measurement.reference_value -}}
    {%- endif -%}
    {{ variant.unit_price_measurement.reference_unit }}
    {%- endif -%}
    </span>
    {%- endcapture -%}
    <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
    </div>




    File: snippets\product-thumbnail.liquid **********************

    find:
    .shopify-model-viewer-ui model-viewer {
    --progress-bar-height: 2px;
    --progress-bar-color: {{ settings.regular_color }};
    }
    {% endstyle %}
    {% endif %}

    add below:
    {%assign variant= product.selected_or_first_available_variant%}


    File: snippets\product-thumbnail__quick-shop-button.liquid **********************

    find:
    {% else %}
    {%- capture productDescription -%}
    {{ product.description | strip_html | replace: 'Description', '' | replace: 'Dimensions', '' | replace: 'Details', '' | replace: 'Specs', '' | replace: 'Shipping', '' | replace: 'Size', '' | escape }}
    {%- endcapture -%}
    {% endif %}

    <div class="quick-shop__buttons animated fadeInUp">
    <span class="quick_shop button action_button {{ settings.quickshop_button_style }} js-quick-shop-link"
    data-id="{{ product.id }}"
    data-handle="{{ product.handle }}"

    replace by:
    {% else %}
    {%- capture productDescription -%}
    {{ product.description | strip_html | replace: 'Description', '' | replace: 'Dimensions', '' | replace: 'Details', '' | replace: 'Specs', '' | replace: 'Shipping', '' | replace: 'Size', '' | escape }}
    {%- endcapture -%}
    {% endif %}

    {%assign unitprice=variant.unit_price | money%}
    {%assign temp=variant%}
    {%for v in product.variants%}
    {%if v.price==product.price_min%}
    {%assign unitprice=v.unit_price | money%}
    {%assign temp=v%}
    {%break%}
    {%endif%}
    {%endfor%}

    <div class="quick-shop__buttons animated fadeInUp">
    <span class="quick_shop button action_button {{ settings.quickshop_button_style }} js-quick-shop-link"
    data-id="{{ product.id }}"
    data-variant='{{ temp |json }}'
    data-handle="{{ product.handle }}"


    File: \snippets\quick-shop.liquid **********************

    find:
    {% if settings.quickshop_show_price_savings %}
    <span class="sale savings js-savings"></span>
    {% endif %}

    add below:
    {%comment%}Unit Price{%endcomment%}
    <div class="price__unit" id="unitPriceContainer">
    <dt>
    <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd id="unitPrice" class="price-unit-price">
    </dd>
    </div>
      
    0
    Comment actions Permalink
  • Avatar
    minc

    https://www.buymeacoffee.com/minc

    cheers

    0
    Comment actions Permalink
  • Avatar
    Justin Busch

    minc Appreciate the quick answer! Unfortunately, I am a total noob when it comes to coding and using the turbo theme, so there are differences and I am not able to replicate your instructions. Are you a developer and do one-off jobs by any chance? 

    Anyways, sending you a coffee right now for your efforts! :)

    0
    Comment actions Permalink
  • Avatar
    minc

    Hi Justin,

    oh sorry, as my initial post refers to flex theme I thought we are still talking about flex.

    I don't know turbo theme, so probably I would not get it running in minutes.

    Thank for the coffee :-)

     

    0
    Comment actions Permalink

Please sign in to leave a comment.