Templates

The Page Builder in MyStore lets you design and customize your website without coding. Each section (called a module) comes with simple tools to add content, style it, and adjust how it looks on desktop or mobile. This guide walks you through the most common modules, step by step.

1. Image Slider

The Image Slider lets you showcase multiple banners that rotate automatically. Think of it as the “hero section” at the top of a page.

Steps:

a. Open the Slider

• In the builder, click on Image Slider V1.
• You’ll see preloaded slides that you can edit one by one.

b. Edit Slide Content (Content Tab)

• Click on a slide → update its details.
• You can change:
• • Images: Upload one for desktop and one for mobile (so it looks right on all screens).
  • Heading: The big title (e.g., “Festive Sale”).
  • Text/Caption: Supporting text under the heading.
  • Button: Add a clickable button with label + link (e.g., “Shop Now → Products Page”).

c. Style the Slider (Style Tab)

• Change background color or image for the whole slider.
• Adjust spacing (padding/margins) for desktop vs. mobile.
• Pick text alignment and colors that fit your brand.

d. Advanced Settings (Advanced Tab)

• Add a QR Code (optional).
• Choose between Default or Link type slider behavior.
• Decide if the slider should show on desktop only, mobile only, or both.
• Add Custom CSS if you want special styling (advanced users).

2. Image with Title Module

This module lets you display images with text and clickable links, usually for highlighting categories or collections.

Steps:

a. Access the Module

• Click the Image with Title section in Page Builder.

b. Update Content (Content Tab)

• Set a Main Heading (e.g., “Shop by Category”).
• Add a Subheading for more detail.
• Provide a Button Label + Link (e.g., “View All Products”).

c. Configure Each Image Column

• Expand each column (you can have multiple).
• For each column, you can:
• • Upload an Image (e.g., “Shoes”).
  • Add a Name/Title under the image.
  • Add a Link or Collection → Clicking it will take customers to that page.

d. Style Options (Style Tab)

• Adjust margin/padding (space around content).
• Change background color.
• Choose text alignment and colors to match your theme.

e. Advanced Settings (Advanced Tab)

• Enable Multi Row (for multiple lines of images).
• Set Full Width if you want it to stretch across the screen.
• Configure how many columns show on desktop/tablet/mobile.
• Add Custom CSS if needed.

3. Multi Banner

This module is useful for showing multiple promotional banners at once (like “Bestsellers,” “New Arrivals,” “On Sale”).

Steps:

a. Content Settings

• Add a Heading (main title).
• Add a Subheading (supporting text).
• For each banner (column), set:
• • Title
  • Image
  • Caption
  • Button + link

b. Style Tab

• Change text color, alignment, and background color.
• Adjust margins/padding so banners have proper spacing.

c. Advanced Settings

• Choose how many banners to display at once.
• Hide banners for desktop or mobile if needed.
• Add Custom CSS.

4. Products Section

This module displays your actual store products.

Steps:

a. Content Tab

• Add a Heading (e.g., “Our Top Picks”).
• Add a Subheading (optional).
• Choose a Product Category to display (e.g., “Shoes” or “Electronics”).

b. Style Tab

• Adjust background color, margin, and padding to fit your page.

c. Advanced Tab

• Add Custom CSS for more design control.

5. Parallax Banner

A Parallax Banner creates a scrolling effect where the background image moves slower than the text on top, giving a modern, stylish look.

Steps:

a. Content Tab

• Upload a background image.
• Add a Heading + Text.
• Add a Button Label + Link.

b. Style Tab

• Choose text alignment (left/center/right).
• Change text color for readability.

c. Advanced Tab

• Add Custom CSS.

6. Image with Text

This module places an image beside a block of text (good for story sections like “About Us”).

Steps:

a. Content Tab

• Upload an Image.
• Add a Heading, Subheading, and Text.
• Add a Button Label + Link if needed.

b. Style Tab

• Choose image alignment (start/center/end).

c. Advanced Tab

• Add Custom CSS.

7. Image Collage

This module lets you add a collection of smaller images, often used for brand logos or lifestyle imagery.

Steps:

a. Content Tab

• Add a Heading + Subheading.
• Upload multiple images.

b. Style Tab

• Adjust text color, alignment, background color, margin, and padding.

c. Advanced Tab

• Add Custom CSS.

8. How to Add a Seller Collection and Map Products?

• Go to Storefront from your admin panel.
• Click on Themes.
• On your default theme, click the Customize button (top-right corner).
  • This will open the Design Panel.

Adding a Seller Collection

• In the Design Panel, under the Template section, click on Seller Collection.
• On the right side, click on + Add Collection.
• A Seller Collections box will appear. Click on Add New.
• Enter the name of your collection and click Create.

Mapping Products to the Collection

• A product list will now appear. Search or scroll to find the products you want to add.
• Select the products and click Update.
  • Your selected products will be mapped and appear on the left side.
• Close the pop-up and click Save to apply the changes.