Lesson 6 – Customize Shopp Templates Pt 2
Facebook
LinkedIn
Google+
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.
-
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 the template tag to the Product template
- product tag
- input property
- options
-
Add some directions
-
Apply Thesis Universal Input Fixes
-
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
- Create an array of products that will get inscriptions
- Retrieve data using a Shopp template tag
- Compare the product ID
- Conditionally display the input
Save $200 on Membership Now!
Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
Facebook
LinkedIn
Google+