Categories on home page

Author	« Topic »
charmarsh Ecommerce Template Expert USA 950 Posts	Posted - 04/04/2023 : 15:48:06 How do i use a different image for the categories that are on my home page?
dbdave ECT Moderator USA 10451 Posts	Posted - 04/04/2023 : 16:20:27 If you are using the built in feature to show categories on the home page then there is no feature to use an alternate image. The category image will be used. However, there is nothing stopping you from creating your own html in a static manner and using any image you like and just linking to the category of your choice. David
charmarsh Ecommerce Template Expert USA 950 Posts	Posted - 04/04/2023 : 16:29:22 OK. Thanks Dave
charmarsh Ecommerce Template Expert USA 950 Posts	Posted - 04/05/2023 : 15:55:20 I've been struggling with how to build the same look for the 6 category images and containers, on my responsive home page. Can you help? this is how I want them to look, but I will use a standard link to the appropriate categories. https://www.waterbeds.com/NEWwaterbeddoctor/index.php Thank you
dbdave ECT Moderator USA 10451 Posts	Posted - 04/06/2023 : 06:23:11 Just view source on that page and copy the HTML there and paste it into the new page and make your edits. I have copied the code for you below. David <div class="categories"> <div class="category"> <div class="catimage"> <a class="ectlink" href="categories.php?cat=Sheets+and+Bedding"> <img alt="Sheets and Bedding" class="catimage" src="images/2011-BannerRevised_07.png"></a></div> <div class="catname"><a class="ectlink" href="categories.php?cat=Sheets+and+Bedding">Sheets and Bedding</a></div> <div class="catdesc"><p>Sheets, Comforters, Mattress Pads, Toppers and Pillows for Waterbeds</p></div></div> <div class="category"> <div class="catimage"> <a class="ectlink" href="categories.php?cat=Bedroom+Furniture"> <img alt="Bedroom Furniture" class="catimage" src="images/2011-BannerRevised_11.png"></a></div> <div class="catname"><a class="ectlink" href="categories.php?cat=Bedroom+Furniture">Bedroom Furniture</a></div></div> <div class="category"> <div class="catimage"> <a class="ectlink" href="categories.php?cat=Heaters"> <img alt="Heaters" class="catimage" src="images/2011-BannerRevised_05.png"></a></div> <div class="catname"><a class="ectlink" href="categories.php?cat=Heaters">Heaters</a></div></div> <div class="category"> <div class="catimage"> <a class="ectlink" href="products.php?cat=Wood+Frame+Mattresses"> <img alt="Wood Frame Mattresses" class="catimage" src="images/2011-BannerRevised_09-1.png"></a></div> <div class="catname"><a class="ectlink" href="products.php?cat=Wood+Frame+Mattresses">Wood Frame Mattresses</a></div></div> <div class="category"> <div class="catimage"> <a class="ectlink" href="categories.php?cat=Accessories"> <img alt="Accessories" class="catimage" src="images/2011-BannerRevised_03.png"></a></div> <div class="catname"><a class="ectlink" href="categories.php?cat=Accessories">Accessories</a></div></div> <div class="category"> <div class="catimage"> <a class="ectlink" href="products.php?cat=Softside+Side+Mattresses"> <img alt="Softside Side Mattresses" class="catimage" src="images/2011-BannerRevised_10-1.png"></a></div> <div class="catname"><a class="ectlink" href="products.php?cat=Softside+Side+Mattresses">Softside Side Mattresses</a></div></div></div>
charmarsh Ecommerce Template Expert USA 950 Posts	Posted - 04/06/2023 : 12:04:39 I'd like the images to fill the box at each responsive size. Is that doable?
dbdave ECT Moderator USA 10451 Posts	Posted - 04/06/2023 : 14:05:14 Sure you can do that with css <img style="height:100%;width:100%;" src="your-image-path"/> David
charmarsh Ecommerce Template Expert USA 950 Posts	Posted - 04/06/2023 : 15:26:13 I thought I was using "hc" style for the home page categories so it would not affect the other categories. I think it will be simpler if I just use the images without the boxes or names. When I tried this, all the images stacked. I need the six images to be spaced 3 next to each other same as now, but maybe wrap to 2 columns in smaller windows, then to a single column for mobile. Now, they stay at 3 columns and get very tiny, then jump to a single column full width. Thank you for your help!
Vince Administrator 42835 Posts	Posted - 04/09/2023 : 09:19:07 Hi Charmarsh For that you just need to set a breakpoint in the css file and you can see examples at the bottom of the ectcart.css file. For instance... @media all and (max-width:800px){ div.hc div.category { width: 45%; } } This is just an example and you may want to adjust the width and the width at which you get the "break". If you add this to the bottom of your stylesheet then in takes precedence over earlier settings. Vince Click Here for Shopping Cart Software Click Here to sign up for our newsletter Click Here for the latest updater
	« Topic »