Welcome to the Theme Settings, your hub for comprehensive global customization options that define the overall aesthetic and functionality of your online store. Here’s an in-depth look at each section:
1. Layout
Page Width
- Description: Adjust the width of the entire page.
- Settings: Slider to set the width in pixels (px).
- Default: 1340 px.
Rounding
- Button Corner Radius: Adjust the roundness of button corners.
- Input Corner Radius: Adjust the roundness of input fields.
- Block Corner Radius: Adjust the roundness of blocks.
- Menu and Drawer Radius: Adjust the roundness of menus and drawers.
- Settings: Sliders to set radius in pixels (px).
2. Colors
Schemes
- Description: Predefined color schemes for the website.
- Settings: Choose from available schemes or add a new scheme.
Success
- Success Background: Color code for success messages.
- Success Text: Color code for success text.
Error
- Error Background: Color code for error messages.
- Error Text: Color code for error text.
Drawer
- Color Scheme: Choose a color scheme for the drawer.
- Settings: Dropdown menu to change the scheme.
3. Typography
Heading Text
- Font: Select a font for headings.
- Font Size Scale: Adjust the scale of the font size for headings.
Body Text
- Font: Select a font for body text.
- Font Size Scale: Adjust the scale of the font size for body text.
Button Text
- Font: Select a font for button text.
- Font Size Scale: Adjust the scale of the font size for button text.
4. Currency Format
Currency Codes
- Show Currency Codes: Option to always show currency codes (e.g., $1.00 USD).
- Settings: Checkbox.
5. Animation
Enable Animation
- Description: Toggle animations on the website.
- Settings: Checkbox.
Slide Duration
- Description: Adjust the duration of slide transitions.
- Settings: Slider to set duration in milliseconds (ms).
- Default: 600 ms.
6. Social Media
Links
- Description: Add or search for social media links.
- Platforms: Facebook, X (formerly Twitter), Pinterest, Instagram, TikTok, LinkedIn, Tumblr, Snapchat, YouTube, Vimeo.
- Settings: Input fields for each platform.
7. Product Card
Show Vendor
- Description: Display the vendor name on product cards.
- Settings: Checkbox.
Show Secondary Image on Hover
- Description: Display a secondary image when hovering over a product.
- Settings: Checkbox.
Show Quick View
- Description: Enable quick view for products.
- Settings: Checkbox.
- Quick Buy Button: Options for quick buy button style (Stacked, Overlay, None).
Show Product Rating
- Description: Display product ratings.
- Settings: Checkbox.
Image Ratio
- Description: Set the image ratio for product images.
- Settings: Dropdown menu (Square, Custom).
Image Fit
- Description: Adjust how the product image fits within its container.
- Settings: Options for Contain or Cover.
Offer Text
- Show Offer Text: Display text for offers.
- Settings: Checkbox.
- Image Background Color: Color code for the background.
- Offer Text Color: Color code for the offer text.
8. Badges
Show Sale Badge
- Description: Display a badge for items on sale.
- Settings: Checkbox.
- Position: Set the position of the badge (Top Left, etc.).
Sale Badge
- Background Color: Color code for sale badge background.
- Text Color: Color code for sale badge text.
Soldout Badge
- Background Color: Color code for soldout badge background.
- Text Color: Color code for soldout badge text.
Sale Badge Type
- Options: Sale, Percentage off, Saved amount.
9. Search
Enable Predictive Search Results
- Description: Control predictive search results.
- Settings: Checkbox.
Products
- Show Price: Display product prices in search results.
- Settings: Checkbox.
Article
- Show Image: Display article images in search results.
- Show Author: Display article authors.
- Show Title: Display article titles.
- Show Date: Display article dates.
- Show Content: Display article content.
- Settings: Checkboxes for each option.
10. Cart
Cart Type
- Description: Choose between a cart page or drawer.
- Settings: Radio buttons (Page, Drawer).
Empty Button Link
- Description: Set the link for the empty cart button.
- Settings: Input field to paste a link.
Dynamic Checkout Buttons
- Description: Show dynamic checkout buttons.
- Settings: Checkbox.
Show Product Vendor
- Description: Display the vendor name in the cart.
- Settings: Checkbox.
Show Order Note
- Description: Allow customers to add order notes.
- Settings: Checkbox.
Free Shipping Bar
- Description: Show a progress bar for free shipping.
- Settings: Input fields to set minimum amount and configure text colors.
- Free Shipping Minimum Amount: Set the minimum amount for free shipping.
- Text & Bar Color: Color code for text and bar.
- Background Color: Color code for the background.
11. Favicon
Image
- Description: Set an image for the favicon.
- Settings: Upload or select an image (32×32 px recommended).
12. Advanced
Scroll to Top
- Description: Enable a scroll to top button.
- Settings: Checkbox and options to set button position (Left, Right).
- Arrow Color: Color code for the arrow.
- Background Color: Color code for the button background.
13. Custom CSS
Custom Styles
- Description: Add custom CSS styles for the entire online store.
- Settings: Text area to input custom CSS code.
Optimizing Your Shopify Theme for SEO
- Responsive Design: Ensure your layout settings are mobile-friendly to improve user experience and SEO rankings.
- Color Schemes: Use color schemes that provide high contrast and readability.
- Typography: Select clear and legible fonts for both headings and body text to enhance readability.
- Speed Optimization: Minimize animation durations and optimize image sizes for faster load times.
- Social Media Integration: Add relevant social media links to boost engagement and social signals.
- Product Cards: Highlight product information and use features like quick view and hover images to enhance user interaction.
- Badges: Use badges to attract attention to sales and special offers.
- Search Functionality: Enable predictive search and display relevant information to improve user navigation.
- Cart Features: Make the checkout process seamless with dynamic buttons and vendor display options.
- Favicon: Use a recognizable favicon for brand visibility.
- Custom CSS: Implement custom styles to tailor the look and feel of your store to match your brand identity.
By fine-tuning these settings, you can create a visually appealing, user-friendly, and SEO-optimized Shopify store that attracts and retains customers.
