Related Products

Modified on Fri, 19 Apr 2024 at 02:38 PM

TABLE OF CONTENTS


I. RELATED PRODUCTS

1. General settings

- Select Products > Default product to load the template in the theme editor.

- Do one of the following:

  • If your product page has a related products section, then click Related products.
  • If your product page doesn't have a related products section, then click + Add section and then select Related products.

To modify this section, you can edit these options below:

Background color: select the color

Section margin: following the order - top right bottom left (Desktop, Tablet, Mobile respectively) 

- Section padding: following the order - top right bottom left

Number items per row: enter the number to set the amount of items showing in a row. Add a comma to set for other devices. Eg: 4,3,2 (Desktop, Tablet, Mobile respectively)  

Spacing between items: tick to add space between items 


2. Source settings

- Headingenter the text to set heading for this block  

- Select a source collection for this section:

  • Same collection: it will recommend the products in the same collection with the current product.
  • Static collection: you can select a specific collection to display

- Limit: the maximum number of products will be shown



3. Slider settings

 - Tick to enable features

  • Loop: once the slideshow reaches the end, it repeats from the beginning.
  • Controls: it will appear an arrow to move to the next slide
  • Dots: used as indicators to show the number of slides or images within the slideshow and to provide users with a visual cue of their current position within the sequence of slides.
  • Autoplay

- Dots position-bottom: Drag to adjust to dot position

- Change slide every (s): set the switch time for each slide




II. HEADING STYLE


As the default, the heading style will base on Heading section setting (Theme settings > Typography >Heading section).
If you want to set up the specific style for heading, you can click on Add block to add Heading style 

To modify Heading style, you can adjust these options:

-  Alignment

- Margin

- Text color

- Font size

- Font weight

- Line height



Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article