Skip to main content
O
O_Scarf
Participant
May 10, 2020
Answered

Cart quantity selector

  • May 10, 2020
  • 1 reply
  • 4163 views

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.

    This topic has been closed for replies.
    Correct answer Peter Villevoye

    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 Google: adobe 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.

    1 reply

    Peter Villevoye
    Community Expert
    Peter VillevoyeCommunity ExpertCorrect answer
    Community Expert
    May 10, 2020

    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 Google: adobe 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.

    O
    O_ScarfAuthor
    Participant
    May 11, 2020

    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.

    A
    AurorePhi
    Participant
    December 8, 2020

    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.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices