Linking different products together for purchase

[motolanix1]

Hello,

I need some advice please.

I have a shopify store that sells custom tumblers, in different sizes. The customer will need to select a wrap (design to go onto tumbler) which they can select from the wraps page, so essentially customer will go to tumbler page, select tumbler and add to basket, then go to wraps page, select wrap and add to basket. This does not seem like the best user experience.

The challenge is where there are multiples of the tumblers and the wraps in the basket e.g. 2 tumblers and one wrap, 2 tumblers 2 wraps, 2 tumblers and 3 wraps, 2 different sized tumblers and 2 wraps etc., as I would need to know which wrap is for which tumbler.

The rules are:

• Customer can purchase a tumbler without a wrap
• Customer can purchase a tumbler with a wrap
• Customer cannot purchase a wrap only

Given the above challenge and in the spirit of giving customers a good user experience, what is the best and most efficient way to implement this on the website, so that the customer can select the tumbler, select the wrap and it get added to the basket, forming a relationship in the basket / before I receive the order, so I know exactly which wrap is for which tumbler.

Thank you.

[Shadab_dev]

Are these tumblers and wraps of different sizes or variations. Please always add your link to the store for reference. It’s hard to get to a conclusion without a visual.

Best

[PieLab]

Hi @motolanix1

You can move the wrap selection directly onto the Tumbler product page so they enter the cart as a single, combined unit.

If you do not need to track inventory for the wraps (e.g., they are just designs), use a Product Options app.

If you do need to track physical stock for wraps, use a Bundle Builder app, like BOGOS

That should be able to do the trick!

Hope this helps!

[motolanix1]

Hi Teeinblue team,

Thanks for your response. This app seems promising and could work. I just have a couple of questions please:

1. As the wraps are all in categories, what is the max list or selection of wraps that can displayed on the page, either via the drop down or in the box area? Would there be pagination? The reason I ask is that some of my categories have 20 wraps and some categories have 200 wraps so trying to understand or visualise how this appears on the product detail page.

2. Am I right in assuming that if I have the category for the wraps, customer selects the category and the selection of wraps appear, would it change the image/photo on the page to display e.g. wrap only, wrap on tumbler, both etc.

3. In preview mode, is it possible to display the wrap design on the tumbler? May not need to show it exactly how it would be all the way round the tumbler but good enough to wow the customer.

   Thanks

[motolanix1]

Hi @TeeinbluePOD, looking forward to your response to my questions. Thank you.

[diego_ezfy]

Hey @motolanix1 ,

You can achieve this without apps, you’d need ‘line item’ properties: the tumbler stays as one product. On the product page, you add a wrap selector inside the Add to Cart form. The selected wrap is saved per item and shows in the cart and in the order. No apps, no separate wrap products, and customers can still choose “No Wrap”.

I coded a simple solution for you, hopefully this can be useful:

1. Go to Online Store → Themes → Edit code
2. Open the product template (either main-product.liquid or product-template.liquid)
3. You will need to find an ‘add to cart’ btn in your code. Add the following code before it:

<label>Select Wrap Design (Optional):</label>
<select name="properties[Wrap Design]">
  <option value="No Wrap">No Wrap</option>
  <option value="Floral Sunset">Floral Sunset</option>
  <option value="Ocean Waves">Ocean Waves</option>
</select>

4. Go to a tumbler product page, select a wrap from the dropdown, add to cart, and confirm it shows under the product.

This is a very simple example, with some additional coding you can get it to show images, etc.

[motolanix1]

Thanks @diego_ezfy will also try this and see how it works.

[littlemissbeads]

Hi @diego_ezfy thanks for your response. I added the code, although tweaked it slightly see below:

<label class="form__label" for="WrapDesign">Select Wrap Design (Optional):</label>

<div class="select">

  <select id="WrapDesign" name="properties\[Wrap Design\]" class="select__select">

    <option value="No Wrap">No Wrap</option>

    <option value="Floral Sunset">Floral Sunset</option>

    <option value="Ocean Waves">Ocean Waves</option>

  </select>

</div>

Issue: The option I selected is not displayed under the product in the cart page

I then managed to update the code (shown below), to pull the actual wraps products from the collections “uv-dtf-wraps”, which worked, however I now have several wraps collections each with wraps products so the drop would need to:

1. Display a drop down of all the wraps collections
2. Once user selects a wrap collection, the wraps products within that wrap collection are displayed in the drop down
3. The wrap product is displayed under the product name in the add to cart page
   **
   Also:** I want to display the images of the wraps also so how can this be achieved?

