# Shopify Guide - Building Your Shopify Store

### Recommended Shopify Image Sizes (2025)

Here’s a breakdown of optimal dimensions for various image types in your store:

<table border="1" id="bkmrk-image-type-recommend" style="border-collapse: collapse; width: 100%; height: 284.119px;"><colgroup><col style="width: 27.0509%;"></col><col style="width: 23.0033%;"></col><col style="width: 13.3478%;"></col><col style="width: 36.7064%;"></col></colgroup><tbody><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Image Type**</td><td style="height: 29.7017px;">**Recommended Size**</td><td style="height: 29.7017px;">**Aspect Ratio**</td><td style="height: 29.7017px;">**Notes**</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Product Images**</td><td style="height: 29.7017px;">2048 x 2048 px</td><td style="height: 29.7017px;">1:1</td><td style="height: 29.7017px;">Best for zoom and clarity  
</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Collection Images**</td><td style="height: 29.7017px;">1024 x 1024 px</td><td style="height: 29.7017px;">1:1</td><td style="height: 29.7017px;">Used in collection grids  
</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Collection Banners**</td><td style="height: 29.7017px;">2800 x 1000 px</td><td style="height: 29.7017px;">2.8:1</td><td style="height: 29.7017px;">Full-width headers  
</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Homepage Banners (Desktop)**</td><td style="height: 29.7017px;">1200 x 400 px</td><td style="height: 29.7017px;">3:1</td><td style="height: 29.7017px;">Horizontal layout</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Homepage Banners (Mobile)**</td><td style="height: 29.7017px;">800 x 600 px</td><td style="height: 29.7017px;">4:3</td><td style="height: 29.7017px;">Optimized for mobile</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Blog Featured Images**</td><td style="height: 29.7017px;">1920 x 1080 px</td><td style="height: 29.7017px;">16:9</td><td style="height: 29.7017px;">For blog headers</td></tr><tr style="height: 29.7017px;"><td style="height: 29.7017px;">**Blog Thumbnails**</td><td style="height: 29.7017px;">1200 x 800 px</td><td style="height: 29.7017px;">3:2</td><td style="height: 29.7017px;">For previews and listings</td></tr><tr style="height: 46.5057px;"><td style="height: 46.5057px;">**Logo**</td><td style="height: 46.5057px;">Up to 450 x 250 px</td><td style="height: 46.5057px;">Varies</td><td style="height: 46.5057px;">Keep file size small for fast loading</td></tr></tbody></table>

Tips for Uploading to Your Main System

- **Use JPG or WebP formats** for best balance of quality and load speed.
- **Compress images** before uploading to avoid slowing down your site.
- **Maintain consistent aspect ratios** to avoid cropping or distortion.
- **Avoid overly large files** Shopify limits image uploads to 20 MB.

---

### Selecting Your Theme

**A Shopify online store theme is a customizable template that controls the look, layout, and functionality of your storefront.** It defines how your products, pages, and navigation appear to customers across desktop and mobile.

Click on **“Online Store”** in the left-hand menu, then select **“Themes.”**  
The **Dawn theme** is installed by default for new stores.  
If you'd like to explore other themes, scroll down and click **“Visit Theme Store”** to browse free and paid options.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/vxvimage.png) ](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/vxvimage.png)[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/uzbimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/uzbimage.png)

---

### Customize your Store

To customize your store, click on "**Customize**" this will take you into the store editor.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/6rlimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/6rlimage.png)

---

### Main Header (Home Page)

#### Announcement Bar 

The **Announcement Bar** in Shopify is a customizable banner that appears at the top of your online store, used to highlight important messages like promotions, shipping updates, or store news. It’s a simple but powerful tool to grab attention and guide customer behavior.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/2Baimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/2Baimage.png)

<span style="text-decoration: underline;">Commonly Used for:</span>

- “Free shipping on orders over $50”
- “Holiday sale ends Sunday!”
- “We’re currently experiencing shipping delays”
- “New gift cards now available”

<span style="text-decoration: underline;">How to Add or Edit It</span>

1. Go to **Online Store &gt; Themes &gt; Customize**
2. Select the **Header** or **Announcement Bar** section
3. Enter your message, choose colors, and set visibility from the

##### Announcement Bar Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/UPGimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/UPGimage.png)

<span style="text-decoration: underline;">Time to Next Announcement</span>

- **Slider (e.g., 5 sec):** Controls how long each announcement stays visible before switching to the next one (if you have multiple messages rotating).

<span style="text-decoration: underline;">Appearance</span>

- **Section Width:**
- **Page:** Keeps the bar aligned with your page content width.
- **Full (selected):** Stretches the bar across the entire screen width for maximum visibility.

- **Color Scheme:** Choose a predefined color palette (e.g., Scheme 1) that matches your store’s branding.
- **Divider Thickness:** Adds a horizontal line below the bar. The slider (e.g., 1 px) controls how thick that line is.

<span style="text-decoration: underline;">Padding</span>

- **Top &amp; Bottom (e.g., 15 px):** Adds space above and below the announcement bar to control its vertical spacing. Useful for visual balance and readability.

<span style="text-decoration: underline;">Custom CSS</span>

- Expandable section where you can add custom styling rules (CSS) to fine tune the look, like font tweaks, animations, or responsive behavior.

<p class="callout info">You can delete this bar as well by hovering over "Announcement" and clicking on the Bin icon</p>

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/JW1image.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/JW1image.png)

#### Header Bar

The **header bar** is the top section of your store that displays your logo, navigation menu, search, and cart icons. It helps customers find key pages like Shop or Contact, return to the homepage, and access their cart.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/T08image.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/T08image.png)

##### Header Menu Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/9toimage.png) ](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/9toimage.png)[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/BRkimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/BRkimage.png)

<span style="text-decoration: underline;">Logo</span>

- **Position:** Choose where your logo appears—Left, Center, or Right.

<span style="text-decoration: underline;">Menu</span>

- **Position:** Set the horizontal alignment of your navigation menu.
- **Row:** Choose whether the menu appears on the Top or Bottom row of the header.

<span style="text-decoration: underline;">Customer Account</span>

- **Visibility:** Manage whether the customer account icon is shown. Note: legacy accounts are not supported.

<span style="text-decoration: underline;">Search</span>

- **Search Icon:** Toggle visibility of the search icon.
- **Position:** Align the icon to the Left or Right.
- **Row:** Choose Top or Bottom placement within the header.

<span style="text-decoration: underline;">Localization</span>

- **Country/Region:** Toggle to show or hide country/region selector.
- **Flag:** Toggle to display country flags.
- **Language Selector:** Toggle to enable language switching.
- **Manage Countries/Languages:** Access settings to configure available regions and languages.

<span style="text-decoration: underline;">Font Settings</span>

- **Font:** Select the font style used in the header.
- **Size:** Choose the font size (e.g., 18px).
- **Position &amp; Row:** Control where the text appears—Left or Right, Top or Bottom.

<span style="text-decoration: underline;">Appearance</span>

- **Width:** Choose between “Page” (aligned with page content) or “Full” (spans entire screen).
- **Height:** Select “Compact” for a slim header or “Standard” for a taller layout.

<span style="text-decoration: underline;">Color and Transparency Settings</span>

These settings control the visual styling of your header and page backgrounds:

- **Color Scheme:** Choose from predefined schemes (e.g., Scheme 1, Scheme 8, Inverse) to match your brand.
- **Bottom Row Scheme:** Apply a separate color scheme to the lower portion of the header if supported.
- **Transparent Backgrounds:**

- **Home Page:** Toggle transparency for a clean, overlay-style header.
- **Product Page:** Enable transparency to let product imagery shine through.
- **Collection Page:** Combine transparency with color schemes for visual consistency.

<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Theme Settings</span></span>

- **Custom CSS:** Expand this section to apply advanced styling rules for full control over header appearance.


#### Logo

The **Logo tab** controls how your store’s logo appears in the header. This is a key branding element that helps customers recognize your business and navigate back to the homepage.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/lihimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/lihimage.png)

##### Logo Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/iIvimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/iIvimage.png)

<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Edit Logo</span></span>

- **Edit logo in theme settings:**  
    To change the logo image itself (upload, replace, or resize), go to your theme’s main settings panel.

<span style="text-decoration: underline;">Visibility</span>

- **Hide logo on home page (toggle):**  
    If enabled, the logo will be hidden on the homepage but will still appear when the sticky header is active (e.g., during scrolling). Useful for minimalist designs or when the homepage already features a large logo elsewhere.

<span style="text-decoration: underline;">Desktop Padding</span>

Controls the spacing around your logo on desktop devices:

- **Top / Bottom / Left / Right (px):**  
    Use sliders or input fields to fine-tune the logo’s placement.
- Example: Increase top padding to lower the logo vertically
- Set left/right padding to center or offset the logo horizontally

<span style="text-decoration: underline;">Position:</span>  
Choose where the logo appears within the header:

- **Left:** Common for traditional layouts
- **Center:** Ideal for minimalist or symmetrical designs
- **Right:** Less common, but useful for specific branding styles

<span style="text-decoration: underline;">Best Practices</span>

- Use a high-resolution logo with a transparent background (PNG format recommended).
- Keep the logo size proportionate to your header height for visual balance.
- Ensure it’s clickable, most themes link the logo to your homepage by default.

#### Menu - Main

When you click on Menu &gt; Main menu in Shopify’s theme editor, you're customizing how your store’s primary navigation menu looks and behaves across desktop and mobile.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/qjwimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/qjwimage.png)

##### Main Menu Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/YjTimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/YjTimage.png)

- **Menu:** Selects which navigation menu to display (e.g., “Main menu” from your Shopify Navigation settings).
- **Color scheme:** Applies a predefined color palette to your menu (e.g., background, text, hover states).

<span style="text-decoration: underline;">Typography</span>

- **Top level size:** Controls the font size of your main menu items (e.g., Home, Shop, Contact).
- **Submenu text style:** Sets the size or emphasis of dropdown items (e.g., bold, large).
- **Font:** Chooses the font style for menu text (e.g., Subheading, Body).
- **Case:** Toggles between default casing and uppercase for menu labels.

<span style="text-decoration: underline;">Submenu Feature</span>

This section enhances dropdown menus with visual content:

- **Media type:** Lets you display images or featured products within dropdowns.
- “Featured products” pulls product images from linked collections.

- **Image ratio:** Defines the shape of images (e.g., Portrait, Square).
- **Image corner radius:** Adjusts how rounded the image corners are (0 px = sharp corners).

<span style="text-decoration: underline;">Mobile Layout</span>

Controls how the menu behaves on mobile devices:

- **Navigation bar:** Toggles a sticky top bar for mobile navigation.
- **Navigation bar color scheme:** Sets the color palette for the mobile nav bar.
- **Accordion:** Enables collapsible menu groups for easier mobile browsing.
- **Expand first group:** Automatically opens the first menu group on mobile.
- **Dividers:** Adds visual separators between menu items.

#### Divider

<span style="color: rgb(34, 34, 34); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 1.666em; font-weight: 400;"></span>

In Shopify theme settings, the **divider** refers to a thin horizontal line used to visually separate sections, often between the header and the rest of the page or within the announcement bar.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/gxfimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/gxfimage.png)

##### Divider Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/ldlimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/ldlimage.png)

<span style="text-decoration: underline;">Divider</span>

- **Color Scheme:**  
    Select a predefined color palette (e.g., Scheme 1) that matches your store’s branding. This affects the divider’s color.
- **Width:**
- **Page:** Aligns the divider with your page content width.
- **Full:** Stretches the divider across the entire screen for a bold, clean break.

- **Thickness:**  
    Adjusts how thick the line appears. For example, 2.5 px creates a medium weight divider, visible but not overpowering.
- **Length:**  
    Controls how much horizontal space the divider spans (e.g., 100% = full width). You can reduce this for a centered or stylized look.

<span style="text-decoration: underline;">Padding</span>

- **Top &amp; Bottom Padding:**  
    Adds vertical spacing above and below the divider (e.g., 16 px). This helps balance layout and prevent crowding.

<span style="text-decoration: underline;">Custom CSS</span>

- Expand this section to apply advanced styling rules—such as dashed lines, animations, or responsive behavior.

#### Add Section

[Video Link](https://www.bing.com/videos/riverview/relatedvideo?&q=explain+the+%22Add+Section%22+in+shopify&&mid=41CBDF1EDFADF2BE4EF041CBDF1EDFADF2BE4EF0&&FORM=VRDGAR)

The **Add Section** tool lets you insert new content blocks into your store’s pages, like your homepage, product pages, or custom templates. It’s a flexible way to build and organize your layout without editing code.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/jlqimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/jlqimage.png)

<span style="text-decoration: underline;">What You Can Add</span>

- **Visual elements:** Hero banners, slideshows, images, videos
- **Product displays:** Featured collections, product grids, product cards
- **Text blocks:** Headings, testimonials, rich text, FAQs
- **Functional tools:** Announcement bars, dividers, custom Liquid, contact forms
- **Apps:** If installed, app-based sections may appear here too

<span style="text-decoration: underline;">How to Use It</span>

1. In the theme editor, click **“Add Section”**
2. Use the **search bar** or browse tabs like **Sections** and **Apps**
3. Select a section (e.g., Divider, Featured Collection)
4. Customize its content, layout, and styling using the right-hand panel
5. Drag to reorder or remove as needed

<span style="text-decoration: underline;">Layout Tip</span>  
Sections are modular, each one can be added, removed, or repositioned independently. This makes it easy to test layouts, highlight seasonal content, or tailor pages to your business needs.

<span style="color: rgb(34, 34, 34); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Roboto, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; font-size: 1.666em; font-weight: 400;"></span>

---

### Template

#### Hero Image

A hero image in Shopify is the large, eye-catching banner at the top of your homepage that creates your store’s first impression. It’s often the first thing visitors see and plays a key role in setting the tone, showcasing your brand, and guiding users toward action.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/FMyimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/FMyimage.png)

##### Hero Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/cSrimage.png) ](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/cSrimage.png)[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/txkimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/txkimage.png)

<span style="text-decoration: underline;">Navigate to the Home Page</span>

- In the left sidebar, make sure you're editing the **Home page**
- Scroll to find the **Hero** section — or click **Add section** and choose **Hero** if it’s not already there

<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Upload Media</span></span>

1. - **Media 1**: Upload your “first” logo image.
    - **Media 2**: Upload the "Second" logo image.
    - Set both media types to **Image**.

<span style="text-decoration: underline;">Configure Layout</span>

1. - **Direction**: Choose **Vertical** or **Horizontal** depending on how you want the images and text stacked.
    - **Alignment**: Set to **Left**, **Center**, or **Right**.
    - **Position**: Choose **Bottom** to anchor content lower in the section.
    - **Gap**: Set to **24 px**.
    - **Width**: Select **Full** for edge-to-edge display.
    - **Height**: Choose **Medium** for balanced vertical space.

<span style="text-decoration: underline;">Add Section Link</span>

1. - Paste your desired URL (e.g., product page or collection).
    - Toggle **Open in new tab** if needed.

<span style="text-decoration: underline;">Set Appearance</span>

1. - **Color scheme**: Use **Scheme 6** (customizable in theme settings).
    - **Media overlay**: Leave **off** unless you want a semi-transparent layer over images.
    - **Overlay color**: Set to `#00000003` for a subtle tint.
    - **Overlay style**: Choose **Solid** or **Gradient**.
    - **Blurred reflection**: Leave **off** unless you want a mirrored effect below images.

<span style="text-decoration: underline;">Adjust Padding</span>

1. - **Top**: Set to **100 px**.
    - **Bottom**: Set to **72 px**.

<span style="text-decoration: underline;">Optional: Add Custom CSS</span>

- Use this field to fine-tune styles (e.g., font size, button styling).

#### Heading

In Shopify’s **Online Store &gt; Theme &gt; Customize** view, the **“Heading” under the Hero section in the Template** refers to the **main title text** that appears inside your hero banner on the homepage.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/xHnimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/xHnimage.png)

##### Heading Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/NUvimage.png) ](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/NUvimage.png)[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/GQ0image.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/GQ0image.png)

<span style="text-decoration: underline;">Text Field</span>

- **Heading**: This is where you type the main title that appears in your Hero section.

<span style="text-decoration: underline;">Formatting Toolbar</span>

- **H1**: Sets the heading level (H1 is the largest and most prominent).
- **B**: Bold
- **I**: Italic
- **Link icon**: Insert a hyperlink into the heading text
- Other icons may include underline, strikethrough, or list formatting depending on your theme

<span style="text-decoration: underline;">Layout Options</span>

- **Width**:
- **Fit**: The heading only takes up as much space as the text needs
- **Fill**: The heading stretches to fill the available space

- **Max Width**: Controls how wide the heading can grow (e.g., “Normal” keeps it readable)
- **Alignment**: Aligns the heading text to the **Left**, **Center**, or **Right**

<span style="text-decoration: underline;">Typography</span>

- **Preset**: Applies a predefined style (e.g., “Heading 2” uses a specific font, size, and weight)
- **Edit presets in theme settings**: Opens the theme’s typography settings where you can customize fonts, sizes, and styles globally

<span style="text-decoration: underline;">Color Settings</span>

- **Text**: Color of any regular text
- **Heading**: Color of the heading itself
- **Link**: Color of any links added to the heading

<span style="text-decoration: underline;">Background</span>

- **Toggle Background ON** to enable color behind the block
- **Background color**: Set the colour of the background
- **Corner radius**: Use the slider to set the roundness of the corners

<span style="text-decoration: underline;">Padding</span>

- Adjust padding sliders

These settings create a clean, edge-to-edge block with a soft background and rounded corners — ideal for overlaying text on images without clutter.

<span style="text-decoration: underline;">Save Your Changes</span>

- Click **Save** in the top right to apply the block styling

#### Feature Collection

A **featured collection** is a curated group of products displayed prominently on your store, often on the homepage.

It’s used to showcase:

- **Best sellers**
- **New arrivals**
- **Seasonal promotions**
- **Product categories**

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/mn9image.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/mn9image.png)

##### Feature Collection Setup

**Step 1: Create a Collection**

This interface lets you create a collection, which is a group of products organized around a theme (e.g., “Summer Picks,” “Under $100,” “Mobile Scanners”). Collections help customers browse and discover products more easily.

##### [![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/Jt6image.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/Jt6image.png)

1. Go to **Shopify Admin &gt; Products &gt; Collections**
2. Click **Add collection**

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/RIJimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/RIJimage.png)

<span style="text-decoration: underline;">Title</span>

- **Purpose**: Name your collection.
- **Example**: “ScanSKU Mobile Scanners” or “Barcode Essentials”
- This title appears on your storefront and in navigation menus.

<span style="text-decoration: underline;">Description</span>

- **Purpose**: Add a short explanation or marketing message for the collection.
- **Example**: “Explore our top-rated mobile barcode scanners designed for warehouse and retail environments.”
- You can format text (bold, italic, links) using the toolbar.

<span style="text-decoration: underline;">Collection Type</span>

Choose how products are added:

\- Manual

- You **hand-pick** products for the collection.
- Best for curated selections or promotional groups.

\- Smart (Automated)

- Products are added **automatically** based on rules (e.g., tag = “scanner” or price &lt; $100).
- Great for dynamic collections that update as inventory changes.

<span style="text-decoration: underline;">Products</span>

- **Search or browse** to add products (for manual collections).
- You’ll see a list of added products here.
- You can sort them (e.g., by best selling, price, alphabetical).

<span style="text-decoration: underline;">Search Engine Listing</span>

- **Purpose**: Customize how this collection appears in Google or other search engines.
- Add a **SEO title** and **meta description** to improve visibility.

<span style="text-decoration: underline;">Publishing</span>

- Choose where this collection is available:
- **Online Store**
- **Shop and Point of Sale**

- You can also schedule visibility or hide it temporarily.

<span style="text-decoration: underline;">Image</span>

- Upload a **cover image** for the collection.
- Appears on collection pages and in featured sections.

<span style="text-decoration: underline;">Theme Template</span>

- Choose which template **layout** to use for the collection page.
- Most stores use **Default collection**, but custom templates can be created.

<span style="text-decoration: underline;">Save Button</span>

- Click **Save** to create the collection and make it available for use in your store.



##### Add the Collection to Your Homepage

- Go to **Online Store &gt; Themes &gt; Customize**
- In the left sidebar, click **Add section**
- Scroll down to **Collections**
- Select what you would like to add

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/OGiimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/OGiimage.png)

### Personalize the view of your Template

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/eDvimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/eDvimage.png)

<p class="callout info">Each tab includes configurable settings located in the panel on the right-hand side of the screen when you click on it.  
</p>

#### Featured Collection

This is the overall container for showcasing a group of products from a specific collection.

##### Carousel Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/Hjnimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/Hjnimage.png) [![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/6vpimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/6vpimage.png)

<span style="text-decoration: underline;">Collection</span>  
Select which product collection to display in the carousel (e.g., “Car Accessories”).

<span style="text-decoration: underline;">Type</span>  
Choose the layout style — in this case, “Carousel” means products scroll horizontally.

<span style="text-decoration: underline;">Product count</span>  
Sets how many products from the collection will be shown in the carousel.

<span style="text-decoration: underline;">Columns</span>  
Controls how many product cards are displayed side-by-side on desktop screens.

<span style="text-decoration: underline;">Mobile columns</span>  
Sets how many product cards appear per row on mobile devices (typically 1 or 2).

<span style="text-decoration: underline;">Horizontal gap</span>  
Adjusts the spacing (in pixels) between product cards in the carousel.

**Carousel Navigation Settings**

<span style="text-decoration: underline;">Icon</span>  
Selects the style of navigation arrows (e.g., arrows, chevrons) used to scroll through products.

