Theme Settings

Welcome! Let’s set up the Shine Theme Settings by reading this article.

Table Of ContentsClick to copy 2222

Color Schemes

Product Badge


Product Information


Product Card

Quick Shop

Collection Card



Social Media



Accessing Shine Theme SettingsClick to copy 2222

After installing Shine Theme to your Shopify account, you can find the theme settings by clicking on the second icon on the menu bar.

Shine Theme Settings

Color SchemesClick to copy 2222

To adjust the color scheme, go to Theme Settings and select the colorful circles in the “Color Schemes” section. Here, you can choose from pre-set color schemes or design your own.

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.

Shine Theme Settings

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.

theme settings

General ColorsClick to copy 2222

General colors are only applied to sections that do not use a card scheme.

  • Page background: The default website background color.
  • Background gradient: The website background color with a gradient effect. This will replace the solid background color when selected. If the visitor’s browser does not support gradient backgrounds, some section backgrounds may revert to the default background color.

Drawer/PopoverClick to copy 2222

Drawer/Popover: 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.

Shine Theme Settings

To settings for this section, please follow these step:

Shine Theme Settings

  • You can select the color scheme for drawer and popover here, please note that this scheme is synchronized with the color schemes.

Shine Theme Settings

  • 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: This is a layer that lies above the page background and below the section background. To see this layer, you will need to use a transparent background for the section.
  • Tips: Remove the hex code part in the background within the color scheme to make the section transparent.

Product BadgeClick to copy 2222

Shine Theme Settings

  • Sale text: Applied for the text used in the badge style, this is the text that appears on products that are on sale.
  • Sale background: This refers to the background color or design behind the sale text. The background can often be a bright or contrasting color to catch the customer’s eye.
  • Sold out text: Applied for the text used in the badge of products that are no longer available for purchase because they have sold out.
  • Sold out background: Similar to the sale background, this is the background color or design behind the sold out text. 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.

TypographyClick to copy 2222

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 InformationClick to copy 2222

You can switch variant option to option swatch by following this part.

The default setting for displaying the low stock threshold is 5, and it can range from 0 to 10. If you wish to have no threshold, set it to 0. Shine supports variant options that display as swatches.

Shine Theme Settings

Variant swatches

You can enter the variant option you want to switch into variant swatches into the field. We recommended to use options that are highly distinctive and recognizable to the general buyer base.

Shine Theme Settings

Display type

You can display variant swatches value in 2 ways:

  • Custom value: Enter the custom value in the custom value field below. This allows for quick and real-time customization, and supports the use of HEX colors and images (uploaded in Shopify files).
  • Variant image: Use the variant image to display instead of having to custom. This ensures dynamic and consistent updates when the image in the product and in the theme is changed.

Shine Theme Settings


You can only add one variant type to the placeholder, and variant swatches will apply specifically to that type.

The variant type entered in the “Variant option” placeholder must match the exact name of the variant you have defined for the product.

If you want to use image for variant swatches, you will need to upload the image png file onto the Shopify Files. Shine theme supports PNG and JPG files.

Shine Theme Settings

Then enter the Name of the variant with the image URL.

For example, I have uploaded the image file with the URL ” ” and want to add it for the “Black” color so I need to add in the Variant swatches rules: ” Black:

Shine Theme Settings

AppearanceClick to copy 2222

In Appearance, you can set up the General appearance of your page, as well as the appearance of Spacing and Animations.

For adjusting the spacing, you can modify the Page maximum width with a range of 1300 to 2000 and a step increment of 100.

Shine Theme Settings

And next, you can select Corner radius for these following parameters:

  • Section container: Sharp or Rounded
  • Drawer/popover: Sharp or Rounded
  • Button: Sharp or Pill (Button corner radius apply for: Buttons, Pagination and Tag)
  • Common components: Sharp or Rounded

Shine Theme Settings

Settings for icon, you can select Icon thickness: Regular or Bold.

Shine Theme Settings

Product CardClick to copy 2222

You can adjust all the settings for the product card here. In the general section, you can choose between ‘card‘ and ‘standard‘ styles. Additionally, for the Content Alignment, there are two options available: left and center.