{%- assign wraps_collection = collections[‘uv-dtf-wraps’] -%}

Select Wrap Design (Optional):

<select id="WrapDesign" name="properties\[Wrap Design\]" class="select__select">

  <option value="No Wrap">No Wrap</option>

  {%- if wraps_collection != blank and wraps_collection.products_count > 0 -%}

    {%- for wrap in wraps_collection.products -%}

      <option value="{{ wrap.title | escape }}">{{ wrap.title | escape }}</option>

    {%- endfor -%}

  {%- else -%}

    {%- comment -%}Optional fallback if collection missing/empty{%- endcomment -%}

    <!-- <option value="" disabled>(No wrap designs available)</option> -->

  {%- endif -%}

</select>

Any help on this would be greatly appreciated.

[motolanix1]

Hi @diego_ezfy, thanks for your response. I

Select Wrap Design (Optional):

No Wrap Floral Sunset Ocean Waves

Issue: The option I selected is not displayed under the product in the cart page

I then managed to update the code (shown below), to pull the actual wraps products from the collections “uv-dtf-wraps”, which worked, however I now have several wraps collections each with wraps products so the drop would need to:

1. Display a drop down of all the wraps collections
2. Once user selects a wrap collection, the wraps products within that wrap collection are displayed in the drop down
3. The wrap product is displayed under the product name in the add to cart page

Also: I want to display the images of the wraps also so how can this be achieved?

{%- assign wraps_collection = collections[‘uv-dtf-wraps’] -%}

Select Wrap Design (Optional):

No Wrap {%- if wraps_collection != blank and wraps_collection.products_count > 0 -%} {%- for wrap in wraps_collection.products -%} <option value="{{ wrap.title | escape }}">{{ wrap.title | escape }}</option> {%- endfor -%} {%- else -%} {%- comment -%}Optional fallback if collection missing/empty{%- endcomment -%} <!-- <option value="" disabled>(No wrap designs available)</option> --> {%- endif -%} </select> Any help here with the code will be greatly appreciated.

[Maximus3]

This seems to be a very strange way to put wraps and tumblers together..

Most people would find a way to use Photoshop/Illustrator to create product image with the graphic wrapping around the tumbler. Once the template framework is done, it’s simply a matter of replacing the graphic and saving the product image. Or just print the design, press the tumbler, and take a picture of the actual product. They would then create products and variants accordingly. Then create collections according to design category. Easy and simple.

[Easify-Ariel]

Hi @motolanix1

In your case, the main challenge isn’t selling tumblers and wraps separately, but optimizing the purchase experience and clearly linking each wrap to its corresponding tumbler. With this setup, Easify Product Options is a perfect fit, and the demo you’re seeing represents the optimal solution for your needs. Instead of having customers purchase tumblers and wraps on separate pages, the tumbler serves as the main product, with wraps configured as options directly on the tumbler product page.

Here’s an example I’ve created so you can see how it works:

• This is the result:

• This is the app setting:

In this demo, wraps are not standalone products, so customers can’t purchase them separately. However, they can buy a tumbler with or without a wrap, in line with your defined rules. All wrap options are attached to each tumbler at add-to-cart, ensuring that when multiple tumblers with different wraps are purchased, each item in the cart and order retains its correct wrap details.

For live preview, Easify allows customer selections to be displayed directly on the product page. In this demo, choices such as color, initials, name, font, or image upload are instantly reflected on the tumbler image, giving customers a clear preview of the final personalized product and creating a “wow” effect before purchase.

Additionally, options such as color, initials, name, font, and image uploads are clearly displayed on the product page and saved in the order, allowing you to accurately identify which wrap belongs to which tumbler during fulfillment. This keeps the customer experience clean while completely eliminating wrap mix-ups on the backend.

Additionally, Easify Product Options is easy to use and requires no coding or theme editing. You can create and manage options directly within the app through a user-friendly interface, making it suitable even for beginners.

[TeeinbluePOD]

Hi motolanix1, we would like to clarify some of your concerns:

1. Max wraps per category & display

We have a default limit of 300 options per category, and you can create unlimited categories for additional options. If you need more than 300 per category, our team can support to adjust it to fit your needs!

For how they display, you have several options:

• Thumbnail images

• Dropdown with option name

• Dropdown with option name + thumbnail

• Inline radio button

• Radio button

We’d recommend breaking larger categories into sub-categories (e.g., by theme, color, style) so customers don’t get overwhelmed – it makes the browsing experience much smoother!

2. Changing image based on selection

