Select Image

How to Select and Customize Images in AppSections

The "Select Image" setting in AppSections allows you to add and customize images for your sections, with different options for desktop and mobile. This setting provides flexibility in defining how images appear across devices, enhancing the overall visual appeal and user experience. Here is how you can select and customize images:

Select Image

Purpose: This setting allows you to add images to your sections, with the option to specify different images for desktop and mobile. You can also adjust focal points, change URL handles, and edit alt text.

Usage: Follow the steps below to select and customize your images.

Steps to Select and Customize Images

1. Select the Section:

   • Open your Shopify theme editor.

   • Navigate to the specific section where you want to add or change an image.

2. Locate the Select Image Setting:

   • In the section settings, find the Select Image or Change Image option.

3. Add or Select an Image:

   • Click on Select Image or Change Image.

   • In the modal that appears, either Add Image or select an existing image from your library.

   • Click Done to confirm your selection.

Customizing Images for Desktop and Mobile

1. Single Image for Both Desktop and Mobile:

   • If you add an image for desktop only, it will apply to both desktop and mobile if no mobile image is set.

   • Similarly, if you add an image for mobile only, it will apply to both desktop and mobile if no desktop image is set.

2. Different Images for Desktop and Mobile:

   • If you add separate images for desktop and mobile, each will be displayed on their respective devices.

Adding Focal Points

1. Edit Image:

   • After selecting an image, click on Edit.

   • In the modal that appears, click on Add Focal Point.

   • Adjust the focal point to center on a particular area of the image.

   • Save your changes.

Changing URL Handle and Alt Text

1. Edit Image Details:

   • Click on Edit next to the selected image.

   • In the modal, you can change the URL Handle and Alt Text for the image.

   • Save your changes.

Ensuring the Right Image Customization

1. Preview Changes:

   • After selecting and customizing the image, preview your store to see how it looks.

   • Check the section to ensure the image is applied correctly and enhances the visual appeal.

2. Check Consistency:

   • Ensure that the image settings align with your brand’s aesthetic and provide a cohesive look across both desktop and mobile devices.

3. Test Across Devices:

   • Verify the image on different devices to ensure it looks good and maintains visual appeal on all screen sizes.

Summary

By using the "Select Image" setting in AppSections, you can add and customize images for your sections in your Shopify store. This flexibility allows you to enhance the visual appeal and functionality of your components, ensuring a dynamic and engaging user experience across all devices. You can adjust focal points, change URL handles, and edit alt text for better customization.

If you have any questions or need further assistance, please contact our customer support team.