Templates
The Theme in Mystore allows you to design and customize your website without any coding. Each section (called a module) comes with simple tools to add content, style it, and adjust its appearance on desktop or mobile devices.
This guide walks you through the most commonly used modules, step by step.
1. Add New Sections
You can add new sections to your store using layouts like carousel, tabs, product list, or slideshow. Each section can be customized with content, styled in the Advanced tab, and saved separately for desktop or mobile views.
Steps:
- Click Add Section.
- Select the type of section you want to add.
- Click Apply for your preferred version.
Available Layout Types:
- Carousel – A rotating slider for multiple items.
- Tabs – Switchable content panels within the same section.
- Multi-column – Arrange content into several vertical columns.
- Collage – Layout with multiple images arranged in a creative grid.
- Single Image – Add one standalone image.
- Product List – Display products from your store.
- Slideshow – Scrollable images or content blocks, like Slideshow.
Click on the layout you want, and then customize it using the right-side panel.
2. Customize the Section
On the right panel, you will find three tabs: Content, Style, and Advanced.
Content Tab
This tab lets you add or edit the content for the section.
| Field | Description |
|---|---|
| Heading | The main title for the section. |
| Sub Heading | A secondary title or tagline displayed below the main heading. |
| Text | Any descriptive text or content for the section. |
| Quote Text | Special field for quotes or testimonials. |
| Button Label | Text that appears on any clickable buttons. |
| Button Link | URL or page that the button should link to. |
| Seller Collections | Add specific seller collections to display products in this section. |
| Image | Upload an image to display on desktop. |
| Mobile Image | Upload a separate image optimized for mobile view. |
Style Tab
The Style tab lets you adjust the visual appearance of the section.
| Field | Description |
|---|---|
| Text Color | Change the color of the text in the section. |
| Content Alignment | Align text and elements to left, center, or right. |
| Background Color | Set a solid background color for the section. |
| Background Image | Upload an image as the section background. |
| Margin | Space outside the section for desktop (eg., 0, 8, 12). |
| Margin Mobile | Space outside the section specifically for mobile view (eg., 0, 8, 12). |
| Padding | Space inside the section for desktop (eg., 0, 8, 12). |
| Padding Mobile | Space inside the section specifically for mobile view (eg., 0, 8, 12). |
| Image Resolution | Adjust image quality or resolution for better performance. |
| Image Alignment | Position the image within the section (left, center, right). |
Advanced Tab
The Advanced tab provides additional customization options.
| Field | Description |
|---|---|
| Hide on Desktop | Hide this section from desktop view while keeping it visible on mobile. |
| Hide on Mobile | Hide this section from mobile view while keeping it visible on desktop. |
| Custom CSS | Add custom CSS code to style the section further. |
3. Adding a Seller Collection and Mapping Products
Seller Collections let you group products together to display them in sections like Product Lists or Carousels.
Adding a Seller Collection:
- Go to Storefront from your admin panel.
- Click Themes.
- On your default theme, click Customize (top-right corner).
- This opens the Design Panel.
- In the Design Panel, under the Template section, click Seller Collection.
- On the right, click + Add Collection.
- A Seller Collections box will appear. Click Add New.
- Enter the name of your collection and click Create.
Mapping Products to a Collection:
- A product list will now appear. Search or scroll to find the products you want to include.
- Select the products and click Update.
- Your selected products will now be mapped and displayed in the collection.
- Close the pop-up and click Save to apply changes.