TrackMageCreating a Product Slider Widget
Note. The Branded Product Slider is automatically generated upon integrating with Shopify or WooCommerce. You can adjust which products to show by following the Customizing the Slider section or skip to the Embedding a Product Slider Widget to the Store section directly.
To create a product slider widget follow these steps:
- While logged in to your TrackMage account, go to the Widgets on the left slide menu.
- Click the +Add Widget button and select the Product Slider icon.
- Give the widget a name by typing into the Widget Title field, then press the +Create Product Slider button to complete the creation.
Customizing a Product Slider Widget
To customize and modify your product slider widget follow these steps:
- On your TrackMage account, navigate to the Widgets on the left slide menu.
- Select the widget you want to customize (you can have multiple widgets on a paid plan).
- Click on the Widgets Builder button.
Product Slider has three options for adjustment:
1. Slider Items
You can add, edit, customize, and delete items in the product slider.
1.1. Add Items to the Product Slider.
You can add products to the slider via two different approaches: adding single products or bulk product uploads.
1.2. 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 (check Step 1 of this article to prepare the feed).
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.
1.3. Add single Product.
1). On the Widget Builder, click on the Add New Slider Item.
2). Fulfill the following fields and click Add New.
Required:
Product Title (1) - the name of the product;
Image URL (2) - the URL for the main image of the product. You can also upload an image from your computer;
Slider Item Link (3) - The link to the item’s specific product page on your store’s website where people can buy the item.
Optional:
Regular Price (4) - regular price of the product;
Discounted Price (5) - the discounted price of the product.
1.4. Reorder Items.
You can change the order of items on the slider using the up and down arrow keys for each item, except the first and last. Click an arrow to move an item up or down, or drag items to reorder them. Press the Save button to record the position of items.
1.5. Edit Items.
You can edit any item in the product slider, including its title, price, image, and link. To edit, click the edit icon next to the item and then click Save to record the changes.
1.6. Delete Items
You can delete any product item from the slider by clicking the delete icon next to the item. Press the Save button to record changes.
2. Slider Items Style
You can customize the default slider items to match your brand design. In the Widgets Builder, click on the Slider Items Style and adjust each option as needed, and save changes.
Slider Button - the product button styles.
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.
3. Slider Style
You can customize the default slider style to match your brand design. In the Widgets Builder, click on Slider Style and adjust each option as needed, and save changes.
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.
Embedding a Product Slider Widget to the Store
- First, close the Widget Builder. Or, if you're on the Widgets page, click on the desired widget bar (or its edit icon).
- Then, navigate to the Embedded Code tab and copy the codes of the Bootstrap Script (not needed if the Tracking Page widget is already embedded in the store) and Widget Code, and paste them into your store page code where needed.
If you need help, please don't hesitate to contact us via chat or send a message to support@trackmage.com.