Sticky products settings


Setting Description
Color scheme

Apply Color Scheme:

  • After creating your color schemes in theme settings — 'Colors' tab, you can apply them to different sections of your store.
  • In each section or block, you'll see a Color scheme dropdown.
  • Select the appropriate color scheme for each section, ensuring consistency with your brand's identity.

Heading settings


Setting Description
Heading

This field is for adding a heading to the section.

In the top menu of the field, you can find options to customize the heading.

Furthermore, you can click the dynamic source button to insert a dynamic source as the heading of the section.

Heading font family:
  • Heading
  • Body

In Theme Settings, the heading can have a different font family from the body text. You can apply one of these styles to the heading in Before & After section.

Heading size

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

  • Small
  • Medium
  • Large
Font weight

Font weight defines the thickness or boldness of text on your store. Available options for heading:

  • Normal (400): Default weight for body text.
  • Medium (500): Slightly thicker, suitable for emphasized body text or light headings.
  • Semi-Bold (600): Heavier, ideal for subheadings or highlighted text.
  • Bold (700): Strongest weight for maximum emphasis.
Button label

Decide whether the section includes a button:

  • To display the button, enter text into the field as the label.
  • To hide the button, leave the text field empty.
Button link (paste a link or search)

Add a URL or page link for the button, directing customers to a specific destination.

In this section, you can add a link to the collection to show customers all products.


Grid settings


Setting Description
Large item position This setting allows you to select the optimal placement for the large product image within the grid. You can select either “Left” or “Right” alignment based on your preference and design layout.

Product card


Setting  Description 
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 use a 2:3 ratio
  • 'Square' crops the images to use a 1:1 ratio
  • 'Custom': when you select custom option, in custom image height slider below you can adjust the image height to fit your preferences.
Show second image on hover Check this option to display a second image on hover. This will only apply if the product page includes more than one image.
Show vendor Show the vendor of the products under the image. 
Show product rating

Displays the average product rating in stars with the number of reviews in parenthesis, for example: ★★★★★ (8). Also requires a product review app, and metafield definitions forreviews.rating_count

and reviews.rating.

Enable quick view button

Activate this option to display a “Quick View” button next to the “Add to Cart” button on product cards with variants.

The Quick View button opens a pop-up where customers can:

  • Select desired variants.
  • Add the item to their cart.
  • Use the “Buy it now” option for instant checkout.
  • Click the product title to view full details on the product detail page.

If disabled, only the “Add to Cart” button will appear, allowing customers to add products to their cart without the quick checkout or variant selection pop-up.

Show type You can show or hide the product type (e.g., headphones) added on the product detail page using this button.

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 space at the top of the section on mobile devices using a slider.
Bottom padding mobile The “Bottom Padding mobile setting works similarly to the “Top Padding mobile” setting, but it controls the space at the bottom of the section.
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