> 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/step-bar-quick-summary-quick-view.md).

# Step bar, Quick Summary, Quick View

<details>

<summary><strong>Box size selector (Prefined Box Sizes) not showing on mobile</strong></summary>

**Common causes:**

* The box size selector is placed inside the Quick Summary sidebar, which collapses on mobile devices.
* The **Inline Box Size** element has not been added to your box layout.

**How to fix it:**

1. Add the **Inline Box Size** element to your box editor instead of relying only on the Quick Summary sidebar.
2. Inline Box Size displays correctly on all devices – desktop, tablet, and mobile.
3. If you want to hide it on desktop and show only on mobile, custom CSS is required (please contact our dev team for assistance).

<figure><img src="/files/IYFhuQHQje8kUnnOBPlJ" alt=""><figcaption></figcaption></figure>

</details>

<details>

<summary><strong>How to make the box page wider?</strong>  </summary>

From the visual editor, go to Theme Settings > Layout to adjust the Page Width

</details>

<details>

<summary><strong>How to reduce the gap between box sections or box steps?</strong>  </summary>

From the visual editor, go to Theme Settings > Layout to adjust the Space between template sections

</details>

<details>

<summary><strong>How to add or remove the padding around the box?</strong>  </summary>

From the visual editor, go to Theme Settings > Page Padding to adjust the box inner spacing

</details>

<details>

<summary><strong>Where do I customize the steps/step bar?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar to customize it.

</details>

<details>

<summary><strong>Where do I show or hide the step bar?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar and set Status to Enabled or Disabled.

</details>

<details>

<summary><strong>How do I show or hide the line connecting the steps?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar > set Step prefix/suffix line to Enabled or Disabled.

</details>

<details>

<summary><strong>How do I change the color of the line between steps?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar > change Line color.

</details>

<details>

<summary><strong>How to change the color of step names?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Under the Step name tab, change Text color

</details>

<details>

<summary><strong>How do I change the color of the current/active step?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Active step tab, then change Number color, Background color, or Border color in default or hover states

</details>

<details>

<summary><strong>How to make the step border thicker or thinner</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Active step tab, then adjust Border width.

</details>

<details>

<summary><strong>How to change the active/current step when I hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Active step tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I change the color of the completed steps?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Completed step tab, then change Checkmark color, Background color, or Border color in default or hover states.

</details>

<details>

<summary><strong>How do I change the checkmark color on step bar?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Completed step tab, then change Checkmark color.

</details>

<details>

<summary><strong>How do I change the color of completed step on hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Complerted step tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I change the color of the incomplete steps?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Incomplete step tab, then change Number color, Background color, or Border color in default or hover states

</details>

<details>

<summary><strong>How do I change the color of incomplete step on hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Step Bar. Switch from Step name to Incomplete step tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I customize the Quick View popup of the product?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick view to customize it.

</details>

<details>

<summary><strong>How do I hide the price in the Quick View?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. In the Content tab, untick Product price under included details.

</details>

<details>

<summary><strong>How do I change the style of the variant selector in Quick View? (to Dropdown or Pills)</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. In the Content tab, choose Type: Pills or Dropdown.

</details>

<details>

<summary><strong>How do I change the color of the variant in Quick View?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. Switch from Content to Variant style tab to adjust the text color, background color… of the variant.

</details>

<details>

<summary><strong>How do I round the corners of the variant in Quick View?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. Switch from Content to Variant style 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 of the variant in Quick View?</strong>  </summary>

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

</details>

<details>

<summary><strong>How do I customize the variant in Quick View when I hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. Switch from Content to Variant style tab, then choose the Hover mode to customize.

</details>

<details>

<summary><strong>Where do I customize the “Add to box” button inside Quick View?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick view. 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 the Quick View popup?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. 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 rounded in Quick View?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. 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 inside Quick View?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick View. 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 Quick View when I hover?</strong>  </summary>

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

</details>

<details>

<summary><strong>How do I style the disabled/grayed out “Add to box” button in Quick View?</strong></summary>

From the visual editor, go to Theme Settings > Quick View. 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 Quick summary/footer summary</strong>  </summary>

From the visual editor, go to Theme Settings > Quick Summary to customize it.

</details>

<details>

<summary><strong>Where do I change the Quick summary position?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick Summary. In the Content tab, change Position to Sidebar or Footer

</details>

<details>

<summary><strong>How do I set when the Quick summary appears?</strong></summary>

From the visual editor, go to Theme Settings > Quick Summary. In the Content tab, set “When to show” to From the start or After customer selects a product.

</details>

<details>

<summary><strong>How do I change the color of the Quick summary?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick Summary. Switch from Content to Color tab and adjust text color, background color, or border color.

</details>

<details>

<summary><strong>How to customize the button on Quick Summary?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick Summary. Switch from Content to Next button or Back button to customize it.

</details>

<details>

<summary><strong>How to change the color of the button on Quick Summary?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick Summary. Switch from Content to Next button or Back button. You can adjust the text color, background color, border color… in default or hover states.

</details>

<details>

<summary><strong>How to customize the button on Quick Summary when I hover?</strong>  </summary>

From the visual editor, go to Theme Settings > Quick Summary. Switch from Content to Next button or Back button, 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/step-bar-quick-summary-quick-view.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.