General settings (Recently viewed product)

Heading settings


Settings  Description
Heading In the top menu of the field, you can find options to customize the heading such as making it bold, italic, or adding a hyperlink. Also, you can change text for heading.
Horizontal align (for heading) Three options: Left, Center, and Right.
Column gap Choose the spacing between columns in the grid layout. You have options for “None”, “Small”, or “Large” gaps, allowing you to adjust the spacing between product images accordingly.
Column gap mobile Similar to the column gap setting, this option specifies the spacing between columns specifically for mobile devices. Choose between “None” or “Small” gaps to optimize the grid layout for mobile viewing.
Row gap mobile Similar to the row gap setting, this option specifies the spacing between rows specifically for mobile devices. Choose between “None”, “Small”, or “Large” gaps to ensure a consistent grid layout across different screen sizes.

Card settings


Settings  Description
Product style

Four styles are available:

  • Buttons down hover (When hovering over a product image, the “Add to cart” button and “Quick view” icon are displayed side by side at the bottom of the image)
  • Buttons center hover (When hovering over a product image, the “Add to cart” button is displayed in the center of the image with horizontal alignment)
  • With borders feature enhances your product display by adding a sleek border to all product card. When a user hovers over a product image, the “Add to Cart” button elegantly appears beneath the border, positioned after the heading and price.
  • Title on hover (When hovering over a product image, a heading with the price is displayed in the center of the image. The 'Quick View' icon appears at the top center of the image, allowing users to quickly preview the product. Additionally, the 'Add to Cart' button is positioned at the bottom center of the image, providing users with a convenient option to add the product to their cart).
Image ratio

Sets the image ratio for the product images:

  • 'Adapt to image' uses the aspect ratio of the images. This prevents the images from being cropped.
  • 'Portrait' crops the images to a 2:3 ratio, where the height of the image is 1.5 times the width. It is suitable for images that have a taller or portrait orientation.
  • 'Square' crops the images to a 1:1 ratio, where the width and height of the image are equal. It creates a square-shaped display for your images.
Show second image on hover You can see the second image on hover if on the detail page of this product are 2 or more images in the list.
Custom second image You can add one image, which will be visible on hover on every product.
Zoom image on hover See the image in enlarged form.
Show image border Shows distinct borders of the image.
Content align

Sets the alignment of the content:

  • Left — Aligns the content to the left.
  • Center — Aligns the content to the center.
  • Right — Aligns the content to the right.
Heading font

You can choose whether headings use the Heading or Body text style.

  • To change the font family, font size, or font weight of heading or body style, go to Theme Settings > Typography.
  • Note: Changes in the Typography tab will apply across the entire theme.
Heading font size

You can adjust the font size of the card heading using the following options:

  • Small
  • Medium
  • Large
Heading font weight This option allows you to change the font weight for the card heading. Font weight refers to how thick or thin the characters in the text appear.
Heading color

This setting allows you to select the color for card heading.

Available options:

  • Main
  • Secondary
  • Heading

To customize these colors, go to the “Colors” tab in your theme settings and find the “General Colors” block. Adjust the text color options there to update the heading styles across your entire theme.
Price font size

You can adjust price size using these options:

  • Small
  • Medium
  • Large
  • Extra large

Section settings 


Setting Description
Section top space The “Section top space” setting allows you to adjust the amount of space at the top of the section using a slider. 
Section bottom space The “Section bottom space” setting functions similarly to the “Section top space” setting, but controls the space at the bottom of the section. 
Background color To change the background color of a section, click the box containing the color circle and name to open the color picker. Then, select your desired color. The chosen color will be applied as the section’s background, helping to enhance the visual appeal and match your store’s branding.
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