Theme Settings

A color scheme is a collection of harmonizing colors for your store’s text, background, buttons, and badges. Apply these color schemes to various sections of your store to achieve a cohesive and visually appealing look.

According to Shopify, you have the flexibility to add 21 color schemes to your store, allowing you to tailor the look and feel to your unique preferences and branding.

To change a color scheme, just click on the one you want. This will open a window where you can pick a color or type in a color code. Remember to choose colors that everyone can see easily, so your store is welcoming to all:

In general, you can edit color for background and content on the page or section.
In Solid button, you can edit color background and content for button.
In the Outlined button, you can edit color for content and outline.

General Colors

Page background: The main website background color
Page background gradient: Optional gradient overlay on background
Drawer/Popover section: This refers to a section that pops up, like the prompt to enter a password on a password page, or the display that appears when you use the search function. It’s a type of overlay that shows up over the main content, typically used for short, focused tasks like searches, logins, or additional information.
Drawer/popover mask overlay: When you open a drawer or popover menu (like a sidebar menu or a cart summary), the rest of the page is often covered with a slightly opaque layer, which is the mask overlay. This overlay helps to focus the user’s attention on the drawer or popover by visually muting the rest of the page. You can change the color code to the color which you want to match with the color scheme.
Blurry element 1 & 2: Background blur effects for layered elements. To see this layer, you will need to use a transparent background for the section.

Product Badge

Sale text: Text color for “Sale” badges
Sale background: Background color for sale badges
Sold out text: Text color for “Sold Out” labels
Sold out background: Background color for sold out badges. It’s typically used to distinguish sold-out items from those that are available, often using muted or distinct colors to indicate the unavailability of the product.
“New in” text & background (colors for new products, if applicable)

Typography

To change Typography, we can go to Theme settings > Typography, where you can universally change the font family of headings and body texts, as well as font scale level. Check this article to learn more about the Typography settings in Shine theme.

Product Information

It controls:

How product options display (as dropdowns, color swatches, etc.)
Stock status alerts for customers
“New” product indicators

Stock Status

Low stock threshold: Set a number (0-10). When inventory drops below this number, show “Low Stock” alert.
- Example: Set to 3 = Show “Low Stock” alert when only 3 items remain
Set to 0 = Never show low stock warnings
New in date limit: Specify how many days a product stays marked as “New” after being added.
- Example: Set to 7 = Products show “New” badge for 7 days after upload

Variant swatches

Variant swatches let customers click colors/sizes instead of using dropdowns

To set up variant swatches:

Variant option: Enter the exact name of your product variant (must be lowercase)
- Example: “color” or “size”
Display type: Choose how swatches show:
- Color swatches: Manual color codes or images
- Variant image: Use product images automatically
Custom values for swatches: Enter color codes
- Example: “Black: #000000” or “White: #FFFFFF”
- Or upload image files: “Red: https://cdn.shopify.com/…red-image.jpg”

Important Notes:

Only ONE variant type per theme (e.g., just “color” OR just “size”, not both at once)
Variant name must EXACTLY match your product setup (lowercase)
Images must be PNG or JPG files uploaded to Shopify Files

Appearance

Controls the overall visual design and layout of your store – spacing, rounded corners, icon styles, and link behavior.

It controls:

Page width and spacing
Whether corners are sharp or rounded
Icon appearance (thin or bold)
How links behave when customers hover over them

Spacing

Content max width: How wide your content is
- Range: 1300-2000 pixels
- Default: 2000px (wider = content spreads across more of screen)
- Beginner tip: 1600-1800 is usually best for readability
Base unit: Sets the basic spacing measurement for all elements
- Default: 12px
- Higher number = more space between elements
- This automatically adjusts spacing for tablets and phones

Corner radius

Choose between Sharp or Rounded corners for:

Section container: Cards and content boxes
Drawer/popover: Pop-up windows and modals
Button: All buttons (also affects pagination buttons and tags)
Common components: General UI elements
- Example: If you choose “Rounded” for Button, all buttons will have rounded corners

Icon

Icon thickness: Choose Regular (thin) or Bold (thick) for all icons in your store

Link

Preload links on hover: When enabled, the next page starts loading when customer hovers over a link (faster page loads)
- Good for: Improving perceived speed

Product Card

Controls how individual product boxes look when displayed in collections, search results, or product grids.

Card layout style (simple box vs. detailed card)
Image size and aspect ratio
Sale badge display
Availability status badges

Product cards appears on collection pages, search results, related products sections, featured collections

General

Style: Choose between:
- Card: Product info below image in a bordered box
- Standard: Just shows product image (minimal design)
Color scheme: Select which color scheme to apply to product cards
Content Alignment: Left or Center alignment for product text

Image

Image Ratio: Choose how the product image appears:
- Square: 1:1 ratio (most common)
- Portrait: 3:4 ratio (tall/vertical)
- Landscape: 4:3 ratio (wide/horizontal)
- Adapt to image: Uses original image proportions
Image Fit:
- Fill: Crops image to fit container
- Fit: Shows entire image (may have empty space)
- Show second image on hover: (Toggle) When enabled, shows alternate product photo when customer hovers their mouse

Information

Show sale badge: Three options:
- Never: No sale label
- Text Only: Shows “Sale” text
- Text + Sale Amount: Shows “Sale” + discount percentage
Show sold out badge: (Toggle) Displays “Sold Out” label on unavailable products

Quick Shop

Quick Shop is a convenient pop-up that displays essential product information when a customer clicks on the “Quick Shop or Quick Add” button. It allows customers to quickly review product details and make informed purchase decisions without leaving the current page.

Check this article to learn more about the Quick Shop settings in the Shine theme.

Collection Card

Controls how collection boxes/tiles appear when showcasing multiple product collections.

Collection card appears on collection showcase sections, category display areas

Color scheme: Select the color scheme for collection cards
Overlay opacity: Slider from 0% (fully clear) to 90% (mostly opaque)
- Controls how much the text background shows through
- Default: 30%
Content Alignment: Left or Center
Image Ratio: Three options:
- Portrait: 2:3 (tall format, good for fashion)
- Square: 1:1 (balanced look)
- Landscape: 3:2 (wide format, good for home goods)
Show product quantity: (Toggle) Displays “12 products” inside the collection til

Blog post card

Controls how blog post previews appear when displayed in blog listing sections or related posts areas.

Blog post card appears on blog pages, blog post listing sections, related posts sidebars

Style: Standard or Card.
- Use “Standard” for a very minimal, editorial blog where the page background is already clean and you want posts to flow together.
- Use “Card” if you want each post to stand out as a separate tile, especially on busy backgrounds or when you use multiple background colors.
Color scheme: Select the color scheme for blog post card
Image ratio: Square or Landscape.
- Choose “Square” when your article images are varied and you want a consistent grid look.
- Choose “Landscape” if your images are wide and you want a more editorial feel.

Search

General

Controls where the search box and results appear on your store.

Page: Search results appear on a dedicated search page (customers are taken to a new page)
Drawer: Search results slide out from the side as an overlay (customers stay on the same page)

Predictive Search Results

Quick suggestions that appear in a dropdown while customers are typing in the search box (before they press enter).

(Products are ALWAYS shown automatically)
Blog posts: Turn ON if you have a blog and want to help customers discover blog articles
Pages: Turn ON if you have important pages (About, Contact, FAQ) you want easy access to
Collections: Turn ON if you want to surface product collections

Search Results

Controls full results page that displays after customers press Enter or click search. C

Blog posts (turn on/off)
Pages (turn on/off)
(Products are ALWAYS shown automatically)

Product Result

Image Ratio
- Controls how product images are shaped in search results
  - Square (1:1): Works for most products; gives a clean, uniform look
  - Portrait (3:4): Best for fashion/clothing (tall images)
  - Landscape (4:3): Best for wide items (furniture, home goods)
  - Adapt to image: Shows products in their original shape (varies by product)
Image Background
- If your product images have transparent backgrounds, this color shows behind them
- Usually white is best so images look clean

Collection Result

Image Ratio
- Controls how collection thumbnail images appear in search results
  - Portrait
  - Square
  - Landscape
