Project: Homepage & Collection Cleanup – Patti Sue’s Boutique ### Overview The store is built on Shopify with some sections in GemPages. I need a developer to finish and clean up specific layout issues so the site looks professional and is easy for me to maintain. *** ## Screenshots and Fixes ### Fix A – Homepage Hero (top of Home page) **Screenshot:** - Home page editor with a blank area above the “Women’s & Curvy Boutique in Altoona, Iowa” text. **Goal:** Add a full‑width hero image at the top of the homepage, directly under the header, with editable heading, subheading, and button. **Details for you:** - Use the theme’s **Image banner** or the **Sparkly Hero** section (I already started adding Sparkly Hero in the “Add section” popup). [youtube](https://www.youtube.com/watch?v=-sxaATSyvX4) - Place this hero section as the **first Template section under Header**. - Editable fields: - Hero image - Heading text - Subheading text - Button label + link - Responsive behavior: - Desktop: wide image with text on top, aligned to match the rest of the brand. - Mobile: text and button stay readable, no important parts of the image cropped off. *** ### Fix B – Pink Category Buttons Row (Section 6 in GemPages) **Screenshot:** - Row showing: - Large buttons: “Women’s Tops”, “Curvy Tops” - Smaller buttons: “Women’s Bottoms”, “Curvy Bottoms” **Current problem:** Even when I match padding and text size in the GemPages panel, the two right‑hand buttons look smaller and misaligned. **Goal:** All four pink buttons must look identical in size and style, with only the label and link different. **Details for you:** - This is **Section 6** in GemPages. - For each button: - Inner pink button: same font family, weight, size, padding, border radius, shadow, and hover state. - Outer white “card”: same padding and size so all cards match. - Layout: - Desktop: 4 buttons evenly spaced across the row. - Tablet: 2 per row is fine. - Mobile: 1 per row is fine as long as text size stays legible. **Implementation preference:** - Create a **reusable class/style** for these category buttons so I can duplicate an existing button to add new categories. - Please document: “To create a new category button, duplicate Button X and only change the text and link.” *** ### Fix C – Collection Product Grids (e.g., Women’s Bottoms) **Screenshot:** - A very long vertical page showing many denim products in a single column. **Current problem:** When many products are added to a collection, the page becomes extremely long. **Goal:** Standardize product grids across collections and enable pagination. **Details for you:** - Use the theme’s **Product grid** section on collection templates. [shopify](https://shopify.dev/docs/storefronts/themes/architecture/sections) - Standard settings (unless you recommend better): - Products per page: **12**. - Desktop columns: **3 or 4**. - Tablet: 2 columns. - Mobile: 1 column. [community.shopify](https://community.shopify.com/t/how-to-add-a-simple-image-block-to-home-page-dawn-theme/300411) - Ensure pagination appears at the bottom (page 1, 2, etc.). - Normalize top/bottom padding for the Product grid so there isn’t a huge gap before or after the products. *** ### Fix D – Email Signup Section **Screenshot:** - “Stay in the Patti’s Loop” heading with text and an email field underneath; editor shows **Email signup** and **Email form** with “No customizable settings available”. **Current issues:** - The form looks odd (duplicate “Email” label in some views). - Limited control in the visual editor. **Goal:** A clean email signup section near the bottom of the homepage that looks good on desktop and mobile. **Details for you:** - Keep my current copy (or make it easy for me to edit text later). - Simplify the form to: - Only an **Email** field, or - Name + Email if technically required. - Align fields neatly under the text and ensure responsive behavior. - Standardize section padding (about **24px top and bottom**). - Confirm the form still posts to Shopify’s native marketing/email system. [shopify](https://shopify.dev/docs/storefronts/themes/architecture/sections) *** ### Fix E – Footer Logo Strip **Screenshot:** - A wide strip above the footer showing the Patti Sue’s Boutique logo on the left with a lot of empty space. **Current issue:** The logo sits with a lot of blank space and doesn’t feel like a clean footer. **Goal:** A neat, centered logo strip directly above the footer. **Details for you:** - Reduce vertical padding so the section doesn’t feel excessively tall. - Center the logo horizontally in the section. - Ensure this section is the last one above the footer in the homepage template. *** ## General Implementation Notes - **Platform:** Shopify Online Store 2.0. [shopify](https://shopify.dev/docs/storefronts/themes/architecture/sections) - **Page builder:** GemPages for some custom sections (especially the category buttons). [community.shopify](https://community.shopify.com/t/how-can-i-add-this-text-with-icons-to-my-product-page-dawn/202904) - Please use **theme settings and GemPages controls first**; only use custom CSS when absolutely necessary. - If custom CSS is added, keep it in one place (theme’s “Custom CSS” or GemPages global CSS) with clear comments (e.g., `/* Category buttons row (Section 6) */`). *** ## Deliverables 1. Updated homepage and key collection templates with the fixes above. 2. A short written guide (or Loom video) explaining: - Where I can change hero image/text. - How to add another category button. - Which Product grid settings to keep (Products per page, Columns). - Where any custom CSS lives and how to reuse the classes.