Product page with product changing with a button

Highlighted
New Member
2 0 1

Hello guys,

 

I would like to make a product page with buttons which once a button is clicked it shows another model available in the same window that was showing the first product image.

just like on this page : https://kadonimo.com/products/tableau-personnalise-animal

 

if anyone can help me to find out how to do it with a solution or a link to a tutorial this would be awesome.

 

Thanks in advance ! 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
529 31 84

Hi, @Hocineloves.

 

Tira here, from Shopify Support.

 

It sounds like you're looking to match the main product image with a particular variant when it's clicked on the product page. Is that right?

We have a theme called Brooklyn that has buttons added to the product's page, where the customer can select a variant and the image would appear in the image preview of the product. If you haven't already, you'll need to upload images to each of your variants so that the appropriate variant is linked to the image for that variant. 

 

To add an image to a variant you can follow these steps:

- Login to your Shopify Admin

- Click on Products then click on the product you wish to edit

- Scroll down to the Variants section. There will be an image of a painting on the left side of each variant, click on this icon to upload or add an image to the variant 

 

You can check out all these steps to add a variant image from our help doc, here: Product Images

 

Let me know if that helps!

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
New Member
2 0 1

Thank you Tira ! I will check it out and try it !

1 Like
Highlighted
New Member
3 0 0

I have the same problem. I am selling a product which has 15 variants and i am using debut theme, Can i have a product page where customer just click on the variant and that variant get selected just like we see on aliexpress product pages. 


@Hocineloves wrote:

Hello guys,

 

I would like to make a product page with buttons which once a button is clicked it shows another model available in the same window that was showing the first product image.

just like on this page : https://kadonimo.com/products/tableau-personnalise-animal

 

if anyone can help me to find out how to do it with a solution or a link to a tutorial this would be awesome.

 

Thanks in advance ! 




0 Likes
Highlighted
Shopify Staff
Shopify Staff
529 31 84

Hi, @Ishan3.

 

Tira here, from Shopify.

 

I'm happy to help you with this question.

 

Debut is a theme that doesn't have the same formatting for variants (you can only choose a variant using the dropdown menu). If you want to set-up a product page with buttons for your variants, you can either switch to a theme like Brooklyn, or use an app to add buttons to your theme. 

 

If you decide to switch themes, you will need to customize the new theme as theme customizations do not carry over from theme to theme. 

 

I took a look at AliExpress and their product pages and it looks like their variant selection layout is similar to the ones shown in the Brooklyn theme. Here's a screenshot:

 

20-04-zrc3c-84t6w

 

You can see that there are 4 variants, and when one is selected, there is an outline around the box. Brooklyn has variants that are shown as buttons, so that when your customer lands on your product page, they can click on the variant directly to select the variant they wish to purchase of the matching product. 

 

You can link your variants to a linked image by following the steps I have outlined in my post above. 

 

If you wish to use an app, here are my recommendations from our App Store:

 

Advanced Product Options - You can add buttons and customize your variants to match the look of your store.

Perfect Switcher - You can use product swatches.

Infinite Product Options - This app allows you to add buttons, and other ways of customizing your product options.

 

You can see a list of similar apps, here: Product Option Apps.

 

These apps are created by third-party developers. You can contact the third-party developer by using the information listed in the "Support" section of the app's page, for any questions.

Please let me know if that helps! 

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
3 0 0

Thanks Tira,

Your reply is very supportive, As i have worked a lot in my current theme and i like the layout as well. I don't want to change my theme so i guess adding a app is only option for me.

Can you suggest a top free app as i have started just few weeks back and have not made any sales.

 

I love your reply thanks dear


@Tira wrote:

Hi, @Ishan3.

 

Tira here, from Shopify.

 

I'm happy to help you with this question.

 

Debut is a theme that doesn't have the same formatting for variants (you can only choose a variant using the dropdown menu). If you want to set-up a product page with buttons for your variants, you can either switch to a theme like Brooklyn, or use an app to add buttons to your theme. 

 

If you decide to switch themes, you will need to customize the new theme as theme customizations do not carry over from theme to theme. 

 

I took a look at AliExpress and their product pages and it looks like their variant selection layout is similar to the ones shown in the Brooklyn theme. Here's a screenshot:

 

20-04-zrc3c-84t6w

 

You can see that there are 4 variants, and when one is selected, there is an outline around the box. Brooklyn has variants that are shown as buttons, so that when your customer lands on your product page, they can click on the variant directly to select the variant they wish to purchase of the matching product. 

 

You can link your variants to a linked image by following the steps I have outlined in my post above. 

 

If you wish to use an app, here are my recommendations from our App Store:

 

Advanced Product Options - You can add buttons and customize your variants to match the look of your store.

Perfect Switcher - You can use product swatches.

Infinite Product Options - This app allows you to add buttons, and other ways of customizing your product options.

 

You can see a list of similar apps, here: Product Option Apps.

 

These apps are created by third-party developers. You can contact the third-party developer by using the information listed in the "Support" section of the app's page, for any questions.

Please let me know if that helps! 


 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
529 31 84

@Ishan3, you can use the Infinite Product Options app that I linked above, as it has a free plan. You can scroll down the app's page, where you will see what features are included with the plan.

 

I recommend checking out our blog post for some tips on making your first sale. It covers sending an email to your audience, selling to friends/family through social media, running contests, selling on other marketplaces like eBay, launching Facebook ads and other advice! My favourite tip is joining the Reddit community to build relationships and find a niche market with lots of interest in your products: How to Make Your First 10 Sales

 

If you have any questions, feel free to reply to this thread here and I would be happy to help. 

Tira | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes