Complete Shopify Store Setup
Budget: $750 – $1,500 USD
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.
### 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.