Items

Setting Description
Color scheme Applying a color scheme to an items block automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used.  Learn more about color schemes.
Heading size

The heading size setting offers three options to control the size of your heading:

  • Small
  • Medium
  • Large
Show continue shopping Enable “Continue shopping” that will lead to all products.
Continue shopping button style

Choose the button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
  • Link: A minimal button style aligned with the text.


Empty cart


Setting Description
Show continue shopping Enable "Continue shopping" that will lead to all products when cart is empty.
Continue shopping button style Choose the appearance of the "Continue shopping" button: Primary, Secondary, Outline, or Link. Only shown when Show continue shopping is enabled.
Show customer accounts Show a custom account block: heading and a link for login page.
Collections list You can add collections that will be displayed in a grid format when the cart is empty (up to 8).
Custom color scheme Enable this option to apply a custom color scheme to the collection cards.
Collection cards color scheme Applying a color scheme to the collection cards automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. Learn more about color schemes.
Collection text You can add text that will be displayed before collections.
Image style

This option allows you to choose how the image is displayed. Available options:

• Top — the image is displayed at the top, with the collection title and description shown below the image.

• Cover — the image fills the entire collection card area, with the collection title and description displayed on top of the image.
Image ratio

The Image ratio setting allows you to control how collection images are displayed based on their width-to-height proportion. This helps ensure a consistent and visually appealing layout across devices.

You can choose from the following options:

• Adapt to image – Maintains the original aspect ratio of the image.

• Portrait – Displays the image in a vertical (taller) format.

• Square – Crops or scales the image into a 1:1 square shape.

• Landscape – Displays the image in a horizontal (wider) format.
Card style

Sets the visual layout of each collection card.

• Default — image with the collection title/description shown below or on it.

• CTA button — overlays a solid, button-style label with the collection name directly on the image; hides Show description, Hide arrow button, and Show count since they don't apply to this layout.
Hover image An image shown behind the card's text when the card turns red on hover. Only used with the "CTA button" card style and "Cover" image style.
Hover image display

Controls how the Hover image fills the card on hover.

• Cover — fills and crops the image to cover the card area.

• Contain — fits the whole image within the card without cropping.

Only shown when a Hover image is set, with Card style = CTA button and Image style = Cover.
Show description Swipe the button to the right to show collection description added on collection page (Shopify admin). Only shown when Card style is not CTA button.
Hide arrow button Hides the small arrow icon shown on the collection card. Only shown when Card style is not CTA button.
Show count Displays the number of products included in the collection, shown on the card. Only shown when Card style is not CTA button.
Number of columns on desktop Set how many columns will be displayed in the grid on desktop screens.

Section padding 


Setting Description
Top padding The “Top padding” setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The “Bottom padding” setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The “Top padding mobile” setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The “Bottom padding mobile” setting works similarly to the “Top padding mobile” setting, but controls the space at the bottom of the section for mobile devices.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us