How to Add and Embed a Product Slider Widget

You can customize and modify your product slider widget. 


  1. From your TrackMage dashboard, navigate to Widgets.

  2. Select the desired widgets you want to customize

  3. Click on Widgets Builder.




Slider Items

You can add, edit, customize, and delete items in the product slider.

Add Items to the Product Slider

You can add products to the slider via two different approaches; adding single products or bulk products upload.


Add Multiple Products Via the Add Items


You can import your product feed into the slider items. Your product feed should be in the Facebook Product Feed XML format. 


  1. Select Slider Items > Add Items Feed on the Widget Builder.



    Your product feed should include the following fields:

    Required

    Product Title - the name of the product

    Image URL - the URL for the main image of the product

    Slider Item Link - the link to the item’s specific product page on your store’s website where people can buy the item.


    Optional

    Regular Price - regular price of the product

    Discounted Price - the discounted price of the product


  2. Upload the Product Feed URL and click Verify.


Note: For a valid and correct product feed, you will get two green ticks, Valid and Accessible. If any of them is incorrect, you should confirm again that the product field is the same as Facebook’s product feed format, and the links start with HTTPS or HTTP.





Add single Product


  1. On the Widget Builder, click on Add New Slider Item.



  2. Enter the following fields and click Add New.




Required

Product Title - the name of the product

Image URL - the URL for the main image of the product. You can also upload an

image from your computer.

Slider Item Link - The link to the item’s specific product page on your store’s website where people can buy the item.


Optional

Regular Price - regular price of the product.

Discounted Price - the discounted price of the product.



Reorder Items

You can change the order of items on the slider. There is an up and down arrow key for each slider item except the first and last items.



To change the position of a slider item, click on either the up arrow key or the down arrow key to take the item a row higher or lower.





Edit Items

You can edit any item in the product slider, including its title, regular price, discounted price, image, and product link.





To edit a product slider item from the product slider, click on the edit icon/button beside the item to be edited.





Delete Items

You can delete any product item from the slider.

To delete an item from the product slider, click on the delete icon/button beside the item to be deleted.



Slider Items Style

You can change the default slider items to match your brand design.

On the Widgets Builder, click Slider Items Style. Customize each option below as desired.




Title Style - the name of the item.


Regular Price Style - the regular price of the item.


Discounted Price Style - the discounted price of the item.


Item Width -  how large/big you want an item to appear.


Content Position - where you want to position the text content.


Button Position - where you want to position the Buy Now button.


Background Color - the background color of each slider item.


Border Color - the color for the border around each slider item.


Border Radius - add rounded corners to an item.  Set how curved you want the border’s corners.


Border Width - sets the width of the four corners of an item.


Shadow - toggle shadow on/off. Set the details for the shadow.



Slider Style

You can change the default slider style to match your brand design.

On the Widgets Builder, click Slider Style. Customize each option below as desired.


Automation - automatic slideshow of the items. Toggle autoplay on/off. Set the autoplay delay speed.


Show Arrows - toggle the left and right arrows on/off.


Arrow Color - the color of the arrow.


Arrow Size - the size of the arrow.


Background Color - the background color of each slider item.


Border Color - the color for the border around each slider item.


Border Radius - add rounded corners to an item.  Set how curved you want the border’s corners.


Border Width - sets the width of the four corners of an item.


Shadow - toggle shadow on/off. Set the details for the shadow.


Maximum Visible Items - the maximum number of items you see at a time on the slider.



Finally, click on Save. Your changes will take effect immediately.



Did this solve your problem?