Shipping information settings

Setting Description
Image
Choose a image for your shipping information section. Click on “Select Image” to access your media library, upload a new image, or explore free images. Also, you can connect a dynamic source by clicking the source button. Once an image is added, you can use the “Change” button to remove, replace, or delete it.
Image height

Use this option to adjust the image height:

  • Adapt to image – automatically adjusts the height based on the image’s proportions.
  • Small – sets a fixed small height.
  • Medium – sets a fixed medium height.
  • Large – sets a fixed large height.
Desktop image width

Use this option to set how wide the image appears on desktop screens. You can choose from different width settings to control how much space the image takes within the layout:

  • Small
  • Medium
  • Large

*Note: Image is automatically optimized for mobile.
Desktop image placement

Adjust the placement of the image on the desktop view:

  • Image First: This option displays the image on the left side.
  • Image Second: This option displays the image on the right side.

*Note: Image first is the default mobile layout.
Desktop content position

Select the vertical alignment of the content:

  • Top
  • Middle
  • Bottom
Desktop content alignment

You have three alignment options to align content horizontally on desktop:

  • Left
  • Right
  • Center
Color scheme

This option allows you to select a color scheme for the entire section.

You can apply different color schemes to your store:

  • After creating color schemes in the theme settings under the 'Colors' tab, you can assign them to different sections of your store.
  • In each template, section, or block, you'll find a 'Color Scheme' dropdown.
  • Simply select the appropriate color scheme to maintain consistency and align with your brand's identity.
Container color scheme Choose a color scheme to customize the colors for text blocks. To keep the entire section in a consistent color style, select the same color scheme for both the section and the container.

Animations

Setting Description
Image behavior 

Choose how the image behaves:

  • None
  • Ambient movement: This creates a subtle, slow movement effect, making the image appear dynamic.
  • Zoom in on scroll: Gradually zooms in on the image as the user scrolls.

Mobile layout

Setting Description
Mobile content alignment

Choose the horizontal alignment of the content on mobile:

  • Left
  • Center
  • Right

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 amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

Demo example:

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