Add  a customizable product card directly in Maker to any layout- Section, Auto grid, Grid, Slider, List or Advance grid by simply searching for the product using a URL or via the Google product feed that is integrated with Maker.  

Note: To integrate your google product feed with your account, Maker will need access to the product feed URL provided to Google Ads. It should be a public link with .xml or .csv extension.

Adding a Product Card

To add a product card, first create any layout. Then you can either: 

• Use the Global insert menu to add a product card

• Use the media panel on the left to add the product card to the layout

If you have your Google feed integrated with Maker, you can search the product under "Product Catalog" using a product ID or add it manually using URL. Next, click to add the product card to the grid. 

Product Variants

Maker provides you with the option to display all the variants offered of the product based on the information provided by your Google feed. To see all the different variants, hover over the product listed in the Product Catalog and click on the tag icon to view variants. Once this product card is added to your story, all the variants available will be displayed.

Customizing a Product Card

Once you've added the product card, selecting the card will generate the contextual product card panel on the right side. To customize the product card you will use the tabs - Properties, Style and Hover to make changes.  

• Properties - To show the properties of the product you wish to display simply toggle on/off the properties listed like image, title , description, price, size, color, button, etc.

• Style - To customize an attribute, first select the attribute. Then depending on the attribute selected, the corresponding customizable properties of that particular attribute will be exposed. Attributes that can be styled include- card, image, title, description, price, sale price, availability and button. 

• Hover - To add a hover effect on the product card select the attribute and the corresponding hover effects.

You can re-size the product card by simply selecting the product card and dragging the corners to re-size or if you know the pixel width and height of a card, you can manually enter the size in contextual panel on the right.

Note: To duplicate the product card: On a Mac, click CMD + C to copy and CMD + V to paste. On a PC, click CTRL + C to copy and CTRL + V to paste. Also, once duplicated, you can add a new product by simple replacing the ID or URL under properties.

Maker allows you the add Custom CSS to your products cards to build a custom cards. To custom CSS to your product cards, click on Custom CSS on the Product contextual panel and add the script in the modal that pops up.

Adding a Link

If you've added a product card using your feed or URL, the link to the product on your website is automatically added. If you wish to change the link destination, you can do so by clicking on Add link. You'll see a menu of link destinations:

• Link to Web Address
• Link to Email Address
• Link to Anchor
• Trigger Custom JavaScript

Make sure to choose the right destination for your link, depending on the desired effect. To learn more about adding a link, click here.

By default, the product card and it's a button link to the product page; however, you have  the option to add a separate link just for the button. The link can be a web address, email address, or trigger a custom JavaScript like an add to cart.  

Editing via Style Settings

If you are planning to use the same product card repeatedly in your story, you can configure the style in the story settings. To change your story settings, click on the cog wheel icon at the top right of your editor and select Edit Style Settings. Click on Product and once the panel opens, you can adjust various settings of your product card. All changes made in the style settings panel are automatically applied and saved to your story.

Note: Changes apply only to the story you're editing. If you wish to make style changes to your default theme (i.e. all stories), contact your Maker representative. 

Live Data

To auto update price, sale price, availability etc. from your google feed, select the "Live data" icon. To turn on live data, toggle the button to the right. Once toggled ON, all data attributes listed sync nightly with your google feed. To manually turn off or change setting per attribute, user the drop down menu to make the selection. Live data is turned off by default and you will need follow this process for each product card you wish to auto update. 

Note- When you turn on live data, we update the current data with that available in the feed. For attributes you do not wish to update, please select none from the options available on the dropdown next to the listed attribute. Turn live data on once all correct attribute settings have been applied. 

Using Data Attributes to design product cards

In addition to customizing your product card using the contextual panel or using Custom CSS, Maker provides you with the option build a product card from scratch with only the data attributes you choose to display. To build a product card using this feature, hover over the product listed in the Product Catalog and click on the data icon to view all the data attributes available. Click and add the data attributes you wish to display. Once all the data attributes are added to the story, you can customize each element separately using the related contextual panel. 

To replace this product card with a new product, select all the elements by dragging your mouse or using keyboard controls > click on Selection > replace with new product ID. 

In addition, Data Attributes can also be used to link a placeholder element with a product in your feed.  To do so, click on the data icon > click on link data > click on the element, in your story,  you wish to link.