Product page customisation: adding gift card variations with picture + message box

Highlighted
Tourist
4 0 1

Hi, I am needing to have variations on product pages represented by a pic of each card the customer chooses (and not the title of the variation). Once a variation is chosen the customer gets a box to type in their personalised message. These variations are then added to the order notification I receive (& the checkout page for the customer). I currently have this set up on a WooCommerce Wordpress website...needing to recreate it in my new shopify website. 

 

0 Likes
Highlighted
Excursionist
32 4 9

Hey @jane1311, if I've understood your post correctly, you have a gift card product. You want the customer to be able to choose between different designs, and enter a custom message per card.

I'd say you just need variants of the gift card product, based on the design, and use variant images to represent the design. This image should then also show up in the checkout once the card is added in that design. For the custom message, you will want to do a line item property, recorded from a textbox.

If you're not on Shopify Plus, you won't be able to customise the checkout, but the variant image and line item property should show up by default. You can also edit your email notifications to express these in a format you like.

If your theme doesn't support something like this by default, you'll need to get a developer to implement it for you.

0 Likes
Highlighted
Tourist
4 0 1
Thanks for your response. It is not a gift card product as such, I am selling hampers which cone with a complimentary gift card that customers can add a personalised message to. So the only photos I want in the product carousel are of the hamper and it’s products. However, when I add each card as a variation, with pic, it adds the pic to the product photo carousel, and only has the text identification (not the photo) for each card at the top the product description on the RHS.
Once a customer chooses the complimentary gift card of their choice, I need the empty text box to appear so they can type in their message. I then need to gift card variation plus the message to appear on the order notification I receive.

I had assumed this capability was possible within the theme as I have seen other Shopify stores with this set up (& it was on one upskilling tutorial I watched) but am now wondering if it something I need to be coded in.
0 Likes
Highlighted
Excursionist
32 4 9

@jane1311 ah, ok. This is definitely pretty custom functionality, on other sites it may be provided through an app, but I'd say it's unlikely to be part of the theme. If you're able to develop it, I would make a {% section %} to handle this, with a block per design, and record the design value as a line item property alongside the message - but you would need to be on Plus to show the design as an image in the checkout. All of the form text field visibility/limitation functionality can be implemented in JS.

0 Likes
Highlighted
Tourist
4 0 1
Yeah right. No worries. Just trying to do all that I can myself, and then transfer anything that needs customised coding to a developer. Thanks so much for your help!
1 Like