In this sixth lesson of our Build an Online Store Using Shopp we continue to show how to customize Shopp Templates. We begin by customizing the category view of products. Then we show how to add customer inputs to products and customize the product view. We finish the lesson by showing how to add conditional customer inputs to products.
Customize the Category View – Watch the Video
-
2 views – grid & list
- javascript adds either grid or list to div id shopp
- show this
- shopp default css has 2 style sets
-
Style the buttons
- details link container
- typical button
- hover condition
- link version
-
Stye the Grid View
- Frame
- Product Name
- details link
-
Style the List View
- Frame
- Product Thumbnail
- Product Name
- details link
Add Customer Input to products – Watch the Video
-
Add the template tag to the Product template
- product tag
- input property
- options
-
Add some directions
Customize the Product View – Watch the Video
-
Apply Thesis Universal Input Fixes
- input type = text
- select
-
Change product name
- change to h1 tag
- Add styling
-
Product description
- eliminate “big”
- add text style
-
Add to cart button
- apply to other button style
- adjust to reflect condition
Conditionally Add Customer Input to products – Watch the Video
- Create an array of products that will get inscriptions
- Retrieve data using a Shopp template tag
- Compare the product ID
- Conditionally display the input
