Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

using images for product variations instead of drop down

Featured Replies

Hello I wonder if you can help or even if I am posting in the right place.

I have a friend who wants to do something along the lines of this - thebathory.com/invent

She has different products and she would like customers to choose 1 from each group of product to create a "gift set" of say 7 items.(if that makes sense). But using drop downs is not very pretty and she would like to use pictures as these people have done.....currently she uses paypal basic shopping basket and doesnt have much money to spare so I am trying to find out how this is done/ which shopping cart would be able to do it or if there is a clever way to continue using paypal.

I hope this makes sense as I would really like to help her out.

Welcome to the forums

 

PayPals add to cart feature allows you to add up to 10 options fields, where each option can add to the total, though it's not widely documented (they only usually show 2 options in example code). If you use their online form/button generator you can get the basic code, PayPal uses a select tag by default but you can change these to radio buttons then add in extra HTML for your images and other infor for each radio button option.

  • Author

Thank you Blue Dreamer for that info its helpful but not quite what I am after.

I will try to explain the product idea and maybe you can help me further :)

The actual product that the customer pays for is a gift box. Into the gift box the customer chooses 7 different beauty items but each item has upto 8 types.

 

It would be like having one shirt with a choice of sizes, colours, designs, fabrics, collars, buttons and hems. I hope this clears it up. I think paypal only offers the one product variation for example size but not colour (am I right maybe not?).

 

I need a solution that will be free or cheap but allow me to offer a lot of choices for one product and that I will be able to configure into using pictures rather than drop down, ambitious but surely must be doable, I just need to know where to look to start out.....then I am sure it will be a nightmare for me to code too but that will be a different story. It would be wonderful if you could have another clever solution :)

With that amount of variations and options the basic Paypal cart may not be powerful enough.

 

Unless you want to custom code something in PHP, or even Javascript, this sort of complexity is probably best handled by a proper shopping cart system, something like http://www.prestashop.com/ could be a good base system though you'd probably need to seek out a 3rd party module to get the functionality you need - either http://addons.prestashop.com/en/merchandising-prestashop-modules/5026-lookbook-product-sets.html or http://addons.prestashop.com/en/merchandising-prestashop-modules/1015-advanced-pack-5-create-bundles-of-products.html might fit.

Your drop-down menu choices should not exceed 10 menu items of 30 characters each (if you are using the Button Factory to generate your HTML code. If you are editing the code by hand, you may add additional menu choices)

 

 

It doesn't say anything about the amount of fields, only the amount of options, and even that only seems to apply to using the online generator. Using your t-shirt example, you could have one dropdown for t-shirt sizes, and one for colours (or however many you need). As long as the data gets sent to paypal, you should have a record that you can action. Having never done this, I'd imaging that this is down to naming the form fields appropriately, so "colour" would become "t-shirt_colour" ect.

 

To improve on this, it would be better if certain option fields loaded depending on the product. Basically, if you click "t-shirt", the related variations appear below the option. If I select "fridge magnet" instead, the options related to that would appear.

 

I'm not sure what level you would class your coding skills at, but this is a fairly ambitious form to create if you don't have much coding experience. Not only do you need to include javascript to hide and show elements, you also need to replace radio buttons with an image, which means you have to fight with the browsers default radio button style (this is can be tricky). I would recommend having a look at Wufoo, an online form builder. It has payment intergration (http://www.wufoo.com/payments/paypal/), rules for hiding and showing content (http://www.wufoo.com/features/#feature5) and even an article on swapping the images out on the radio buttons (http://www.wufoo.com/guides/custom-radio-buttons-and-checkboxes/). As long as each button has an ID, this shouldn't be too much work.

 

The desired outcome isn't going to look quite like your example, it would be significantly simplified. The Bathory has been developed custom for their site, and probably cost a fair bit from design through to implementation. It's quite impressive though.

 

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.