Theme settings

You can use theme settings to make changes to your online store's typography, colors, social media links, and cart page. When you make changes in your theme settings, the changes apply to your entire online store.

1. From your Shopify admin, go to Sales channels → Online Store → Themes.
2. In the Theme library area, locate Etheryx.
3. Click Edit theme, then select Theme settings

Layout

Site Content

Setting	Description
Max width on desktop	Defines the maximum width the site content can reach on desktop before stopping.
Center main content	Centers the main content of the site on desktop.
Global corner roundness	Sets the corner roundness for site elements like buttons, inputs, and images.

Inputs

Setting	Description
Padding	Controls the padding of input elements (e.g., inputs, text areas, buttons) across the theme.
Button alignment	Controls the text alignment of buttons. Applied globally, especially when buttons are full width.
Button brackets	Adjusts button appearance globally by applying brackets.

Custom cursors

Allows you to select your own images to use as cursors, changing the default cursor on desktop.

Setting	Description
Default	The standard cursor, usually shown as an arrow.
Pointer	The hand-shaped cursor, shown when hovering over interactive elements such as links or buttons.

• Use square images, at least 32 x 32 px, for best results.
• PNG format (can also use SVG, GIF, WEBP ).
• You can browse fun cursor options here.

Page Transitions

Applies a smooth page transition animation when navigating between pages. This feature is available only on supported browsers like Chrome and Edge.

Footers

When enabled, the footer is hidden by default with an icon to toggle visibility. Clicking the icon reveals the footer.

Colors

Schemes

Define different color schemes in your theme settings and apply them to various sections of your online store using the color scheme picker.

• A color scheme is a set of colors that can be customized in your theme editor.
• Your theme includes default color schemes that you can modify.
• Add your brand colors to ensure consistency throughout your store.

Global

The default color scheme selected here is applied to all elements across your online store unless overridden for a specific element.

Overlay backdrop

This setting customizes the backdrop elements across your store.

Setting	Description
Background	Sets the background color of the overlay backdrop.
Opacity	Adjusts the transparency of the overlay backdrop.
Blur	Applies a blur effect to the overlay backdrop.

Typography

IMPORTANT

Selecting or using multiple fonts font can impact your store's performance. Using multiple fonts can slow down your store.

Body

The main font used across your store.

Setting	Description
Font	Selects the font family for the body text.
Font size scale	Adjusts the font size across your store.
Underlined links	Applies an underline to links.
Strikethrough on hover	Adds a strikethrough effect to links when hovered over.

Headings

The font used for headings throughout your store.

Setting	Description
Font	Selects the font family for headings.
Uppercase	Converts all headings to uppercase text.
Enable same as body	Applies the same size to headings as body text, ignoring other heading settings.
Font size scale	Adjusts the font size for headings across your store.

Custom Fonts

Upload and use your own fonts to match your brand identity.
Learn more about custom fonts.

Media

Setting	Description
Round media corners	Applies rounded corners to image and video elements.

Search

IMPORTANT

Customize the search dialog's appearance from Overlay → Search.

Setting	Description
Enable suggestions	Predictive search displays results as you type.
Show vendor	Displays the vendor of a product (visible when search suggestions are enabled).
Show price	Displays the product price (visible when search suggestions are enabled).

Product card

Media

IMPORTANT

Using videos in product cards can reduce website speed and performance. Videos may not autoplay under certain conditions.

Setting	Description
Image	Displays only images in product cards.
Image and video	Displays both images and videos in product cards.
Show secondary media on hover	Displays secondary media (e.g., additional images or videos) when hovering over the card.
Crop media to fit	Automatically crops media to fit the selected aspect ratio.
Aspect ratio	Defines the aspect ratio for the media. Learn more about aspect ratios.
Custom aspect ratio	Allows you to set the height in pixels when "Media aspect ratio" is set to "Custom".
Crop style	Defines how media fits in the card: Wide (crops to fill space) or None (maintains original dimensions).
Crop position	Specifies the focal point for cropping: Top, Center, or Bottom.

Aspect ratio

Available aspect ratio

Name	Aspect ratio	Usage
Square	1:1	Ideal for product thumbnails and grid layouts. Provides a uniform look across different product categories.
Vertical	4:5	Offers slightly more height, useful for apparel, footwear, and products that benefit from a taller frame.
Standard Portrait	3:4	Good for products that are naturally taller, such as bottles or standing items.
Portrait Photo	2:3	Common in photography; can be used for full-length product images.
Wide	16:9	Less common for product cards but useful for banners or products that are wide, like monitors or TVs.
Portrait Wide	9:16	Smartphone videos, social media stories (e.g., TikTok, Instagram Stories, YouTube Shorts), and other video-based content.

Recommended aspect ratio

• 1:1 (Square)

  • Consistency: Provides a uniform appearance in product listings and categories.
  • Versatility: Works well with a variety of products, from electronics to accessories.
  • Mobile-friendly: Displays well on mobile devices, ensuring a good user experience.

