Products with options

This tutorial will guide you through all the steps needed to create a product with options. 

Before creating a product with options we need to have SKUs which will become the product's options. For a product to become visible to the front-end users, the SKUs have to be active and have inventory levels grater than zero. Also the product itself must be set as active.

For this tutorial will create a product with multiple color and size options.

Screen_Shot_2013-07-22_at_9.57.12_AM.png

 

1. Click on the Shop tab.

Screen_Shot_2013-07-19_at_12.52.42_PM.png

 

2. Click on the Manage Products the on the Product with options menu items.

Screen_Shot_2013-07-22_at_9.54.50_AM.png

 

3. Click on Add product with options button.

Screen_Shot_2013-07-22_at_9.55.13_AM.png

 

4. Provide the product Name.

Screen_Shot_2013-07-22_at_10.03.47_AM.png

 

5. The Slug is used to construct the URL for this product. Once the product is saved the URL for this product can be seen by clicking on the View on site link found at the upper right corner of the product page.

Screen_Shot_2013-07-22_at_10.03.54_AM.png

 

6. Checkmark to activate this product. 

Screen_Shot_2013-07-22_at_10.03.59_AM.png

 

7. Checkmark to have this product featured.

Screen_Shot_2013-07-22_at_10.04.05_AM.png

 

8. Set the order in which this product will show on the product category pages. The products with lower order values will show first.

Screen_Shot_2013-07-22_at_10.04.13_AM.png

 

9. Write a Description for this product.

Screen_Shot_2013-07-22_at_10.04.20_AM.png

 

10. Provide the Style for this product. 

Screen_Shot_2013-07-22_at_10.04.27_AM.png

 

11. Provide the options for this product.

Screen_Shot_2013-07-22_at_11.39.22_AM.png

 

12. Select a Default Category.

Screen_Shot_2013-07-22_at_10.04.59_AM.png

 

13. Select the other categories this product should be associated with.

Screen_Shot_2013-07-22_at_10.05.08_AM.png

 

14. Select the Sites where this product will be shown.

Screen_Shot_2013-07-22_at_10.05.18_AM.png

 

15. Select the Brand from the dropdown list.

Screen_Shot_2013-07-22_at_10.05.25_AM.png

 

16. Click on the Show button for Advanced options.

Screen_Shot_2013-07-22_at_10.05.40_AM.png

 

17. The default HTML template used by this product page is meta_catalog/product_detail.html. Write template name in the Detail template name field to use a custom template.

Screen_Shot_2013-07-22_at_10.05.48_AM.png

 

18. A custom URL can be set for this product page.

Screen_Shot_2013-07-22_at_10.05.55_AM.png

 

19. Click on the magnifying glass to select the SKUs which will become the Product options for this product.

Screen_Shot_2013-07-22_at_10.06.15_AM.png

 

20. Use the Product Images section to upload product images for each product option. Click on the Choose File to select and upload an image from your computer. The order value sets the order in which the images will be shown on the product page. Then withe the option name. In this example Option 1 is the Color and the option name for which we upload this image is Coral.

Screen_Shot_2013-07-22_at_10.07.46_AM.png

 

21. The product price will be automatically set based on the SKU (product option) with the lowest price. Once this product is saved you can add extra price information like the MSRP or the Retail price by clicking on the Show link.

Screen_Shot_2013-07-22_at_12.51.43_PM.png

Two product product prices were automatically created one for the Public Customers and one for the Authenticated Customers. 

Screen_Shot_2013-07-22_at_12.51.55_PM.png

 

22. Use the Product Attributes section to add extra key/value information for this product.

Screen_Shot_2013-07-22_at_10.08.36_AM.png

 

23. Videos can be added by using the Product Videos section.

Screen_Shot_2013-07-22_at_1.46.07_PM.png

 

24. To add a video located on video sharing web sites such as YouTube or Vimeo, add the share link in the Oembed code text field.

Screen_Shot_2013-07-22_at_10.10.48_AM.png

 

25. If you prefer to  use a video located on your computer click on the Choose Video button to select the video file.

Screen_Shot_2013-07-22_at_10.10.58_AM.png

 

26. To upload a Thumbnail image for this video click on the Choose File button to upload the image.

Screen_Shot_2013-07-22_at_10.11.06_AM.png

 

27. Write a Caption for this video.

Screen_Shot_2013-07-22_at_10.11.11_AM.png

 

28. If multiple videos are loaded to this product you can control the order in which the videos are displayed by modifying the Order value. Videos with lower order values will be displayed first.

Screen_Shot_2013-07-22_at_10.11.16_AM.png

 

29. Related products can also be shown on the same product page. Click on the magnifying glass to select the related products.

Screen_Shot_2013-07-22_at_10.11.30_AM.png

 

30. The Meta Data Object section is used for search engine optimization and for customizing the way this product page will show when shared on social media networks.

Screen_Shot_2013-07-22_at_10.11.40_AM.png

 

31. Click on the Load Levels link to show the most recent inventory levels for the SKUs associated with this product.

Screen_Shot_2013-07-22_at_10.11.57_AM.png

 

32. Save.

Screen Shot 2013-07-17 at 12.03.20 PM.png

 

 

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk