Purchase Product on Separate Page - Yotpo Subscription

Technical Q&A
1

I would like to create a custom page with a custom template that has two products on it that can be purchased directly on the page. The two products are Yotpo subscriptions.

I reached out to Yotpo support who sent me this:

We recommend that you can add the following div code

above the “Add to Cart” button of the subscription product, and the widget will be displayed:

Additionally, please make sure to include the following script tag:

Which I did. And it shows the subscription options:

Screenshot 2023-06-29 090153.png
Screenshot 2023-06-29 090153.png373×149 5.15 KB

But I can get it to work with a buy button. How do I put the buy button on this page if I can’t embed the buy button due to the restrictions of it being a Yotpo subscriptions product:

“[The product] is marked as unavailable for the Buy Button channel.”

I can mark it as available, but I am not sure if it will break the subscription setup and I don’t want to do that.

Any help is appreciated… thanks.

2

I figured it out, so I will share what I did here in case anyone else wants to know how to do it.

First, assign the product to a variable

{% assign productvariable = all_products.the-product-handle %}

Then, include the form code from the product template, but replace references to product with your assigned variable:

{% form 'product', productvariable, data-productid: productvariable.id, id: product_form_id, class: product_form_class %}
  {% if productvariable.available %}{% render 'subscription-product' with productvariable as product %}{% endif %}
  

  {%- if block.settings.show_tax_and_shipping -%}
    {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
      

        

          {%- if cart.taxes_included -%}
            {{ products.general.include_taxes }}
          {%- endif -%}
          {%- if shop.shipping_policy.body != blank -%}
            {{ products.general.shipping_policy_html }}
          {%- endif -%}
        

      

    {%- endif -%}
  {%- endif -%}

  

  {%- liquid
      assign enable_dynamic_payment_button = false
      if block.settings.enable_payment_button and productvariable.selling_plan_groups == empty and is_preorder_product == false
        assign enable_dynamic_payment_button = true
      endif
  -%}

  
    

    {% if block.settings.show_quantity_selector %}
      
        {% render 'svg-subtract' %}
        
        {% render 'svg-add' %}
      

    {% else %}
      
    {% endif %}
    
    

    {% if enable_dynamic_payment_button %}
      {{ form | payment_button }}
    {% endif %}
  

{{ form | payment_terms }}