Show Product Quantity
- Displays the number of products in each collection
- Turn ON to help customers know how many products are in each collection

Blog Post Result

Image Ratio
- Controls how blog featured images appear in search results
  - Landscape: Better for wide blog header images
  - Square: Better for consistent thumbnail looks
Show Blog Post Tag
- Displays the blog post category/tag below the title
  - Turn ON if you want to show blog post topics (e.g., “Tutorial”, “News”)

Cart

The Cart settings control how customers view and interact with their shopping cart. It affects what information they see, how they’re notified about items added, and how shipping information is displayed.

General

Cart type:

Page: Cart appears as a full dedicated page (traditional experience)
Drawer: Cart slides out from the side as a panel (modern, stays on site)

Add to Cart Notification

Popover notification: A small notification box appears in the corner (toast-style)
Show Cart drawer: The cart panel slides open automatically showing the item added
Direct to Cart page: Takes customer directly to the full cart page
Do nothing: No visible feedback (not recommended; customers won’t know if item was added)

Show Discount Field

Turn ON: Customers can enter promo codes to apply discounts
Turn OFF: Customers cannot manually enter coupon codes (only automatic discounts apply)

Enable Order Notes: Allows customers to add special instructions or notes to their order.

Turn ON: Customers can write notes (e.g., “Please leave at door” or “Gift for Sarah”)
Turn OFF: No note field appears

Enable Dynamic Checkout Button

Turn ON: Shows fast checkout options (Apple Pay on iPhone, Google Pay on Android)
Turn OFF: Only shows standard “Proceed to Checkout” button

Show Tax and Shipping Information

Turn ON: Shows “Estimated shipping: $X” and “Estimated tax: $X”
Customers see the total cost early (no surprises at checkout)
Turn OFF: Tax and shipping are only shown at checkout

Empty State Button Link

Default setting: “All Products” (links to your full product catalog)
What you can change it to:
- Collections page (browse by category)
- Sale/Featured Products page (push promotions)
- New Arrivals page (show latest products)
- Your homepage
- Any custom page or collection

Product

Image Ratio: Controls the shape and size of product images displayed in the cart.

Square (1:1) – Equal width and height; clean, uniform appearance
Portrait (3:4) – Taller than wide; good for fashion or vertical items
Landscape (4:3) – Wider than tall; good for furniture or wide items
Adapt to image – Shows products in their original dimensions (may vary)

Free shipping bar

Show Free Shipping Amount: Displays the dollar amount customers need to spend to qualify for free shipping.
- Turn ON:
  - Shows the free shipping minimum amount
  - Customers know the exact target to reach
- Turn OFF:
  - Hides the dollar amount
  - Shows only progress bar
  - Less clear what customers need to spend
Free Shipping Minimum Amount: The dollar threshold customers must reach to qualify for free shipping.
- Enter the minimum order amount (example: 100 = $100 USD)
- This should match your shipping rate settings in Shopify
- Different currencies are automatically converted
Free Shipping Bar Color: The color of the progress bar that shows free shipping progress.
- Click the color picker
- Choose a color matching your brand
- Or enter a specific hex code (example: #FF0000 for red)

Shine theme allows you to connect with most of social media, including:

Facebook
X
Instagram
YouTube
Vimeo
Pinterest
LinkedIn
TikTok
Tumblr
Snapchat

You can freely add or remove any social media by connecting with its URL account. If you do not want to connect with any of them, simply leave this part blank.

This can be used in multiple sections, such as the header, footer,…

Favicon

Adding your favicon is simple and quick. Just click the “Select” button and the media manager will pop up. From there, you can drag and drop your logo or select it if it’s already uploaded.

Please note that the image size will be scaled down to 32 x 32px for the best preference.

Currency

By default, currency codes are displayed for cart and checkout prices, ensuring clear pricing information. You can optionally enable currency codes for product cards, product details, and other areas of your store. If you disable currency codes, they will only be shown for cart and checkout prices.

It’s not too complicated to set up Shine Theme Settings, but if you’re still having difficulties, feel free to drop us an email via hi@saleshunterthemes.com or leave us a message on this page for more support.

Theme Settings

Table Of Contents