Drop down list of different Products on the product page

New Member
2 0 0

I have a subscription business for coffee, tilikumcoffee.com, and we have two basic offerings that can be purchased as a 1, 3, 6, or 12 month subscription. Due to how our subscription app works (ReCharge) each subscription option has to be it's own product. Variants can't be used.

I'm using the Debut theme and what I would like to do is have a drop down menu of each of the different products on each product page so that a customer can select, for example, the 6 month subscription which redirects him to the 6 month subscription product page. He could then select the 1 month option and it would redirect him to the 1 month product page and so fourth.

I did come across this tutorial, but it's for variant's so I'm not sure if it will work for me.

0 Likes
Shopify Expert
32 0 3

You could either :

1. create static pages for each product with just images, text and dropdown (that will simulate product page) and link to single product pages.

2. create products with variants with links to single product pages and create product option called Subscribe.

Links can be achieved by hacking the add to cart button like this (of course after ELSE there is a button on my product page, yours may look different) and then adding Links in SKU field (in case you do not need the SKU, I used it since I believe it is not that important) - I just added links to static pages, it can be any link, even some outside the store:

 

        {% if product.options[0] == 'Subscribe' %} 
			   <a class="btn subscribe-btn" href="">Go to Subscribe</a>
          {% else %}
          <button type="submit" name="add" id="addToCart" data-product-id="{{ product.id }}" class="btn add-to-cart">
          <i class="fa fa-cart-plus icon-cart-plus"></i>
          <span id="addToCartText">Add to cart</span>
          </button>
          {% endif %}

Then find this line on product page javascript:

var selectCallback = function(variant, selector) {
    if (variant) {

And add this right below that line:

$('.subscribe-btn').attr('href', variant.sku);

 

 

You can check it on my test page (this is my dev store):

https://knaus.myshopify.com/collections/curling-irons/products/glider-hair-straightener

Check my best sellling Shopify theme at https://themeforest.net/item/qrack-responsive-shopify-theme/10834410 Will save you hours of development work.
0 Likes
New Member
1 0 0

Hello, Tyler

 

I have an exact concern as you did.  I cannot find a solution other than hiring the expert

I wonder if you were able to figure out the issue. Please advise

Thanks

0 Likes
New Member
1 0 0
This looks like what I’m wanting to achieve, I have 1 product in stock available and would like to add 2 option choices to add to it. So the customer can choose one of the two before adding to cart. Am I just to copy and paste what you have here???
0 Likes