<span style="text-decoration: underline;">Icon background</span>  
Defines the shape or style behind the navigation icons:

- **None**: Icons appear without a background.
- **Circle**: Icons are placed inside circular backgrounds.
- **Square**: Icons are placed inside square backgrounds.

**Section Layout Settings**

<span style="text-decoration: underline;"><span style="color: rgb(0, 0, 0); text-decoration: underline;">Width</span></span>  
Determines how wide the section spans across the page:

- - **Page**: Aligns with your site's standard content width.
    - **Full**: Stretches the section edge-to-edge across the screen.

<span style="text-decoration: underline;">Alignment</span>  
Sets the horizontal positioning of content within the section:

- - - **Left**, **Center**, or **Right**.

<span style="text-decoration: underline;">Gap</span>  
Controls the spacing between elements inside the section (e.g., between product cards or blocks). Measured in pixels.

<span style="text-decoration: underline;">Color scheme</span>  
Applies a predefined theme color set (e.g., background, text, buttons) based on your store’s design system — “Scheme 1” is one of those presets.

**Padding Settings**

<span style="text-decoration: underline;">Top / Bottom</span>  
Adjusts the vertical spacing above and below the section. Useful for creating breathing room between sections.

**Theme Settings**

<span style="color: rgb(0, 0, 0);">Custom CSS</span>  
Allows you to apply custom styling rules if you want advanced control beyond the built-in options (e.g., font tweaks, hover effects).

**Remove Section**

Deletes the entire section from your homepage layout.

#### Header 

Controls the top part of the featured collection display.

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/Jzsimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/Jzsimage.png)

- **Add block**: Lets you insert additional header elements like text, images, or buttons.
- **Collection title**: Displays the name of the collection (e.g., “Car Accessories”).
- **View all button**: Adds a clickable button that links to the full collection page.

##### Header Settings

[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/znQimage.png) ](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/znQimage.png)[![image.png](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/scaled-1680-/TgBimage.png)](https://hugeerp10.co.za/hsofmanual/uploads/images/gallery/2025-11/TgBimage.png)

<span style="text-decoration: underline;">Layout Settings</span>

Controls how header elements (like title, subtitle, buttons) are arranged:

- - **Vertical** stacks them top-to-bottom.
    - **Horizontal** places them side-by-side.

<span style="text-decoration: underline;">Vertical on mobile</span>  
Forces a vertical layout on smaller screens for better readability and spacing.

- **Alignment: Space between**  
    Defines how elements are spaced within the header. “Space between” pushes items to the edges with space in between. Other options may include “Start,” “Center,” or “End.”
- **Position: Top / Center / Bottom**  
    Sets the vertical placement of the header content within the section.
- **Align text baseline**  
    Ensures that text elements align along their baseline for a cleaner, more consistent look — especially useful when mixing font sizes.
- **Gap (12 px)**  
    Adjusts the spacing between individual header elements (e.g., between title and button).

<span style="text-decoration: underline;">Size </span>

- **Width: Fit / Fill / Custom**  
    Controls how wide the header content stretches:
- **Fit**: Content takes up only as much space as needed.
- **Fill**: Content stretches to fill the available space.
- **Custom**: Lets you define a specific width.

- **Mobile width: Fit / Fill / Custom**  
    Same as above, but applies specifically to mobile view.
- **Height: Fit / Fill / Custom**  
    Controls the vertical height of the header block:

- **Fit**: Adjusts to content height.
- **Fill**: Stretches to fill the section height.
- **Custom**: Allows manual height setting.

<span style="text-decoration-line: underline;">Appearance Settings</span>

- **Inherit color scheme**  
    When toggled on, the section adopts the color palette defined by your theme (e.g., background, text, button colors). Turning it off lets you apply custom styling.
- **Background media**  
    Choose what appears behind the content:
- **None**: No background media.
- **Image**: Upload or select an image as the background.
- **Video**: Use a video as the background for dynamic visual impact.

- **Borders**  
    Controls whether the section has a visible border:
- **None**: No border.
- **Solid**: Adds a solid line around the section.

- **Corner radius (0 px)**  
    Adjusts how rounded the corners of the section are.
- **0 px** = sharp corners
- Higher values = more rounded corners

<span style="text-decoration-line: underline;">Padding Settings</span>

Controls the internal spacing between the content and the edges of the section:

- **Top / Bottom / Left / Right**  
    Each slider sets the padding in pixels for that side.
- Increasing the value adds more breathing room between the content and the section’s edge