Is it possible to separate the background on my home page from the one on my product page?

Store Design
1

Here is my store, I want a solid color for my “store” page, I only want the moving background on my home page.

2

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for

your store based on 6 years of providing solutions for about 100.000 active Shopify merchants.

Go to Online Store-> Theme->Edit code

theme.liquid ->paste the below code at the bottom of the file.

{% if handle contains ‘frontpage’ %}

background-image: unset !important;

{%endif%}

Best regards,

PageFly

3

That didn’t work, nothing changed. Is there anything else that I can try ?

4

Hello @hydiah ,

That’s a good question and we are elated to help you with the solution.

There are two ways to fix this issue with custom coding.

Follow the below steps to fix the issue.

Step 1: Go to the Theme.liquid.

Step 2: Press Ctrl+F

Step 3:

Search <body

Add the below-provided code in the body tag in the class attribute :

“{{ template.name | handle }}"

Add this code to the theme.liquid file

1st method: Template Method

{% if template.name == “index” %}

// add this code if you want to change the background of the home page.

.index.gradient{

Background:color Name;

}

{% endif %}

{% if template.name == “product” %}

//if you want to change the background then write code here.

.product.gradient{

Background:color Name;

}

{% endif %}

2nd Method: CSS Method

// CSS to change the background for the product page. body.product{ Background:color Name; } // css to change the background for the homepage. body.index{ Background:color Name; }

Hope it helps, let us know if you need any further help.

All the best,

Team CedCommerce