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.
By managing your colors at this level, you can create a cohesive, visually appealing store design that maintains brand consistency across all pages.
Heading settings
Setting
Description
Heading
To add a section heading, enter it in the provided field. In the top menu of the field, you can find options to customize the heading.
Grid settings
Setting
Description
Large image 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 bellow you can adjust the image height to fit your preferences.
Show second image on hover
If the detail page of this product contains two or more images, you can view the second image by hovering over the first one.
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 for reviews.rating_count and reviews.rating.
Enable quick view button
This option displays a "Quick View" button as the first button next to the "Add to Cart" button on product cards. If this checkbox is unchecked, only the "Add to Cart" button will be visible.
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 feedbackThere was a problem submitting your feedback. Please try again later.
