Skip to main content

How to add Card


Card Configuration

  • Card Name: Add name of card
  • Card Type: You can select the type of card. (type of card, e.g., Slider, Grid, Table)

Slider Configuration

  • Loop: (true/false)- Determines whether the slider loops back to the beginning after reaching the last item.
  • Navigation: (true/false)- Enables or disables navigation arrows for moving between items in the slider.
  • Navigation Type: (Arrow/Round/Square) – Specifies the type of navigation controls.
  • Dots: (true/false)- Shows or hides navigation dots that represent individual items in the slider.
  • Autoplay: (true/false) – Enables or disables automatic playback of the slider.

Grid Configuration

  • Description Position: (Top/Bottom) – Position of the description in the grid.

Table Configuration

  • Select Columns to Show: (Image/Title/Price/Description/Add to Cart) – Determines which columns are displayed in the table.
  • Table Header Text Color: (Color code) – Text color for the table header.
  • Table Header Background Color: (Color code) – Background color for the table header.
  • Odd Row Text Color: (Color code) – Text color for odd rows in the table.
  • Odd Row Background Color: (Color code) – Background color for odd rows in the table.
  • Even Row Text Color: (Color code) – Text color for even rows in the table.
  • Even Row Background Color: (Color code) – Background color for even rows in the table.

Embed Code

You can embed the card in two place
Within your shopify
Third party blogging site website like Shopify,

Display Code (div): add the following code where you want to load the: 

<div id=”upc-holder-[CARD-UNIQUE-ID]” class=”upc-holder” data-key=”[CARD-UNIQUE-ID]”> </div>
Or
[upccard key=CARD-UNIQUE-ID]

External Website Code (JavaScript):
Html
<!– Place in footer →
<script>
(function(d, s) {
 s = d.createElement(‘script’);
s.type = ‘text/javascript’;
 s.async = true;
 s.src = ‘https://pg.wolfmanapps.com/libs/upc.js’;
 d.getElementsByTagName(‘head’)[0].appendChild(s);
}(document));
</script>

Instructions

  • To embed the card on an external website, use the provided code and place it in the footer of the website.
  • The upc.js script is sourced from the specified URL for functionality.

Card Config(Global settings)

This breakdown should help users understand and implement the configurations and embedding codes for the card component in different views on their website.

Product Item Template

Plugin provides a Template which you can select to change the basic structure of the product.  

Default:

  • The default template for displaying individual product items.

App Template 1 to 5:

  • Custom templates for displaying individual product items, providing different layout options.

Card Alignment

Aligns the card content like Title 

  • Center
  • Left
  • Right

Show Second Image on Hover

  • Controls whether the second image of a product is displayed when the user hovers over it.

Variant Product Link

  • Determines whether clicking on a product links to its variants.

Product Image

Image Width:

  • Sets the width of the product images.

Image Height:

  • Sets the height of the product images.

Product Title

Show Product Title?:

  • Toggle to show or hide the product titles.

Text Color:

  • Defines the color of the product title text.

Text Hover Color:

  • Defines the color of the product title text on hover.

Font Family:

  • Specifies the font family for the product title text.

Font Size:

  • Sets the font size of the product title text.

Text Transform:

  • Applies text transformation options (none, capitalize, uppercase, lowercase) to the product title.

Product Vendor

Show Product Vendor?:

  • Toggle to show or hide the product vendor information.

Text Color:

  • Defines the color of the product vendor text.

Text Hover Color:

  • Defines the color of the product vendor text on hover.

Font Family:

  • Specifies the font family for the product vendor text.

Font Size:

  • Sets the font size of the product vendor text.

Product Price

Show Product Price?:

  • Toggle to show or hide the product prices.

Text Color:

  • Defines the color of the product price text.

Text Hover Color:

  • Defines the color of the product price text on hover.

Font Family:

  • Specifies the font family for the product price text.

Font Size:

  • Sets the font size of the product price text.

Add to Cart Button

Show Add To Cart Button?:

  • Toggle to show or hide the “Add to Cart” button.

Hide Cart Icon:

  • Toggle to hide the cart icon.

Text Color:

  • Defines the color of the “Add to Cart” button text.

Text Hover Color:

  • Defines the color of the “Add to Cart” button text on hover.

Background Color:

  • Defines the background color of the “Add to Cart” button.

Hover Background Color:

  • Defines the background color of the “Add to Cart” button on hover.

Border Color:

  • Defines the border color of the “Add to Cart” button.

Hover Border Color:

  • Defines the border color of the “Add to Cart” button on hover.

Font Family:

  • Specifies the font family for the “Add to Cart” button text.

Font Size:

  • Sets the font size of the “Add to Cart” button text.

Text Transform:

  • Applies text transformation options (none, capitalize, uppercase, lowercase) to the button text.

Sold Out Label

Enable:

  • Toggle to display or hide the “Sold Out” label.

Text Color:

  • Defines the color of the “Sold Out” label text.

Background Color:

  • Defines the background color of the “Sold Out” label.

Sale Label

Hidden:

  • The sale label is hidden.

Sale Amount:

  • Displays the sale amount on the sale label.

Sale Percentage:

  • Displays the sale percentage on the sale label.

Sale Text:

  • Displays custom sale text on the sale label.

Text Color:

  • Defines the color of the sale label text.

Background Color:

  • Defines the background color of the sale label.

Swatches

Hidden:

  • Swatches are hidden.

Show – Squares:

  • Displays square-shaped swatches.

Show – Round:

  • Displays round-shaped swatches.

Cart Count

Cart Count CSS Selector:


Specifies the CSS selector for displaying the cart count. Whenever ever used, add an item to the cart. These explanations should help users understand the purpose and functionality of each new global setting in your Shopify app.