> For the complete documentation index, see [llms.txt](https://easify.gitbook.io/easify-box-bundle-builder-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/help-and-support/faqs-most-common-questions/product-cards.md).

# Product Cards

<details>

<summary><strong>Products not showing in the box</strong></summary>

**Common causes:**

* Product status is Draft or Unlisted instead of Active.
* Product is out of stock and "Hide out-of-stock" setting is enabled.
* Product has not been published to the Online Store channel.

**How to fix it:**

1. Set all products inside the box to **Active** status.
2. Go to **App Settings → Out of Stock Product Display** and change from **"Hide"** to **"Disable"**.
3. In Shopify Admin, go to **Product Sales Channels** and make sure **Online Store** is checked.

</details>

<details>

<summary><strong>Where do I customize the product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards to customize the product list in the box

</details>

<details>

<summary><strong>How do I hide the price on product cards?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards > Content tab and untick Product price.

</details>

<details>

<summary><strong>How do I hide the product title from the grid?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards > Content tab and untick Product name.

</details>

<details>

<summary><strong>How to enable the quick view / magnifying glass / search icon button on product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards > Content tab and tick Quick View.

</details>

<details>

<summary><strong>How do I enable the vendor name on product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards > Content tab and tick Vendor.

</details>

<details>

<summary><strong>How do I change the text color of product name and price?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Text tab and change Text color

</details>

<details>

<summary><strong>How do I align product name and price on product list to the left/center/right?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Text tab and change Text alignment

</details>

<details>

<summary><strong>How do I show or hide the second image when hovering over a product?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Image tab and and turn on/off Show second image on hover

</details>

<details>

<summary><strong>How do I make product images square, portrait, or keep original ratio?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Image tab, and select your preferred the Image ratio

</details>

<details>

<summary><strong>How do I add a border around product images?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Image tab, and adjust Border width or, change Border color.

</details>

<details>

<summary><strong>How do I make product image corners rounded?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Image tab, and adjust Border radius.Increase the Border radius to make it more rounded.

</details>

<details>

<summary><strong>How do I add shadow or blur to product images?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Image tab, and adjust Horizontal offset, Vertical offset or Blur

</details>

<details>

<summary><strong>Where do I customize the Add to box button in product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add to box button tab to customize it.

</details>

<details>

<summary><strong>How do I change the color of the “Add to box” button in product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add to box button tab to adjust the text color, background color… of the button

</details>

<details>

<summary><strong>How do I make the Add to box button in product list rounded?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add to box button tab, and adjust the Border radius. Increase the Border radius to make it more rounded.

</details>

<details>

<summary><strong>How do I add a border or shadow to the “Add to box” button in product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add to box button tab, and adjust border width, border color, horizontal offset, vertical offset or shadow color.

</details>

<details>

<summary><strong>Where do I customize the Add to box button in product list when I hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add to box button tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I customize the disabled/grayed out Add to box button in product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add to box button tab, then choose the Disabled mode to customize.

</details>

<details>

<summary><strong>Where do I customize the “View”/magifying glass button appearance?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to View button tab to customize it.

</details>

<details>

<summary><strong>How to change the color of the “View”/magifying glass button on product list?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to View button tab to adjust the text color, background color… of the button

</details>

<details>

<summary><strong>How to round the “View”/magifying glass button corners?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to View button tab, and adjust the Border radius. Increase the Border radius to make it more rounded.

</details>

<details>

<summary><strong>How do I add border/shadow to the “View”/magifying glass button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to View button tab, and adjust border width, border color, horizontal offset, vertical offset or shadow color.

</details>

<details>

<summary><strong>How do I change the “View”/magifying glass button style on hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to View button tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I customize the Added button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Added button tab to customize it.

</details>

<details>

<summary><strong>How do I change the Added button color?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Added button tab to adjust the text color, background color… of the button.

</details>

<details>

<summary><strong>How do I make the Added button rounded?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Added button tab, and adjust the Border radius. Increase the Border radius to make it more rounded.

</details>

<details>

<summary><strong>How do I add a border or shadow on the Added button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Added button tab, and adjust border width, border color, horizontal offset, vertical offset or shadow color.

</details>

<details>

<summary><strong>How do I change the Added button style on hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Added button tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I customize the Add another button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add another button tab to customize it.

</details>

<details>

<summary><strong>How do I change the Add another button color?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add another button tab to adjust the text color, background color… of the button.

</details>

<details>

<summary><strong>How do I make the Add another button rounded?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add another button tab, and adjust the Border radius. Increase the Border radius to make it more rounded.

</details>

<details>

<summary><strong>How do I add a border or shadow on the Add another button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Add another button tab, and adjust border width, border color, horizontal offset, vertical offset or shadow color.

</details>

<details>

<summary><strong>Where do I customize the Edit options button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Edit options button tab to customize it.

</details>

<details>

<summary><strong>How do I change the Edit options button color?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Edit options button tab to adjust the text color, background color… of the button.

</details>

<details>

<summary><strong>How do I make the Edit options button rounded?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Edit options button tab, and adjust the Border radius. Increase the Border radius to make it more rounded.

</details>

<details>

<summary><strong>How do I add a border or shadow on the Edit options button?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Edit options button tab, and adjust border width, border color, horizontal offset, vertical offset or shadow color.

</details>

<details>

<summary><strong>How do I change the Edit options button style on hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Product Cards. Switch from Content to Edit options button tab, then choose the Hover mode to customize.

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://easify.gitbook.io/easify-box-bundle-builder-docs/user-guide/help-and-support/faqs-most-common-questions/product-cards.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.