Cart quantity selector

New Here ,
May 10, 2020

Copy link to clipboard

Copied

Hi all,

 

 I just started with XD a week ago and so far have worked out most things that I have wanted to do.

 

 I have now run into one item that I can't seem to find a solution to - I want a cart quantity selector with the +\- buttons to increase or decrease the number of units when tapped. Is this possible to create in XD?

 

Thanks, Ollie.

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

If Abobe would start implementing ready-to-use elements like these, letting them work for real, then very soon every one would start claiming tons of other widgets, gadgets, fidgets, whatever. That's not Adobe XD's goal. As a matter of fact, XD is more inclined to ley you to design it exactly the way you want it.

 

But relax, if that's too much of an effort, then there are also tons of templates and kits available, you can copy and paste from ! Just type in Googleadobe xd shopping cart templates and see them rolling onto your screen. Some examples:

https://www.xdguru.com/adobe-xd-ecommerce-templates/

https://www.behance.net/gallery/67085333/E-commerce-templatestore-themeshop-(FREE-Adobe-XD)

 

Keep in mind: you're designing the look, feel, and interaction – not building the complete thing. Any interactions like pressing a plus and seeing a number change, would require a few artboards to present these steps. So the artboard isn't technically the same thing as the final page or screen in the website or app. Artboards can represent separate interface stages as shown in one interaction.

Views

335

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Cart quantity selector

New Here ,
May 10, 2020

Copy link to clipboard

Copied

Hi all,

 

 I just started with XD a week ago and so far have worked out most things that I have wanted to do.

 

 I have now run into one item that I can't seem to find a solution to - I want a cart quantity selector with the +\- buttons to increase or decrease the number of units when tapped. Is this possible to create in XD?

 

Thanks, Ollie.

Adobe Community Professional
Correct answer by Peter Villevoye | Adobe Community Professional

If Abobe would start implementing ready-to-use elements like these, letting them work for real, then very soon every one would start claiming tons of other widgets, gadgets, fidgets, whatever. That's not Adobe XD's goal. As a matter of fact, XD is more inclined to ley you to design it exactly the way you want it.

 

But relax, if that's too much of an effort, then there are also tons of templates and kits available, you can copy and paste from ! Just type in Googleadobe xd shopping cart templates and see them rolling onto your screen. Some examples:

https://www.xdguru.com/adobe-xd-ecommerce-templates/

https://www.behance.net/gallery/67085333/E-commerce-templatestore-themeshop-(FREE-Adobe-XD)

 

Keep in mind: you're designing the look, feel, and interaction – not building the complete thing. Any interactions like pressing a plus and seeing a number change, would require a few artboards to present these steps. So the artboard isn't technically the same thing as the final page or screen in the website or app. Artboards can represent separate interface stages as shown in one interaction.

Views

336

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 10, 2020 0
Adobe Community Professional ,
May 10, 2020

Copy link to clipboard

Copied

If Abobe would start implementing ready-to-use elements like these, letting them work for real, then very soon every one would start claiming tons of other widgets, gadgets, fidgets, whatever. That's not Adobe XD's goal. As a matter of fact, XD is more inclined to ley you to design it exactly the way you want it.

 

But relax, if that's too much of an effort, then there are also tons of templates and kits available, you can copy and paste from ! Just type in Googleadobe xd shopping cart templates and see them rolling onto your screen. Some examples:

https://www.xdguru.com/adobe-xd-ecommerce-templates/

https://www.behance.net/gallery/67085333/E-commerce-templatestore-themeshop-(FREE-Adobe-XD)

 

Keep in mind: you're designing the look, feel, and interaction – not building the complete thing. Any interactions like pressing a plus and seeing a number change, would require a few artboards to present these steps. So the artboard isn't technically the same thing as the final page or screen in the website or app. Artboards can represent separate interface stages as shown in one interaction.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 10, 2020 0
New Here ,
May 11, 2020

Copy link to clipboard

Copied

Hi Peter,

 

 Thanks for your assistance with this. I will use a template for now so that I can continue on with the site. Although at some point I would like to learn how to make items like the quantity counter my self.

 

Thanks, Ollie.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 11, 2020 0
New Here ,
Dec 08, 2020

Copy link to clipboard

Copied

Hi Ollie,

 

I have found a solution for a quantity selector :

1. Create the design of your quantity selector.

2. Create text with the number 1 (or any number you want by default), wherever you want your numbers to be.

3. Create a rectangle above, which is roughly the size of the numbers you want to display.

4. Select the rectangle and the number and then right-click Mask with Shap.

5. In the same text box, write the others numbers you want to have, in column or in line (with enough space between the numbers so that there is only one number displayed in the rectangle mask).

6. Select all your qualtity selector and create a component.

7. Then add as many new states as needed (one per number).

8. Go to Prototype, with your component selected.

9. Click on your + button and add an interaction : Trigger : Tap / Type : Auto-Animate (or None, ...) / Destination : State 2 / (easing and duration are your choices).

10. Go back to Design, select the "State 2" of your component, and slide the column or row of numbers you created to the next number you want to display.

11. Go to Prototype, repeat 9. but destination is State 3

12. Same as 9. but for the - button and destination is the precedent State (here "default state").

13. Repeat 10. for "state 3".

14. And so on, until you run out of numbers.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Dec 08, 2020 0