Shine Theme Settings

You can change the color scheme for this section by selecting the scheme here. To change the theme color, please go to Theme settings > Colors.

Shine Theme Settings

With Image Ratio, you can select one of 4 types: Square, Portrait (3×4), Landscape (4:3) and Adapt to image.

And there are 2 options for the image fit: fill and fit.

To show a second image on hover, you just need to enable this function here.

Shine Theme Settings

In the information tab, you have three options for displaying the sale badge to choose from:

  • Never
  • Text Only
  • Text + Sale Amount

Additionally, there’s an option to enable the ‘Show Sold Out’ badge.

Shine Theme Settings

Quick ShopClick to copy 2222

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 CardClick to copy 2222

Firstly, you can select the color scheme for the collection card by selecting from the defined scheme. To customize the color scheme, access Theme Settings > Colors.

Shine Theme Settings

To set the overlay opacity, simply drag to the desired value within the range of  0% (fully transparent) to 90% (partially opaque). The default setting is 30%.

After that, for the Content Alignment, there are two options available: left and center.

Shine theme offers 3 collection image ratios to suit your preferences:

  • Portrait (2:3): Ideal for showcasing products with vertical emphasis, such as clothing or accessories.
  • Square: A classic and versatile option that ensures a consistent look across your collections.
  • Landscape (3:2): Perfect for highlighting products with horizontal elements, such as furniture or appliances.

Shine Theme Settings

To Show product quantity, you can enable this function here.

Shine Theme Settings

Shine theme supports 2 search types: page and drawer.

Shine Theme Settings

After that, you can select Predictive search results displaying:

  • Blog posts
  • Pages
  • Collections

For the Search results displaying, you can select:

  • Blog posts
  • Pages

Shine Theme Settings

  • With Image Ratio of Product result, you can select one of 4 types: Square, Portrait (3×4), Landscape (4:3) and Adapt to image.
  • With the Image Ratio of Collection result, you can select one of 3 types: Square, Portrait (3×4) and Landscape (4:3). You can also enable the “Show product quantity” here.
  • With the Image Ratio of Blog post result, you can select one of 2 types: Square and Landscape (4:3). You can also enable the “Show blog post tag” here.

Shine Theme Settings

CartClick to copy 2222

Shine theme supports 2 cart types:

  • Drawer: The cart appears as a slide-out drawer on the right side of the page.
  • Page: The cart appears as a dedicated page on your website.

By default, cart type is set at Drawer.

Shine Theme Settings

You can select which type of cart you want to use:

  • Popover notification
  • Show the Cart drawer
  • Direct to Cart page
  • Do nothing

After that, you can also select which details you want to display with the cart:

  • Enable order notes: Allows customers to leave notes for their order.
  • Enable dynamic checkout button: Displays a checkout button that changes color and text depending on the contents of the cart.
  • Show tax and shipping information: Displays the estimated tax and shipping costs for the items in the cart.

Shine Theme SettingsNext, you can add a button link for the cart if this cart is empty. This button can redirect users to a promotions page or showcase hot products, facilitating cross-selling opportunities:Shine Theme SettingsOn the next step, you can select one of 4 types: Square, Portrait (3×4), Landscape (4:3) and Adapt to image for the Image ratio of Product.

Shine Theme Settings

Free shipping bar

When you enter a minimum amount, it creates a goal for the total price that the buyer must reach to qualify for free shipping.

By default, the currency of the free shipping will automatically follow the store currency. For buyers using a different currency, it will be automatically converted based on the exchange rate provided by Shopify.

Shine Theme Settings

To change the color for this bar, you just need to select the color or enter the color code on the settings.

Social MediaClick to copy 2222

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

  • Facebook
  • X
  • Instagram
  • YouTube
  • Vimeo
  • Pinterest
  • LinkedIn
  • TikTok
  • Tumblr
  • Snapchat

Shine theme settings

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,…

FaviconClick to copy 2222

Adding your favicon is simple and quick. Just click the “Select image” 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.

Shine theme settings

CurrencyClick to copy 2222

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.

Shine theme settings

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 or leave us a message on this page for more support.

Navigate this category