Templates

This guide explains how to use MyStore's Page Builder to customize your website. It breaks down each module and section clearly so that you can build and style your site with ease, whether you're new or experienced.

Image Slider

1. Open the Slider

• Click on the Image Slider V1 module in the builder.

2. Edit Slide Content

• In the Content tab:

• Click each slide to edit it.

• You can change:
• Desktop and mobile images
• Heading
• Text
• Caption
• Button link and label

3. Style the Slider

• Go to the Style tab to:

• Change background color or image
• Adjust spacing for desktop and mobile
• Customize text alignment and colors

4. Advanced Settings

• In the Advanced tab:

• Enable or hide a QR Code
  
• Choose between default or link type
• Show/hide it for desktop or mobile
• Add Custom CSS
  

Image with Title Module

1. Access the Module

• Click the Image with Title section.

2. Update Content

• In the Content tab, you can:
• Set the main Heading
  
• Add a Subheading
  
• Provide a Button Label and Button Link
  

3. Configure Each Image Column

• Expand the section to reveal Column items.
• For each column:
• Upload an Image
  
• Set a Name
  
• Enter a URL
  
• Select a Collection (if applicable)

4. Style Options

• In the Style tab, adjust:
• Margin and padding
• Background color
• Text alignment and color

5. Advanced Settings

• Use the Advanced tab to:
• Enable Multi Row
  
• Set Full Width
  
• Configure slide count for desktop/tablet
• Add Custom CSS
  

Multi Banner

1. Content Settings

• Add:
• Heading (e.g., “Bestsellers”)
• Subheading for more context
• Edit each Column to set:
• Title
• Image
• Caption
• Button and link

2. Style Tab

• Set:
• Text color
• Content alignment
• Margin and padding
• Background color

3. Advanced Settings

• Choose:
• Number of banners to display
• Whether to hide on desktop or mobile
  
• Add Custom CSS
  

Products Section

1. Content Tab

• Set:
• Heading
• Subheading
• Category of products to display

2. Style Tab

• Adjust:
• Margin and padding
• Background color

3. Advanced Tab

• Add custom styling using Custom CSS
  

Parallax Banner

1. Content Tab

• Upload a Background Image
  
• Set:
• Heading
• Text content
• Button Label and Link

2. Style Tab

• Adjust:
• Text alignment
• Text color

3. Advanced Tab

• Add Custom CSS for extra control

Image with Text

1. Content Tab

• Upload the Image
  
• Add:
• Heading
• Subheading
• Text
• Button Label and Link
  

2. Style Tab

• Choose Image Alignment: start, center, or end

3. Advanced Tab

• Add Custom CSS
  

Image Collage

1. Content Tab

• Add:
• Heading
• Subheading

2. Style Tab

• Adjust:
• Text color
• Content alignment
• Background color
• Margin and padding

3.Advanced Tab

• Add Custom CSS