product-carousel

Product Carousel

Showcase your most important products for sale in the top region of your page.

Tips


Instructions

Product Carousel

In this tutorial, we’ll demonstrate how to update the Product Carousel layout. The Product Carousel ‘slides’ a series of div containers, from right to left. The default Jumbotron includes 3 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and an image.

We’ll learn how to:

  • change the item description
  • change the price
  • change the ‘Click for Details’ button
  • replace or remove the image
  • add and remove products

Video Demonstration ( skip the reading, just watch and learn! )

http://youtu.be/e2E6u114qsc

Change the item description

  1. Expand the Library sliders >> product-carousel (folder).
  2. Double click on the “product-carousel” page to open.
  3. The description text is easy to find, as it’s just text wrapped in a paragraph tag.
  4. Select the text with your mouse.
  5. Type a new description.
  6.  Save to update.

Change the pricing text

This is regular text on the page, just change as you would normally change the text on a page.

Change or remove ‘Click for details’ button

  1. To remove the button, place your mouse on the hyperlink, then click on the <a.btn btn-success> tag located in the Quick Tag Selector Toolbar, and delete.
  2. To change, right click with your mouse, and select Hyperlink Properties.
  3. Change the ‘Text to display:’ at the top to change the button name.
  4. Scroll through your pages to link to a new page, or type the name of the page manually.
  5. Click OK to save.

Replace or remove the image

  1. Expand the Library >> sliders >> product-carousel (folder).
  2. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website )
  3. If you image is larger than the default sizing, it will be scaled to fit. Try to size all your product images to be the same, so they display remains consistent in the web page.
  4. Scaled images will scale to a max width, but not height, so keeping your images the same size will ensure a consistent look.
  5. Open the ‘product-carousel’ Library page.
  6. Locate the image you want to change.
  7. Double click to open the Picture Properties window.
  8. Click the Browse button.
  9. Browse to your Library >> sliders >> product-carousel >> images (folder).
  10. Select the imported image.
  11. Click the Open button.
  12. Then click OK.
  13. You should see your new image on your page.
  14. As with all images replaced using the Picture Properties panel, double click on the new image to open the panel back up.
  15. This time, click the Appearance Tab.
  16. Unselect the ‘Specify size’ option.
  17. Then click OK.
  18. This will remove any width and height properties, allowing the image to scale on mobile devices.

Add and remove products

  1. Expand the Library >> sliders >> product-carousel (folder).
  2. Open the ‘product-carousel’ Library page.
  3. Switch to ‘Code’ view.
  4. To remove a slide, select the entire commented tag, and delete.
  5. To add more slides, you can only add slides in groups of 4. The default product carousel includes 2 groups of 4 for a total of 8 items.
  6. You first need to add a new group, the remove the excess products from the new group.
  7. For example, if you require a total of 10 products, you copy and paste a group, then remove 2 items from the new group.
  8. To add a group, select an existing group, including the comment tags, and copy ( Ctrl+C )
  9. Move your mouse to the end of the second group
  10. And paste (Ctrl+V)
  11. Now you can update the comment tags, to ‘third group’ just to keep yourself organized
  12. Now update the remove any products you won’t be needing ( in the example of only needing 10 products in total ).
  13. Switch back to the Design view, and change the description, pricing, button and images for the newly copied products.

Product Carousel

In this tutorial, we’ll demonstrate how to update the Product Carousel layout. The Product Carousel ‘slides’ a series of div containers, from right to left. The default Jumbotron includes 3 slides, the content of each slide can be any html content, in the included example layout we’ve added an h3 text headline, a paragraph of regular text, a clickable button and an image.

We’ll learn how to:

  • change the item description
  • change the price
  • change the ‘Click for Details’ button
  • replace or remove the image
  • add and remove products

Change the item description

  1. Expand the Library sliders >> product-carousel (folder).
  2. Double click on the “product-carousel” page to open.
  3. The description text is easy to find, as it’s just text wrapped in a paragraph tag.
  4. Select the text with your mouse.
  5. Type a new description.
  6.  Save to update.

Change the pricing text

This is regular text on the page, just change as you would normally change the text on a page.

Change or remove ‘Click for details’ button

  1. To remove the button, place your mouse on the hyperlink, then click on the <a.btn btn-success> tag located in the Quick Tag Selector Toolbar, and delete.
  2. To change, select the button with your mouse and type a new name. Keep the name short so it’s doesn’t wrap to a second line, or expand the button to be to wide.
  3. You’ll need to change, save and preview to view your results, then adjust from there.
  4. To link the button to a new page, select the ‘Click for Details’ text.
  5. With the blue text selected, click on the ‘Point to File’ tool located in your Properties Panel ( Ctrl+F3 ).
  6. Drag the ‘Point to File’ tool over to the page you want to link to.
  7. Click OK to save.

Replace or remove the image

  1. Expand the Library >> sliders >> product-carousel (folder).
  2. Import, drag or copy your replacement image into the ‘images’ folder,  ( or any folder within your website ).
  3. The default image size is 150 x 120 pixels.
  4. If you image is larger than the default sizing, it will be scaled to fit. Try to size all your product images to be the same, so they display remains consistent in the web page.
  5. Scaled images will scale to a max width, but not height, so keeping your images the same size will ensure a consistent look.
  6. Open the ‘product-carousel’ Library page.
  7. Double click on the image you want to change. This will open the Select Image Source window.
  8. Click on your replacement image to select it, then click the OK button to add it to your page.
  9. You should see your new image on your page.

Add and remove products

  1. Expand the Library >> sliders >> product-carousel (folder).
  2. Open the ‘product-carousel’ Library page.
  3. To remove a slide, first click the image in the slide.
  4. Then click the <li.span2> tag, in the quick tag selector, to select everything included with the item.
  5. The press Delete on your Keyboard.

To add more slides

  1. You can only add slides in groups of 4. The default product carousel includes 2 groups of 4 for a total of 8 items.
  2. You first need to add a new group, the remove the excess products from the new group.
  3. For example, if you require a total of 10 products, you copy and paste a group, then remove 2 items from the new group.
  4. To add a group, select an existing group, including the comment tags, and copy ( Ctrl+C )
  5. Move your mouse to the end of the second group
  6. And paste (Ctrl+V)
  7. Now you can update the comment tags, to ‘third group’ just to keep yourself organized
  8. Now update the remove any products you won’t be needing ( in the example of only needing 10 products in total ).
  9. Switch back to the Design view, and change the description, pricing, button and images for the newly copied products.