• 4:5 (Vertical)

  • Best for apparel: Shows more of the product vertically, which is great for clothing, dresses, and full-length items.
  • Enhanced details: Allows customers to see more detail of the product in a single image.

Content

Setting	Description
Single line layout	Displays only the product title and price on one line. Hides all other content.
Show content on hover - desktop	Displays product information when hovering over the card on desktop.
Enable text clipping	Restricts titles, subtitles, and vendor names to one line.
Show vendor	Displays the vendor name on the product card.
Show subtitle	Displays a subtitle for the product. Standard metafield is used.
Show price	Displays the product price on the card.
Show available sizes	Shows a list of available variant sizes for the product on hover, replacing the product title.
Show available colors	Displays a counter of available colors for the product on hover, replacing the product title.
Show rating	Displays the product's rating. Requires a review app to be installed.
Fade out sold out products	Fades out the product card for items that are sold out.
Text alignment	Aling the text inside the product card

---

Quick buy

This feature enables customers to quickly add products to their cart by clicking the [+] button on the product card.

---

Badges

New badge

This option determines how the 'New' badge is applied:

• Collection: Applies if the product is in a collection containing new in the handle.
• Tag: Applies if the product has the new tag.
• Date: Applies if the product is added on or after the specified date in New badge duration.

---

Pre-order badge

Learn how to set up pre-order products here.

---

Custom badges

To add custom badges to your products

1. In your Shopify admin, go to Products

2. Click the product you want to edit

3. In the Tags section, add a tag using this format: badge:name

   Example: badge:Bestseller badge:super cool badge:Popular

   IMPORTANT

   You must use the exact format above, otherwise, the badge won't be applied.

4. Press Enter to add the tag

NOTE

You can add multiple badge tags, but use them in moderation, too many will clutter your product card.

IMPORTANT

Custom badges cannot be translated.

Cart

IMPORTANT

Customize the cart dialog's appearance from Overlay → Cart.

Type

Setting	Description
Drawer	Displays the cart as a drawer.
Page redirect	Redirects users to the cart page.

Layout

Setting	Description
Show image	Displays product images in the cart.
Show vendor	Displays the product vendor.
Show tax disclaimer	Displays tax-related information.
Show payment methods	Displays available payment methods.
Monochrome payment method icons	Uses monochrome icons for payment methods.
Show "Continue shopping" button	Adds a "Continue shopping" button.
Show "View cart" button	Adds a "View cart" button.
Show dynamic checkout buttons	Displays dynamic checkout options.
Show cart notes	Allows customers to add notes to their orders.

Currency codes

• Cart and checkout prices always display with currency codes.
  • Example: $1.00 USD.

Free Shipping

Setting	Description
Show free shipping bar	Displays a free shipping progress bar on the cart page.
Free shipping minimum amount	Enter the minimum amount for free shipping in your store's main currency (no currency code). To set different amounts per market, see this guide.

Social

Define your social media profiles to be displayed in areas like the footer and other locations across your store.

Setting	Description
Type	Choose between text or icon to determine how your social media links appear.
Social accounts	Add the URLs for your social media profiles.

Analytics

IMPORTANT

Enable Google Analytics and Facebook Pixel through the Shopify admin under Online Store → Preferences.

For other analytics providers (e.g., Pinterest, TikTok Pixel), use the provided textareas to add their codes to your store.

Custom Code

IMPORTANT

If you plan to update your theme in the future, avoid editing theme files manually. Manual edits may result in losing your changes during updates. Use the Custom Code section to implement customizations safely.

For more details, visit Etheryx Knowledge Base.

Custom CSS

WARNING

We strongly recommend avoid using the Custom CSS section!

The Custom CSS section has limitations that may result in errors, such as preventing the theme editor from saving changes. To ensure stability and avoid issues, always place your CSS customizations in the Custom Code section.

Theme presets

The Theme Style setting lets you choose from built-in presets, predefined combinations of colors, typography, and basic layout settings. Each preset gives your store a distinct visual style while keeping the overall structure and sections of the theme the same.

Switching presets is a quick way to change the look and feel of your store without affecting content or layout. It’s ideal for trying different design options or matching your brand style.

What Theme Style Changes

When you apply a new theme style preset, it updates:

• Colors
• Fonts
• Basic spacing and layout settings

It does not change:

• The sections added to your pages
• The structure or content of your store

For a 1:1 Match with a Theme Demo

If you want your store to look exactly like a theme demo (including layout and sections), you must install that version directly from the Shopify Theme Store. Applying a preset through the theme editor will not load the demo layout—only its visual style.

How to Change the Theme Style

1. From your Shopify admin, go to Online Store → Themes
2. Click Edit theme next to the theme you want to edit.
3. In the editor, click Theme settings → Theme style
4. Select the preset you want to apply.
5. Click Save

NOTE

Themes have multiple presets available. While they share the same sections and features, each preset offers a unique visual design.