Hello! I made the entire background color of my website a light pink but I want to change just the product pages to be white background. I tried adding the below code to the theme.liquid code section at the bottom but I am not sure what the page is called. I tried default-product and some other things but not sure how to note it or if this is even the correct way to do this?
Thank you!
product {background-color: #FFFFFF;
@kyrasweetlaurel if youâre trying to modify the design (style) of your product page, you should add this kind of code in the theme.css (or similar) assets folder. But since, your trying to change the whole background color, you could add a condition the theme.liquid file.
Place the following code right before the closing -Tag:
{% if request.page_type contains 'product' %}
{% endif %}
Please let me know it this worked.
@Finer I donât think that worked. I put it in theme.liquid at the bottom of the section.
@kyrasweetlaurel i just tried it in the dawn theme, and it worked. Could you share your storeâs URL?
@Finer we arenât live yet but the current one is www.sweetlaurel.com
sorry this is long but the code is below.
{%- comment -%}DemoStoreRequirements{%- endcomment -%} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} â {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} â {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} â {{ shop.name }}{% endunless %}{% if page_description %}
{% endif %}
{% if template contains âproductâ %}
{% else %}
{% endif %}
{% render âsocial-meta-tagsâ %}
{% render âcss-variablesâ %}
{% if template == âindexâ %}
{{ 'theme-index.min.css' | asset_url | stylesheet_tag }} {% elsif template.name == 'collection' %} {{ 'theme-collection.min.css' | asset_url | stylesheet_tag }} {% elsif template == 'list-collections' %} {{ 'theme-collection-list.min.css' | asset_url | stylesheet_tag }} {% elsif template.name == 'product' %} {{ 'theme-product.min.css' | asset_url | stylesheet_tag }} {% elsif template.name == 'blog' %} {{ 'theme-blog.min.css' | asset_url | stylesheet_tag }} {% elsif template == 'cart' %} {{ 'theme-cart.min.css' | asset_url | stylesheet_tag }} {% else %} {{ 'theme.min.css' | asset_url | stylesheet_tag }} {% endif %}{{ âcustom.cssâ | asset_url | stylesheet_tag }}
{% render âfont-linksâ %}
{% if settings.favicon != blank %}
{% endif %}{{ content_for_header }}
{% if template contains âcustomersâ %}
{% endif %}
{% if template.name == âarticleâ %}
{% endif %}
{% if request.page_type contains âproductâ %}
body {background-color:#FFFFFF!important;}{% endif %}
.my-custom-video { width: 100%; .....continues on@Finer this theme isnât published yet. current url is www.sweetlaurel.com.
Sorry this is long but this is the current code
{%- comment -%}DemoStoreRequirements{%- endcomment -%} {{ page_title }}{% if current_tags %}{% assign meta_tags = current_tags | join: ', ' %} â {{ 'general.meta.tags' | t: tags: meta_tags }}{% endif %}{% if current_page != 1 %} â {{ 'general.meta.page' | t: page: current_page }}{% endif %}{% unless page_title contains shop.name %} â {{ shop.name }}{% endunless %}{% if page_description %}
{% endif %}
{% if template contains âproductâ %}
{% else %}
{% endif %}
{% render âsocial-meta-tagsâ %}
{% render âcss-variablesâ %}
{% if template == âindexâ %}
{{ 'theme-index.min.css' | asset_url | stylesheet_tag }} {% elsif template.name == 'collection' %} {{ 'theme-collection.min.css' | asset_url | stylesheet_tag }} {% elsif template == 'list-collections' %} {{ 'theme-collection-list.min.css' | asset_url | stylesheet_tag }} {% elsif template.name == 'product' %} {{ 'theme-product.min.css' | asset_url | stylesheet_tag }} {% elsif template.name == 'blog' %} {{ 'theme-blog.min.css' | asset_url | stylesheet_tag }} {% elsif template == 'cart' %} {{ 'theme-cart.min.css' | asset_url | stylesheet_tag }} {% else %} {{ 'theme.min.css' | asset_url | stylesheet_tag }} {% endif %}{{ âcustom.cssâ | asset_url | stylesheet_tag }}
{% render âfont-linksâ %}
{% if settings.favicon != blank %}
{% endif %}{{ content_for_header }}
{% if template contains âcustomersâ %}
{% endif %}
{% if template.name == âarticleâ %}
{% endif %}
....@Finer unfortunately our new theme is not live yet. current site is www.sweetlaurel.com
I added some screen shots (sorry its long) of part of the code so you can see.
@kyrasweetlaurel you placed the code within a script-container (the script starts at line 70). That is why itâs not working. You just have to place the code beneath the closing -Tag, which is currently on line 87.
@kyrasweetlaurel you could also use this code within in the condition on line 44. (Place it after line 46 )
{{ theme-product.min.css | asset_url | stylesheet_tag }}<--- after this line
<---Copy this line
Since the theme is already checking for this condition, we could use that to our advantage to use less code.
Hi,
Is there any way to make it more specific, and change the color of the âproduct sectionâ, so that only the section where the product is gets a different color, not the whole product page?
@danyiltolkach sure. Youâll have to find the according liquid file that renders the section. Within the first container, you can add a style attribute with the color you want to have.