Yes, exactly! When a customer selects a category and picks a wrap, the preview image updates to show their selection. You have flexibility on what to display (wrap only or wrap on tumbler). It’s all based on how you set up your artwork layers and conditional logic.

3. Wrap design on tumbler in preview

The live preview will show exactly how the wrap design looks on the tumbler as the customer selects options in real time, just like I showed in the demo! We’re also working on a 3D view feature, but that’s currently on our roadmap and not available just yet.

That said, the current preview displays the wrap applied to the tumbler mockup beautifully – definitely enough to wow your customers and build confidence before they add to cart!

If you’d like more details or a quicker response, feel free to reach out to our live chat team in the app or via our website.

Happy to help!

[TeeinbluePOD]

When we said we’d recommend breaking larger categories into sub-categories so customers don’t get overwhelmed, and it makes the browsing experience much smoother!

Here’s an example of how sub-categories look and work. I’m using a mug with hairstyle options as a demo, but it functions the same way for your wraps:

1. We create a sub-category down with image for hair length, you can do the same with your wrap (e.g. by theme, color, style)

2. In each sub-category, we will show the hair image thumbnail so customer will know exactly how it looks. You can set them up here as the actual image of the wrap.

3. The preview will update the option customers choose immediately. As you can see, in step 1 the hair is red. In step 2, I chose orange hair color, and the preview changed immediately. Same will happen when your customers switch between wraps!

Just contact us if you have any other concerns or need more details!

[Parselab_Melissa]

@motolanix1

Hello,

I need some advice please.

I have a shopify store that sells custom tumblers, in different sizes. The customer will need to select a wrap (design to go onto tumbler) which they can select from the wraps page, so essentially customer will go to tumbler page, select tumbler and add to basket, then go to wraps page, select wrap and add to basket. This does not seem like the best user experience.

The challenge is where there are multiples of the tumblers and the wraps in the basket e.g. 2 tumblers and one wrap, 2 tumblers 2 wraps, 2 tumblers and 3 wraps, 2 different sized tumblers and 2 wraps etc., as I would need to know which wrap is for which tumbler.

The rules are:

• Customer can purchase a tumbler without a wrap
• Customer can purchase a tumbler with a wrap
• Customer cannot purchase a wrap only

Given the above challenge and in the spirit of giving customers a good user experience, what is the best and most efficient way to implement this on the website, so that the customer can select the tumbler, select the wrap and it get added to the basket, forming a relationship in the basket / before I receive the order, so I know exactly which wrap is for which tumbler.

Hi @motolanix1,

I hope you are doing well. To choose the custom Tumblr with or without wrap on the same product page, you can try the Inkybay – Product Personalizer app.

With Inkybay’s Product Option feature, you can create size options for custom Tumblr and display them as dropdowns, swatches, radio buttons, or checkboxes directly on the product page. If customers want to take the Tumblr without a wrap, they can also take it; if they want to take a wrap, they can choose. They can choose the Tumblr with or without wrap in a different size from the same product page.

Inkybay also lets you create many other different product options like text fields, file attachment options, swatch images, etc. All customer inputs are automatically included in the order file generated by Inkybay.

The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.

[jam_chan]

Hi @motolanix1

The easiest way is to set the wraps to unlisted products so customers can’t search for them in the store. These products can’t be purchased individually.

After that, set up a custom bundle to have 3 steps:

1. Select a size
2. Select a tumbler
3. Select a wrap

After adding the bundle to the cart, it stays as a group and can’t be broken down into individual products. Therefore, customers can’t remove the tumbler and buy the wrap.

Currently, we are working on a new guided bundle feature, which provides a guided selling experience to reduce selection complexity. Here’s a sample bundle you can try:

Guided Bundles

Feel free to contact us for a quick free consultation.

[Justas_AugmentStudio]

Hi @motolanix1 ,

We had exactly the same use case requested by a customer a few months ago for our app - a shop selling print products wanted to attach a “stickers” add-on to a product and needed to know which products these stickers belong to when purchased.

I have written a comprehensive guide on how to create upsells for AS Quantity Break & Upsell App, and included a section on achieving what you want (link takes you to that section): How to add product add-ons on Shopify with an upsell app - Augmentum Studios

Image below shows the settings that will:

• Add the product together with the main product
• Optionally, group the add-ons under the main product as “child” line items, which means you will see in your orders that these products were purchased together.
  • If 2 different tumblers were added to cart, each with a wrap, both tumblers in cart will have separate wraps listed under them.
  • You will clearly see in your order summary what wrap belongs to what tumbler
  • If a tumbler is removed from cart, the wrap is removed also automatically

Hope this helps!