Image with products pin

The section is managed through:

Customize Theme → Sections → Template → Image with products pin

Introduction:

This feature offers an innovative way to showcase products within images, seamlessly integrating merchandise into visual content. With the ability to 'pin' products directly onto images, merchants can create interactive shopping experiences that engage the audience and drive sales. In this section, we'll explore the various settings and customization options available for the 'Image with products pin' feature, empowering merchants to create visually stunning displays that seamlessly blend content and commerce.

Settings Overview:

The Settings Overview provides a comprehensive look at all the customization options available within the 'Image with Products Pin' section, allowing the merchant to leverage this feature to its fullest potential.

Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).
Swap image and content: With that setting, the user can swap the image and the text position. By default, the image is on the left, and accordingly, the text is on the right.
Image: Select an image to present the selected product.
Color scheme: With that setting, the user can choose the color scheme of the Image with products pin section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.
Heading: Enter a heading for the section.
Description: Enter a description for the section.
Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.
Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.
Button label: Choose a label for the button.
Button link: With that setting, the user can choose one of the store links or enter an external link for the button.
Use outline button style: An additional setting to control the button presentation. The button becomes transparent, and a border in label color appears.

Add product:

Gives the user the ability to add products with the pin feature. Please see an example visualization below. If the product in the box has been clicked, the user will be redirected to the product page.

Horizontal position: The user is to select the horizontal positioning of the pin. It can vary from 0% to 100%, which accordingly represents the maximum left and maximum right positions.
Vertical position: The user is to select the vertical positioning of the pin. It can vary from 0% to 100%, which accordingly represents the top and bottom positions.
Pin color: With that setting, the user can select the color of the pin.
Product: A product is to be selected to be presented when hovering over a pin on the desktop version or when the user taps on the screen for the mobile version.

PreviousImage with text NextLogos

Last updated 6 months ago

Introduction:

Settings Overview:

Make section full width: Allows the user to use the full width of the screen (small gaps are left at both ends that cannot be absorbed).

Swap image and content: With that setting, the user can swap the image and the text position. By default, the image is on the left, and accordingly, the text is on the right.

Image: Select an image to present the selected product.

Color scheme: With that setting, the user can choose the color scheme of the Image with products pin section. For more information on setting up the color schemes, refer to Theme settings → Colors → Schemes.

Heading: Enter a heading for the section.

Description: Enter a description for the section.

Heading size: Gives control over the heading font size. One of three possibilities is to be chosen: Small, Medium or Large.

Horizontal content alignment: Gives control over the horizontal positioning of all the content. One of three possibilities is to be chosen: Left, Center or Right.

Button label: Choose a label for the button.

Button link: With that setting, the user can choose one of the store links or enter an external link for the button.

Use outline button style: An additional setting to control the button presentation. The button becomes transparent, and a border in label color appears.

Add product:

Horizontal position: The user is to select the horizontal positioning of the pin. It can vary from 0% to 100%, which accordingly represents the maximum left and maximum right positions.

Vertical position: The user is to select the vertical positioning of the pin. It can vary from 0% to 100%, which accordingly represents the top and bottom positions.

Pin color: With that setting, the user can select the color of the pin.

Product: A product is to be selected to be presented when hovering over a pin on the desktop version or when the user taps on the screen for the mobile version.